diff --git a/assets/styles.css b/assets/styles.css
index 89a6322..8b0c6c6 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -87,18 +87,20 @@
   gap: 5px;
 }
 
-.icon {
+.omnisearch-result__icon {
   display: inline-block;
   vertical-align: middle;
   width: 16px;
   height: 16px;
   margin-right: 4px;
 }
-.icon svg {
+
+.omnisearch-result__icon svg {
   width: 100%;
   height: 100%;
 }
-.icon-emoji {
+
+.omnisearch-result__icon--emoji {
   font-size: 16px;
   vertical-align: middle;
   margin-right: 4px;
diff --git a/src/components/ResultItemVault.svelte b/src/components/ResultItemVault.svelte
index 0ee019c..638b1d8 100644
--- a/src/components/ResultItemVault.svelte
+++ b/src/components/ResultItemVault.svelte
@@ -165,7 +165,7 @@
         {:else}
           <!-- File Icon -->
           {#if fileIconSVG}
-            <span class="icon" use:renderSVG="{fileIconSVG}"></span>
+            <span class="omnisearch-result__icon" use:renderSVG="{fileIconSVG}"></span>
           {/if}
         {/if}
         <span>
@@ -191,7 +191,7 @@
       <div class="omnisearch-result__folder-path">
         <!-- Folder Icon -->
         {#if folderIconSVG}
-          <span class="icon" use:renderSVG="{folderIconSVG}"></span>
+          <span class="omnisearch-result__icon" use:renderSVG="{folderIconSVG}"></span>
         {/if}
         <span>
           {@html plugin.textProcessor.highlightText(notePath, matchesNotePath)}
diff --git a/src/tools/icon-utils.ts b/src/tools/icon-utils.ts
index 8939393..d45cbfe 100644
--- a/src/tools/icon-utils.ts
+++ b/src/tools/icon-utils.ts
@@ -133,7 +133,7 @@ export async function loadIconSVG(
 
   if (!prefix) {
     // No prefix, assume it's an emoji or text
-    return `<span class="icon-emoji">${name}</span>`
+    return `<span class="omnisearch-result__icon--emoji">${name}</span>`
   }
 
   const iconPackName = prefixToIconPack[prefix]