feat: support for url based icons (#840)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/image-box.svelte

@@ -1,10 +1,25 @@
 <script lang="ts">
 	import { cn } from '$lib/utils/style';
+	import { LucideImageOff } from '@lucide/svelte';
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
 	let props: HTMLImgAttributes & {} = $props();
+	let error = $state(false);
+
+	$effect(() => {
+		props.src;
+		error = false;
+	});
 </script>
 
 <div class={'bg-muted flex items-center justify-center rounded-2xl p-3'}>
-	<img class={cn('size-24 object-contain', props.class)} {...props} />
+	{#if error}
+		<LucideImageOff class={cn('text-muted-foreground p-5', props.class)} />
+	{:else}
+		<img
+			{...props}
+			class={cn('object-contain', props.class)}
+			onerror={() => (error = true)}
+		/>
+	{/if}
 </div>