diff --git a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
index 57523b5..319e0df 100644
--- a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
+++ b/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
@@ -31,7 +31,7 @@
     {:else if type === "directory"}
       <IconFolder />
     {:else}
-      <IconDraft />
+      <IconDraft class="text-blue-400" />
     {/if}
   </div>
 {/snippet}
@@ -41,8 +41,7 @@
 {/snippet}
 
 <IconLabel
-  icon={iconSnippet}
-  iconClass={type === "file" ? "text-blue-400" : undefined}
+  {iconSnippet}
   subtext={subtext ? subtextSnippet : undefined}
   class={className}
   textClass={textClassName}
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
index 9b6ea1f..158ddb2 100644
--- a/src/lib/components/molecules/labels/IconLabel.svelte
+++ b/src/lib/components/molecules/labels/IconLabel.svelte
@@ -5,8 +5,9 @@
   interface Props {
     children: Snippet;
     class?: ClassValue;
-    icon: Component<SvelteHTMLElements["svg"]> | Snippet;
+    icon?: Component<SvelteHTMLElements["svg"]>;
     iconClass?: ClassValue;
+    iconSnippet?: Snippet;
     subtext?: Snippet;
     textClass?: ClassValue;
   }
@@ -16,15 +17,20 @@
     class: className,
     icon: Icon,
     iconClass: iconClassName,
+    iconSnippet,
     subtext,
     textClass: textClassName,
   }: Props = $props();
 </script>
 
 <div class={["flex items-center gap-x-4", className]}>
-  <div class={["flex-shrink-0 text-lg", iconClassName]}>
-    <Icon />
-  </div>
+  {#if iconSnippet}
+    {@render iconSnippet()}
+  {:else if Icon}
+    <div class={["flex-shrink-0 text-lg", iconClassName]}>
+      <Icon />
+    </div>
+  {/if}
   <div class="flex flex-grow flex-col overflow-x-hidden text-left">
     <p class={["truncate font-medium", textClassName]}>
       {@render children()}