diff --git a/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte b/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
index 568e5b956..8182ae9c8 100644
--- a/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
+++ b/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
@@ -1,25 +1,20 @@
 <script lang="ts">
 	export let type: string;
 	export let isAbsolute = false;
+	let githubRawIconUrl =
+		'https://raw.githubusercontent.com/coollabsio/coolify-community-templates/main/services/icons';
+
 	let fallback = '/icons/default.png';
-	const handleError = (ev: { target: { src: string } }) => (ev.target.src = fallback);
-	let extension = 'png';
-	let svgs = [
-		'mattermost',
-		'directus',
-		'pocketbase',
-		'gitea',
-		'languagetool',
-		'meilisearch',
-		'n8n',
-		'glitchtip',
-		'searxng',
-		'umami',
-		'uptimekuma',
-		'vaultwarden',
-		'weblate',
-		'wordpress'
-	];
+	let useFallback: boolean = false;
+
+	const handleError = (ev: { target: { src: string } }) => {
+		if (useFallback) {
+			ev.target.src = fallback;
+		} else {
+			ev.target.src = `${githubRawIconUrl}/${name}.svg`;
+			useFallback = true;
+		}
+	};
 
 	const name: any =
 		type &&
@@ -29,32 +24,15 @@
 			.split('-')[0]
 			.toLowerCase();
 
-	if (svgs.includes(name)) {
-		extension = 'svg';
-	}
-
 	function generateClass() {
-		switch (name) {
-			case 'n8n':
-				if (isAbsolute) {
-					return 'w-12 h-12 absolute -m-9 -mt-12';
-				}
-				return 'w-12 h-12 -mt-3';
-			case 'weblate':
-				if (isAbsolute) {
-					return 'w-12 h-12 absolute -m-9 -mt-12';
-				}
-				return 'w-12 h-12 -mt-3';
-			default:
-				return isAbsolute ? 'w-10 h-10 absolute -m-4 -mt-9 left-0' : 'w-10 h-10';
-		}
+		return isAbsolute ? 'w-10 h-10 absolute -m-4 -mt-9 left-0' : 'w-10 h-10';
 	}
 </script>
 
 {#if name}
 	<img
 		class={generateClass()}
-		src={`/icons/${name}.${extension}`}
+		src={`${githubRawIconUrl}/${name}.png`}
 		on:error={handleError}
 		alt={`Icon of ${name}`}
 	/>