diff --git a/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte b/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte
index b7535e690ba..60a88abe51c 100644
--- a/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte
+++ b/client/web-sveltekit/src/lib/fuzzyfinder/FuzzyFinder.svelte
@@ -11,7 +11,7 @@
     import FileIcon from '$lib/repo/FileIcon.svelte'
     import CodeHostIcon from '$lib/search/CodeHostIcon.svelte'
     import EmphasizedLabel from '$lib/search/EmphasizedLabel.svelte'
-    import SymbolKind from '$lib/search/SymbolKind.svelte'
+    import SymbolKindIcon from '$lib/search/SymbolKindIcon.svelte'
     import TabsHeader, { type Tab } from '$lib/TabsHeader.svelte'
     import { Input } from '$lib/wildcard'
     import Button from '$lib/wildcard/Button.svelte'
@@ -238,7 +238,7 @@
                                 </a>
                             {:else if item.item.type == 'symbol'}
                                 <a href={item.item.symbol.location.url} on:click={handleClick}>
-                                    <SymbolKind symbolKind={item.item.symbol.kind} />
+                                    <SymbolKindIcon symbolKind={item.item.symbol.kind} />
                                     <span
                                         ><EmphasizedLabel
                                             label={item.item.symbol.name}
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Array.svelte b/client/web-sveltekit/src/lib/icons/symbols/Array.svelte
new file mode 100644
index 00000000000..15b2396453c
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Array.svelte
@@ -0,0 +1,9 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path d="M11.7695 4.50391V11.8594H9.29297V11H10.707V5.36328H9.32422V4.50391H11.7695Z" />
+    <path d="M4.34766 4.50391H6.79688V5.36328H5.41016V11H6.82422V11.8594H4.34766V4.50391Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Boolean.svelte b/client/web-sveltekit/src/lib/icons/symbols/Boolean.svelte
new file mode 100644
index 00000000000..9ef3634a314
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Boolean.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M10.4727 11.0938C9.25781 11.0938 8.49219 10.3555 8.49219 9.17969V8.51562C8.49219 7.33984 9.25781 6.60156 10.4727 6.60156C11.6875 6.60156 12.4531 7.33984 12.4531 8.51562V9.17969C12.4531 10.3555 11.6875 11.0938 10.4727 11.0938ZM10.4727 7.47656C9.89844 7.47656 9.54297 7.89062 9.54297 8.55859V9.13672C9.54297 9.80078 9.89844 10.2188 10.4727 10.2188C11.0469 10.2188 11.4023 9.80078 11.4023 9.13672V8.55859C11.4023 7.89062 11.0469 7.47656 10.4727 7.47656Z"
+    />
+    <path
+        d="M5.74219 11H3.61719V5.36328H5.69141C6.77344 5.36328 7.42578 5.88672 7.42578 6.76562C7.42578 7.375 6.99609 7.88672 6.41016 7.97656V8.04297C7.16016 8.09766 7.69531 8.66406 7.69531 9.39453C7.69531 10.3828 6.94922 11 5.74219 11ZM4.70312 6.21875V7.68359H5.34375C5.95703 7.68359 6.30859 7.41797 6.30859 6.96484C6.30859 6.48047 5.98438 6.21875 5.39062 6.21875H4.70312ZM4.70312 10.1289H5.39844C6.17188 10.1289 6.53906 9.86719 6.53906 9.29688C6.53906 8.76172 6.15234 8.49609 5.39062 8.49609H4.70312V10.1289Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Class.svelte b/client/web-sveltekit/src/lib/icons/symbols/Class.svelte
new file mode 100644
index 00000000000..b130d10ad6f
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Class.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.125 10.1172C8.70703 10.1172 9.07031 9.71094 9.08203 9.05469H10.207C10.207 10.332 9.41016 11.1133 8.12891 11.1133C6.73438 11.1133 5.91406 10.2422 5.91406 8.75781V7.60547C5.91406 6.12109 6.73438 5.25 8.12891 5.25C9.42578 5.25 10.1953 6.02734 10.2031 7.35938H9.07812C9.06641 6.68359 8.68359 6.24609 8.10938 6.24609C7.42578 6.24609 7.06641 6.71484 7.06641 7.60547V8.75781C7.06641 9.65234 7.42578 10.1172 8.125 10.1172Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Constant.svelte b/client/web-sveltekit/src/lib/icons/symbols/Constant.svelte
new file mode 100644
index 00000000000..19522b6b9e3
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Constant.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M10.4727 11.0938C9.25781 11.0938 8.49219 10.3555 8.49219 9.17969V8.51562C8.49219 7.33984 9.25781 6.60156 10.4727 6.60156C11.6875 6.60156 12.4531 7.33984 12.4531 8.51562V9.17969C12.4531 10.3555 11.6875 11.0938 10.4727 11.0938ZM10.4727 7.47656C9.89844 7.47656 9.54297 7.89062 9.54297 8.55859V9.13672C9.54297 9.80078 9.89844 10.2188 10.4727 10.2188C11.0469 10.2188 11.4023 9.80078 11.4023 9.13672V8.55859C11.4023 7.89062 11.0469 7.47656 10.4727 7.47656Z"
+    />
+    <path
+        d="M5.65234 10.1172C6.23438 10.1172 6.59766 9.71094 6.60938 9.05469H7.73438C7.73438 10.332 6.9375 11.1133 5.65625 11.1133C4.26172 11.1133 3.44141 10.2422 3.44141 8.75781V7.60547C3.44141 6.12109 4.26172 5.25 5.65625 5.25C6.95312 5.25 7.72266 6.02734 7.73047 7.35938H6.60547C6.59375 6.68359 6.21094 6.24609 5.63672 6.24609C4.95312 6.24609 4.59375 6.71484 4.59375 7.60547V8.75781C4.59375 9.65234 4.95312 10.1172 5.65234 10.1172Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Constructor.svelte b/client/web-sveltekit/src/lib/icons/symbols/Constructor.svelte
new file mode 100644
index 00000000000..d834f36584e
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Constructor.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.73047 7.94922C8.73047 7.11328 9.40234 6.58984 10.4688 6.58984C11.5117 6.58984 12.1484 7.05859 12.1992 7.86719H11.1914C11.1406 7.58203 10.8594 7.40625 10.4609 7.40625C10.0547 7.40625 9.78516 7.58984 9.78516 7.86328C9.78516 8.09766 9.96484 8.23828 10.3828 8.32422L11.0508 8.46094C11.9219 8.64062 12.3086 9.01172 12.3086 9.66797C12.3086 10.5391 11.5977 11.0898 10.4766 11.0898C9.375 11.0898 8.69531 10.6172 8.63672 9.80859H9.69141C9.75781 10.1055 10.0469 10.2695 10.4922 10.2695C10.9297 10.2695 11.2109 10.0859 11.2109 9.80469C11.2109 9.5625 11.0469 9.44531 10.5938 9.34766L9.94922 9.21094C9.14062 9.03516 8.73047 8.61328 8.73047 7.94922Z"
+    />
+    <path
+        d="M5.65234 10.1172C6.23438 10.1172 6.59766 9.71094 6.60938 9.05469H7.73438C7.73438 10.332 6.9375 11.1133 5.65625 11.1133C4.26172 11.1133 3.44141 10.2422 3.44141 8.75781V7.60547C3.44141 6.12109 4.26172 5.25 5.65625 5.25C6.95312 5.25 7.72266 6.02734 7.73047 7.35938H6.60547C6.59375 6.68359 6.21094 6.24609 5.63672 6.24609C4.95312 6.24609 4.59375 6.71484 4.59375 7.60547V8.75781C4.59375 9.65234 4.95312 10.1172 5.65234 10.1172Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Enum.svelte b/client/web-sveltekit/src/lib/icons/symbols/Enum.svelte
new file mode 100644
index 00000000000..ca3ec893bcd
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Enum.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.55469 11V6.69141H9.58984V7.41406H9.65625C9.86719 6.89453 10.332 6.60156 10.9531 6.60156C11.8906 6.60156 12.3906 7.16406 12.3906 8.21484V11H11.3203V8.46875C11.3203 7.83594 11.0664 7.53516 10.5234 7.53516C9.97656 7.53516 9.62109 7.91406 9.62109 8.51172V11H8.55469Z"
+    />
+    <path
+        d="M7.38281 10.043V11H3.82812V5.36328H7.38281V6.32031H4.94141V7.70703H7.23828V8.59375H4.94141V10.043H7.38281Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/EnumMember.svelte b/client/web-sveltekit/src/lib/icons/symbols/EnumMember.svelte
new file mode 100644
index 00000000000..aa395f79b85
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/EnumMember.svelte
@@ -0,0 +1,11 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M9.46484 8.77734V10.6367H8.53125V5H9.6875L10.6133 8.22656H10.6797L11.5977 5H12.7578V10.6367H11.8242V8.77734L11.9648 6.52734H11.8828L11.0195 9.3125H10.2695L9.40625 6.52734H9.32422L9.46484 8.77734Z"
+    />
+    <path d="M7.55469 9.67969V10.6367H4V5H7.55469V5.95703H5.11328V7.34375H7.41016V8.23047H5.11328V9.67969H7.55469Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Event.svelte b/client/web-sveltekit/src/lib/icons/symbols/Event.svelte
new file mode 100644
index 00000000000..40ba84cce2a
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Event.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.36719 6.69141H9.51562L10.457 9.95703H10.5195L11.4492 6.69141H12.5781L11.0859 11H9.86719L8.36719 6.69141Z"
+    />
+    <path
+        d="M7.38281 10.043V11H3.82812V5.36328H7.38281V6.32031H4.94141V7.70703H7.23828V8.59375H4.94141V10.043H7.38281Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Field.svelte b/client/web-sveltekit/src/lib/icons/symbols/Field.svelte
new file mode 100644
index 00000000000..8451fea3510
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Field.svelte
@@ -0,0 +1,11 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M9.99609 11.0664C9.01172 11.0664 8.42578 10.3867 8.42578 9.21484V8.47266C8.42578 7.30078 9.01172 6.62109 9.99609 6.62109C10.6172 6.62109 11.0469 6.91016 11.1914 7.42578H11.2695V5.05078H12.3867V11H11.2852V10.2578H11.2031C11.0547 10.7812 10.6289 11.0664 9.99609 11.0664ZM10.4102 10.1406C10.9609 10.1406 11.2969 9.77734 11.2969 9.18359V8.47266C11.2969 7.87891 10.9609 7.51953 10.4102 7.51953C9.85547 7.51953 9.51562 7.87891 9.51562 8.47266V9.18359C9.51562 9.77734 9.85547 10.1406 10.4102 10.1406Z"
+    />
+    <path d="M5.00781 11H3.89453V5.36328H7.45703V6.32031H5.00781V7.84766H7.23438V8.76562H5.00781V11Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/File.svelte b/client/web-sveltekit/src/lib/icons/symbols/File.svelte
new file mode 100644
index 00000000000..09b84e7d327
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/File.svelte
@@ -0,0 +1,33 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+        fill="var(--icon-color)"
+    />
+    <g clip-path="url(#clip0_3027_85654)">
+        <path
+            d="M11.9284 11.9286C11.9284 12.118 11.8531 12.2997 11.7192 12.4337C11.5853 12.5676 11.4036 12.6429 11.2141 12.6429H4.78557C4.59613 12.6429 4.41445 12.5676 4.2805 12.4337C4.14655 12.2997 4.07129 12.118 4.07129 11.9286V4.07146C4.07129 3.88202 4.14655 3.70034 4.2805 3.56639C4.41445 3.43243 4.59613 3.35718 4.78557 3.35718H9.42843L11.9284 5.85718V11.9286Z"
+            stroke="#099268"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M6.92857 10.5L5.5 9.07139L6.92857 7.64282"
+            stroke="#099268"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M9.07129 10.5L10.4999 9.07139L9.07129 7.64282"
+            stroke="#099268"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </g>
+    <defs>
+        <clipPath id="clip0_3027_85654">
+            <rect width="10" height="10" fill="white" transform="translate(3 3)" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Function.svelte b/client/web-sveltekit/src/lib/icons/symbols/Function.svelte
new file mode 100644
index 00000000000..52734772376
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Function.svelte
@@ -0,0 +1,11 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.55469 11V6.69141H9.58984V7.41406H9.65625C9.86719 6.89453 10.332 6.60156 10.9531 6.60156C11.8906 6.60156 12.3906 7.16406 12.3906 8.21484V11H11.3203V8.46875C11.3203 7.83594 11.0664 7.53516 10.5234 7.53516C9.97656 7.53516 9.62109 7.91406 9.62109 8.51172V11H8.55469Z"
+    />
+    <path d="M5.00781 11H3.89453V5.36328H7.45703V6.32031H5.00781V7.84766H7.23438V8.76562H5.00781V11Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Interface.svelte b/client/web-sveltekit/src/lib/icons/symbols/Interface.svelte
new file mode 100644
index 00000000000..64d34595d04
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Interface.svelte
@@ -0,0 +1,11 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.55469 11V6.69141H9.58984V7.41406H9.65625C9.86719 6.89453 10.332 6.60156 10.9531 6.60156C11.8906 6.60156 12.3906 7.16406 12.3906 8.21484V11H11.3203V8.46875C11.3203 7.83594 11.0664 7.53516 10.5234 7.53516C9.97656 7.53516 9.62109 7.91406 9.62109 8.51172V11H8.55469Z"
+    />
+    <path d="M7.25 11H3.80469V10.0469H4.97266V6.31641H3.80469V5.36328H7.25V6.31641H6.08203V10.0469H7.25V11Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Key.svelte b/client/web-sveltekit/src/lib/icons/symbols/Key.svelte
new file mode 100644
index 00000000000..76e804e46e1
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Key.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M7.19922 11H6.14453V5.36328H7.19922V7.92969H7.25781L9.23047 5.36328H10.4023L8.46094 7.85156L10.5273 11H9.23438L7.69531 8.65234L7.19922 9.28516V11Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Method.svelte b/client/web-sveltekit/src/lib/icons/symbols/Method.svelte
new file mode 100644
index 00000000000..358befde6f8
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Method.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M6.82031 9.14062V11H5.88672V5.36328H7.04297L7.96875 8.58984H8.03516L8.95312 5.36328H10.1133V11H9.17969V9.14062L9.32031 6.89062H9.23828L8.375 9.67578H7.625L6.76172 6.89062H6.67969L6.82031 9.14062Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Module.svelte b/client/web-sveltekit/src/lib/icons/symbols/Module.svelte
new file mode 100644
index 00000000000..566d20dc6eb
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Module.svelte
@@ -0,0 +1,16 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M12.4688 11.0664C11.4844 11.0664 10.8984 10.3867 10.8984 9.21484V8.47266C10.8984 7.30078 11.4844 6.62109 12.4688 6.62109C13.0898 6.62109 13.5195 6.91016 13.6641 7.42578H13.7422V5.05078H14.8594V11H13.7578V10.2578H13.6758C13.5273 10.7812 13.1016 11.0664 12.4688 11.0664ZM12.8828 10.1406C13.4336 10.1406 13.7695 9.77734 13.7695 9.18359V8.47266C13.7695 7.87891 13.4336 7.51953 12.8828 7.51953C12.3281 7.51953 11.9883 7.87891 11.9883 8.47266V9.18359C11.9883 9.77734 12.3281 10.1406 12.8828 10.1406Z"
+    />
+    <path
+        d="M8 11.0938C6.78516 11.0938 6.01953 10.3555 6.01953 9.17969V8.51562C6.01953 7.33984 6.78516 6.60156 8 6.60156C9.21484 6.60156 9.98047 7.33984 9.98047 8.51562V9.17969C9.98047 10.3555 9.21484 11.0938 8 11.0938ZM8 7.47656C7.42578 7.47656 7.07031 7.89062 7.07031 8.55859V9.13672C7.07031 9.80078 7.42578 10.2188 8 10.2188C8.57422 10.2188 8.92969 9.80078 8.92969 9.13672V8.55859C8.92969 7.89062 8.57422 7.47656 8 7.47656Z"
+    />
+    <path
+        d="M1.875 9.14062V11H0.941406V5.36328H2.09766L3.02344 8.58984H3.08984L4.00781 5.36328H5.16797V11H4.23438V9.14062L4.375 6.89062H4.29297L3.42969 9.67578H2.67969L1.81641 6.89062H1.73438L1.875 9.14062Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Namespace.svelte b/client/web-sveltekit/src/lib/icons/symbols/Namespace.svelte
new file mode 100644
index 00000000000..5bfa4494a67
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Namespace.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.37109 9.42188H9.41797C9.46875 9.91016 9.86719 10.1914 10.5078 10.1914C11.1172 10.1914 11.5039 9.89844 11.5039 9.44141C11.5039 9.05859 11.2539 8.85547 10.6016 8.71094L10.0156 8.57422C8.99609 8.34375 8.49609 7.80469 8.49609 6.96875C8.49609 5.91797 9.27344 5.25 10.4922 5.25C11.6719 5.25 12.4648 5.91016 12.5 6.91797H11.4531C11.4102 6.45312 11.0547 6.16797 10.5039 6.16797C9.94531 6.16797 9.59766 6.42969 9.59766 6.85156C9.59766 7.25 9.84766 7.46875 10.457 7.60156L11.0352 7.73438C12.125 7.97656 12.6016 8.46484 12.6016 9.32812C12.6016 10.4414 11.8047 11.1133 10.4883 11.1133C9.21094 11.1133 8.41016 10.4766 8.37109 9.42188Z"
+    />
+    <path
+        d="M4.51172 11H3.55078V5.36328H4.53906L6.47656 9.10938H6.54297V5.36328H7.50391V11H6.51953L4.57812 7.23047H4.51172V11Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Null.svelte b/client/web-sveltekit/src/lib/icons/symbols/Null.svelte
new file mode 100644
index 00000000000..e70b4dd1526
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Null.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M5.01758 11.762L4.12158 10.866L5.05958 10.082C4.62092 9.44736 4.40158 8.71003 4.40158 7.87003C4.40158 7.16069 4.55558 6.52603 4.86358 5.96603C5.18091 5.40603 5.61025 4.96736 6.15158 4.65003C6.69291 4.33269 7.30892 4.17403 7.99958 4.17403C8.84892 4.17403 9.58625 4.41669 10.2116 4.90203L10.9816 3.97803L11.8776 4.87403L10.9396 5.65803C11.3782 6.29269 11.5976 7.03003 11.5976 7.87003C11.5976 8.57936 11.4389 9.21403 11.1216 9.77403C10.8136 10.334 10.3889 10.7727 9.84758 11.09C9.30625 11.4074 8.69025 11.566 7.99958 11.566C7.15025 11.566 6.41292 11.3234 5.78758 10.838L5.01758 11.762ZM5.94158 9.22803L9.39958 5.74203C9.00758 5.43403 8.54092 5.28003 7.99958 5.28003C7.53292 5.28003 7.12225 5.39203 6.76758 5.61603C6.41292 5.84003 6.13292 6.14803 5.92758 6.54003C5.72225 6.92269 5.61958 7.36603 5.61958 7.87003C5.61958 8.38336 5.72692 8.83603 5.94158 9.22803ZM7.99958 10.46C8.46625 10.46 8.87691 10.348 9.23158 10.124C9.58625 9.90003 9.86625 9.59669 10.0716 9.21403C10.2769 8.82203 10.3796 8.37403 10.3796 7.87003C10.3796 7.35669 10.2722 6.90403 10.0576 6.51203L6.59958 9.99803C6.99158 10.306 7.45825 10.46 7.99958 10.46Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Number.svelte b/client/web-sveltekit/src/lib/icons/symbols/Number.svelte
new file mode 100644
index 00000000000..88d8fb42947
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Number.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M10.1914 7.66797H9.39062L9.19141 8.61719H9.98438L9.82812 9.51953H9.02734L8.73438 11H7.87891L8.16797 9.51953H7.29297L7.00391 11H6.14062L6.4375 9.51953H5.65625L5.82031 8.61719H6.60156L6.79688 7.66797H6.01562L6.17969 6.77734H6.96094L7.24219 5.35938H8.09766L7.82031 6.77734H8.69141L8.97266 5.35938H9.83203L9.55859 6.77734H10.3516L10.1914 7.66797ZM7.60938 7.58984L7.39062 8.70312H8.37109L8.59766 7.58984H7.60938Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Object.svelte b/client/web-sveltekit/src/lib/icons/symbols/Object.svelte
new file mode 100644
index 00000000000..9acc61652d1
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Object.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.83984 11.8594V11H9.21484C9.76953 11 9.87891 10.8711 9.87891 10.2266V9.14062C9.87891 8.60547 10.2617 8.26172 10.9688 8.21875V8.14844C10.2617 8.10547 9.87891 7.75781 9.87891 7.22656V6.13672C9.87891 5.49219 9.76953 5.36328 9.21484 5.36328H8.83984V4.50391H9.46875C10.5977 4.50391 10.9648 4.85938 10.9648 5.95312V6.81641C10.9648 7.43359 11.2461 7.67188 12.1055 7.63672V8.72656C11.2461 8.69531 10.9648 8.93359 10.9648 9.55078V10.4102C10.9648 11.5039 10.5977 11.8594 9.46875 11.8594H8.83984Z"
+    />
+    <path
+        d="M7.16016 11.8594H6.53125C5.40234 11.8594 5.03516 11.5039 5.03516 10.4102V9.55078C5.03516 8.93359 4.75391 8.69531 3.89453 8.72656V7.63672C4.75391 7.67188 5.03516 7.43359 5.03516 6.81641V5.95312C5.03516 4.85938 5.40234 4.50391 6.53125 4.50391H7.16016V5.36328H6.78516C6.23047 5.36328 6.12109 5.49219 6.12109 6.13672V7.22656C6.12109 7.75781 5.73828 8.10547 5.03125 8.14844V8.21875C5.73828 8.26172 6.12109 8.60547 6.12109 9.14062V10.2266C6.12109 10.8711 6.23047 11 6.78516 11H7.16016V11.8594Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Operator.svelte b/client/web-sveltekit/src/lib/icons/symbols/Operator.svelte
new file mode 100644
index 00000000000..401bf21127a
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Operator.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M10.9531 6.625C11.9414 6.625 12.5234 7.30469 12.5234 8.47656V9.21875C12.5234 10.3945 11.9414 11.0742 10.9531 11.0742C10.332 11.0742 9.90234 10.7852 9.75781 10.2695H9.67969V12.4336H8.56641V6.69141H9.66406V7.43359H9.74609C9.89844 6.91406 10.3242 6.625 10.9531 6.625ZM10.543 7.55469C9.98828 7.55469 9.65234 7.91406 9.65234 8.50781V9.22266C9.65234 9.81641 9.98828 10.1758 10.543 10.1758C11.0938 10.1758 11.4336 9.8125 11.4336 9.22266V8.50781C11.4336 7.91797 11.0938 7.55469 10.543 7.55469Z"
+    />
+    <path
+        d="M7.69531 8.61328C7.69531 10.1797 6.87891 11.1133 5.52734 11.1133C4.17578 11.1133 3.35938 10.1797 3.35938 8.61328V7.75C3.35938 6.18359 4.17578 5.25 5.52734 5.25C6.87891 5.25 7.69531 6.18359 7.69531 7.75V8.61328ZM5.52734 10.1289C6.20703 10.1289 6.56641 9.61719 6.56641 8.60156V7.76172C6.56641 6.74609 6.20703 6.23438 5.52734 6.23438C4.84766 6.23438 4.48828 6.74609 4.48828 7.76172V8.60156C4.48828 9.61719 4.84766 10.1289 5.52734 10.1289Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Package.svelte b/client/web-sveltekit/src/lib/icons/symbols/Package.svelte
new file mode 100644
index 00000000000..d8b39edbd39
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Package.svelte
@@ -0,0 +1,16 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M12.8242 12.6211C11.707 12.6211 10.9766 12.1484 10.9062 11.3828H11.9492C12.0234 11.6602 12.3672 11.8359 12.8398 11.8359C13.4609 11.8359 13.7891 11.5547 13.7891 11.0156V10.168H13.707C13.5742 10.6523 13.0742 10.9766 12.4336 10.9766C11.4414 10.9766 10.8477 10.2891 10.8477 9.125V8.47266C10.8477 7.29688 11.4531 6.62109 12.4844 6.62109C13.1094 6.62109 13.5898 6.9375 13.7305 7.42578H13.8086V6.69141H14.8594V10.9961C14.8594 12 14.082 12.6211 12.8242 12.6211ZM11.9414 9.09375C11.9414 9.67969 12.2969 10.0469 12.8555 10.0469C13.418 10.0469 13.7734 9.67969 13.7734 9.09375V8.47266C13.7734 7.88672 13.418 7.51953 12.8555 7.51953C12.2969 7.51953 11.9414 7.89062 11.9414 8.47266V9.09375Z"
+    />
+    <path
+        d="M7.44531 8.42188L8.94531 6.69141H10.168L8.57422 8.48438L10.2773 11H9.03906L7.78906 9.16016L7.37891 9.57031V11H6.3125V5.05078H7.37891V8.42188H7.44531Z"
+    />
+    <path
+        d="M1.16406 5.36328H3.22656C4.41016 5.36328 5.16016 6.10938 5.16016 7.29297C5.16016 8.46484 4.38672 9.21094 3.17188 9.21094H2.27344V11H1.16406V5.36328ZM2.27344 6.27344V8.29688H2.94531C3.67188 8.29688 4.03516 7.96484 4.03516 7.28516C4.03516 6.60938 3.67188 6.27344 2.94531 6.27344H2.27344Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Property.svelte b/client/web-sveltekit/src/lib/icons/symbols/Property.svelte
new file mode 100644
index 00000000000..6fbc501d911
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Property.svelte
@@ -0,0 +1,13 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M10.3906 9.08984V10.2148H11.6406V11H8.54688V10.2148H9.36719V7.48047H8.46875V6.69141H10.3984V7.79688H10.5664C10.7539 6.94141 11.1953 6.57812 12.0078 6.57812C12.25 6.57812 12.4688 6.60938 12.6211 6.66797V7.82812C12.4258 7.75391 12.1445 7.70312 11.9023 7.70312C10.8867 7.70312 10.3906 8.16406 10.3906 9.08984Z"
+    />
+    <path
+        d="M3.63672 5.36328H5.69922C6.88281 5.36328 7.63281 6.10938 7.63281 7.29297C7.63281 8.46484 6.85938 9.21094 5.64453 9.21094H4.74609V11H3.63672V5.36328ZM4.74609 6.27344V8.29688H5.41797C6.14453 8.29688 6.50781 7.96484 6.50781 7.28516C6.50781 6.60938 6.14453 6.27344 5.41797 6.27344H4.74609Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/String.svelte b/client/web-sveltekit/src/lib/icons/symbols/String.svelte
new file mode 100644
index 00000000000..a1ce783c43a
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/String.svelte
@@ -0,0 +1,16 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M12.2554 9.32861V10.313H13.3491V11H10.6421V10.313H11.3599V7.92041H10.5737V7.22998H12.2622V8.19727H12.4092C12.5732 7.44873 12.9595 7.13086 13.6704 7.13086C13.8823 7.13086 14.0737 7.1582 14.207 7.20947V8.22461C14.0361 8.15967 13.79 8.11523 13.5781 8.11523C12.6895 8.11523 12.2554 8.51855 12.2554 9.32861Z"
+    />
+    <path
+        d="M7.2207 6.15332H8.13672V7.26758H9.5415V8.01611H8.15381V9.81738C8.15381 10.1011 8.35547 10.2617 8.71436 10.2617C8.80322 10.2617 9.45605 10.2583 9.49707 10.2549V10.9932C9.45947 11 8.71436 11.0068 8.63916 11.0068C7.61377 11.0068 7.2207 10.6821 7.2207 9.80713V8.01611H6.23975V7.26758H7.2207V6.15332Z"
+    />
+    <path
+        d="M1.83398 9.61914H2.75C2.79443 10.0464 3.14307 10.2925 3.70361 10.2925C4.23682 10.2925 4.5752 10.0361 4.5752 9.63623C4.5752 9.30127 4.35645 9.12354 3.78564 8.99707L3.27295 8.87744C2.38086 8.67578 1.94336 8.2041 1.94336 7.47266C1.94336 6.55322 2.62354 5.96875 3.68994 5.96875C4.72217 5.96875 5.41602 6.54639 5.44678 7.42822H4.53076C4.49316 7.02148 4.18213 6.77197 3.7002 6.77197C3.21143 6.77197 2.90723 7.00098 2.90723 7.37012C2.90723 7.71875 3.12598 7.91016 3.65918 8.02637L4.16504 8.14258C5.11865 8.35449 5.53564 8.78174 5.53564 9.53711C5.53564 10.5112 4.83838 11.0991 3.68652 11.0991C2.56885 11.0991 1.86816 10.542 1.83398 9.61914Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Struct.svelte b/client/web-sveltekit/src/lib/icons/symbols/Struct.svelte
new file mode 100644
index 00000000000..4bc18942b83
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Struct.svelte
@@ -0,0 +1,16 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M12.0547 5.46094H13.1016V6.73438H14.707V7.58984H13.1211V9.64844C13.1211 9.97266 13.3516 10.1562 13.7617 10.1562C13.8633 10.1562 14.6094 10.1523 14.6562 10.1484V10.9922C14.6133 11 13.7617 11.0078 13.6758 11.0078C12.5039 11.0078 12.0547 10.6367 12.0547 9.63672V7.58984H10.9336V6.73438H12.0547V5.46094Z"
+    />
+    <path
+        d="M9.94922 8.19531H8.90234C8.83203 7.71094 8.54297 7.47656 8.07812 7.47656C7.50391 7.47656 7.1875 7.90625 7.1875 8.69531V8.98438C7.1875 9.77344 7.50391 10.2031 8.07812 10.2031C8.54688 10.2031 8.82812 9.98047 8.90234 9.51953H9.94922C9.85547 10.5469 9.19922 11.0938 8.08594 11.0938C6.81641 11.0938 6.11328 10.375 6.11328 9.06641V8.61328C6.11328 7.30469 6.81641 6.58594 8.08594 6.58594C9.19922 6.58594 9.84766 7.14062 9.94922 8.19531Z"
+    />
+    <path
+        d="M0.953125 9.42188H2C2.05078 9.91016 2.44922 10.1914 3.08984 10.1914C3.69922 10.1914 4.08594 9.89844 4.08594 9.44141C4.08594 9.05859 3.83594 8.85547 3.18359 8.71094L2.59766 8.57422C1.57812 8.34375 1.07812 7.80469 1.07812 6.96875C1.07812 5.91797 1.85547 5.25 3.07422 5.25C4.25391 5.25 5.04688 5.91016 5.08203 6.91797H4.03516C3.99219 6.45312 3.63672 6.16797 3.08594 6.16797C2.52734 6.16797 2.17969 6.42969 2.17969 6.85156C2.17969 7.25 2.42969 7.46875 3.03906 7.60156L3.61719 7.73438C4.70703 7.97656 5.18359 8.46484 5.18359 9.32812C5.18359 10.4414 4.38672 11.1133 3.07031 11.1133C1.79297 11.1133 0.992188 10.4766 0.953125 9.42188Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/TypeParameter.svelte b/client/web-sveltekit/src/lib/icons/symbols/TypeParameter.svelte
new file mode 100644
index 00000000000..c3bd13ed69d
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/TypeParameter.svelte
@@ -0,0 +1,11 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M8.58203 5.36328H10.6445C11.8281 5.36328 12.5781 6.10938 12.5781 7.29297C12.5781 8.46484 11.8047 9.21094 10.5898 9.21094H9.69141V11H8.58203V5.36328ZM9.69141 6.27344V8.29688H10.3633C11.0898 8.29688 11.4531 7.96484 11.4531 7.28516C11.4531 6.60938 11.0898 6.27344 10.3633 6.27344H9.69141Z"
+    />
+    <path d="M6.08203 11H4.97266V6.32031H3.35938V5.36328H7.69531V6.32031H6.08203V11Z" />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Unknown.svelte b/client/web-sveltekit/src/lib/icons/symbols/Unknown.svelte
new file mode 100644
index 00000000000..3cd17b62362
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Unknown.svelte
@@ -0,0 +1,10 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M7.5 8.75V12.75H3.5V8.75H7.5ZM8 3L10.75 7.5H5.25L8 3ZM10.75 8.5C12 8.5 13 9.5 13 10.75C13 12 12 13 10.75 13C9.5 13 8.5 12 8.5 10.75C8.5 9.5 9.5 8.5 10.75 8.5Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/icons/symbols/Variable.svelte b/client/web-sveltekit/src/lib/icons/symbols/Variable.svelte
new file mode 100644
index 00000000000..a9cdc0b6b51
--- /dev/null
+++ b/client/web-sveltekit/src/lib/icons/symbols/Variable.svelte
@@ -0,0 +1,16 @@
+<svg fill="var(--icon-color)" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 1.25H3C2.0335 1.25 1.25 2.0335 1.25 3V13C1.25 13.9665 2.0335 14.75 3 14.75H13C13.9665 14.75 14.75 13.9665 14.75 13V3C14.75 2.0335 13.9665 1.25 13 1.25ZM3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0H3Z"
+    />
+    <path
+        d="M12.8633 9.08984V10.2148H14.1133V11H11.0195V10.2148H11.8398V7.48047H10.9414V6.69141H12.8711V7.79688H13.0391C13.2266 6.94141 13.668 6.57812 14.4805 6.57812C14.7227 6.57812 14.9414 6.60938 15.0938 6.66797V7.82812C14.8984 7.75391 14.6172 7.70312 14.375 7.70312C13.3594 7.70312 12.8633 8.16406 12.8633 9.08984Z"
+    />
+    <path
+        d="M7.41797 11.0703C6.60547 11.0703 6.05859 10.5469 6.05859 9.76953C6.05859 8.99219 6.625 8.53516 7.6875 8.46094L8.69531 8.39844V8.05469C8.69531 7.67969 8.4375 7.46094 7.99609 7.46094C7.625 7.46094 7.34766 7.625 7.25781 7.89453H6.21875C6.29688 7.11328 7.00391 6.60938 8.02734 6.60938C9.13281 6.60938 9.75391 7.13672 9.75391 8.07812V11H8.73828V10.4258H8.64453C8.43359 10.832 7.98047 11.0703 7.41797 11.0703ZM7.78516 10.2148C8.31641 10.2148 8.69531 9.87891 8.69531 9.39844V9.08594L7.86719 9.13672C7.36719 9.16797 7.11328 9.35938 7.11328 9.69141C7.11328 10.0117 7.37109 10.2148 7.78516 10.2148Z"
+    />
+    <path
+        d="M3.11719 9.89453L4.29297 5.36328H5.40234L3.71094 11H2.39844L0.707031 5.36328H1.90625L3.06641 9.89453H3.11719Z"
+    />
+</svg>
diff --git a/client/web-sveltekit/src/lib/search/SymbolKind.svelte b/client/web-sveltekit/src/lib/search/SymbolKind.svelte
deleted file mode 100644
index 7345616573d..00000000000
--- a/client/web-sveltekit/src/lib/search/SymbolKind.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<script lang="ts" context="module">
-    import { SymbolKind } from '$lib/graphql-types'
-
-    const moduleFamily: Set<string> = new Set([
-        SymbolKind.FILE,
-        SymbolKind.MODULE,
-        SymbolKind.NAMESPACE,
-        SymbolKind.PACKAGE,
-    ])
-
-    const classFamily: Set<string> = new Set([
-        SymbolKind.CLASS,
-        SymbolKind.ENUM,
-        SymbolKind.INTERFACE,
-        SymbolKind.STRUCT,
-    ])
-
-    const functionFamily: Set<string> = new Set([SymbolKind.CONSTRUCTOR, SymbolKind.FUNCTION, SymbolKind.METHOD])
-
-    const typeFamily: Set<string> = new Set([
-        SymbolKind.STRING,
-        SymbolKind.BOOLEAN,
-        SymbolKind.NUMBER,
-        SymbolKind.ARRAY,
-        SymbolKind.OBJECT,
-        SymbolKind.NULL,
-    ])
-
-    const variableFamily: Set<string> = new Set([
-        SymbolKind.VARIABLE,
-        SymbolKind.CONSTANT,
-        SymbolKind.PROPERTY,
-        SymbolKind.EVENT,
-        SymbolKind.FIELD,
-        SymbolKind.KEY,
-        SymbolKind.ENUMMEMBER,
-        SymbolKind.TYPEPARAMETER,
-    ])
-</script>
-
-<script lang="ts">
-    import Icon from '$lib/Icon.svelte'
-    import Tooltip from '$lib/Tooltip.svelte'
-    import { settings } from '$lib/stores'
-    import { getSymbolIconPath, humanReadableSymbolKind } from './symbolUtils'
-
-    export let symbolKind: SymbolKind | string
-
-    // Determines whether to show symbol name abbreviations (tags) or icons
-    $: useTag = $settings?.experimentalFeatures?.symbolKindTags ?? false
-</script>
-
-<Tooltip tooltip={humanReadableSymbolKind(symbolKind)}>
-    {#if useTag}
-        <span
-            aria-label="Symbol kind {symbolKind.toLowerCase()}"
-            class="tag"
-            class:module={moduleFamily.has(symbolKind)}
-            class:class={classFamily.has(symbolKind)}
-            class:function={functionFamily.has(symbolKind)}
-            class:type={typeFamily.has(symbolKind)}
-            class:variable={variableFamily.has(symbolKind)}>{symbolKind[0].toUpperCase()}</span
-        >
-    {:else}
-        <span class="symbol-icon kind-{symbolKind.toLowerCase()}">
-            <Icon svgPath={getSymbolIconPath(symbolKind)} inline />
-        </span>
-    {/if}
-</Tooltip>
-
-<style lang="scss">
-    // Copied from SymbolIcon.module.scss
-    .symbol-icon {
-        $oc-level: 5;
-        $symbol-kinds: (
-            'array': 'red',
-            'boolean': 'red',
-            'class': 'orange',
-            'constant': 'indigo',
-            'constructor': 'violet',
-            'enum': 'blue',
-            'enummember': 'blue',
-            'event': 'red',
-            'field': 'blue',
-            'file': 'gray',
-            'function': 'violet',
-            'interface': 'green',
-            'key': 'yellow',
-            'method': 'violet',
-            'module': 'grape',
-            'namespace': 'grape',
-            'null': 'red',
-            'number': 'violet',
-            'object': 'orange',
-            'operator': 'gray',
-            'package': 'yellow',
-            'property': 'gray',
-            'string': 'orange',
-            'struct': 'orange',
-            'typeparameter': 'blue',
-            'variable': 'blue',
-        );
-
-        // Default for unknown symbols
-        color: var(--oc-gray-#{$oc-level});
-
-        @each $kind, $oc-color in $symbol-kinds {
-            &:global(.kind-#{$kind}) {
-                color: var(--oc-#{$oc-color}-#{$oc-level});
-            }
-        }
-    }
-
-    .tag {
-        display: inline-block;
-        font-size: 0.75rem;
-        padding: 0.0625rem 0.25rem;
-        border-radius: var(--border-radius);
-        font-weight: 500;
-        color: var(--gray-01);
-        font-family: var(--code-font-family);
-        // Default background color for "unknown" symbol kinds
-        background-color: #343a4d;
-
-        &.module {
-            background-color: #237332;
-        }
-
-        &.class {
-            background-color: #f76707;
-        }
-
-        &.function {
-            background-color: #0b70db;
-        }
-        &.type {
-            background-color: #a305e1;
-        }
-        &.variable {
-            background-color: #005766;
-        }
-    }
-</style>
diff --git a/client/web-sveltekit/src/lib/search/SymbolKindIcon.stories.svelte b/client/web-sveltekit/src/lib/search/SymbolKindIcon.stories.svelte
new file mode 100644
index 00000000000..91e7d6b239f
--- /dev/null
+++ b/client/web-sveltekit/src/lib/search/SymbolKindIcon.stories.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+    import { Story } from '@storybook/addon-svelte-csf'
+
+    import { SymbolKind } from '$lib/graphql-types'
+
+    import SymbolKindIcon from './SymbolKindIcon.svelte'
+
+    export const meta = {
+        component: SymbolKindIcon,
+    }
+</script>
+
+<script lang="ts">
+    let size = '16'
+</script>
+
+<Story name="Default">
+    <p>Adjust size:</p>
+    <input type="range" min="0" max="100" bind:value={size} />
+
+    <div>
+        {#each Object.values(SymbolKind) as symbolKind}
+            <SymbolKindIcon {symbolKind} --icon-size="{size}px" />
+        {/each}
+    </div>
+</Story>
+
+<style lang="scss">
+    div {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 0.5rem;
+        max-width: 21rem;
+    }
+</style>
diff --git a/client/web-sveltekit/src/lib/search/SymbolKindIcon.svelte b/client/web-sveltekit/src/lib/search/SymbolKindIcon.svelte
new file mode 100644
index 00000000000..567fb8063bd
--- /dev/null
+++ b/client/web-sveltekit/src/lib/search/SymbolKindIcon.svelte
@@ -0,0 +1,154 @@
+<script lang="ts" context="module">
+    import { SvelteComponent } from 'svelte'
+
+    import { SymbolKind } from '$lib/graphql-types'
+    import Array from '$lib/icons/symbols/Array.svelte'
+    import Boolean from '$lib/icons/symbols/Boolean.svelte'
+    import Class from '$lib/icons/symbols/Class.svelte'
+    import Constant from '$lib/icons/symbols/Constant.svelte'
+    import Constructor from '$lib/icons/symbols/Constructor.svelte'
+    import Enum from '$lib/icons/symbols/Enum.svelte'
+    import EnumMember from '$lib/icons/symbols/EnumMember.svelte'
+    import Event from '$lib/icons/symbols/Event.svelte'
+    import Field from '$lib/icons/symbols/Field.svelte'
+    import File from '$lib/icons/symbols/File.svelte'
+    import Function from '$lib/icons/symbols/Function.svelte'
+    import Interface from '$lib/icons/symbols/Interface.svelte'
+    import Key from '$lib/icons/symbols/Key.svelte'
+    import Method from '$lib/icons/symbols/Method.svelte'
+    import Module from '$lib/icons/symbols/Module.svelte'
+    import Namespace from '$lib/icons/symbols/Namespace.svelte'
+    import Null from '$lib/icons/symbols/Null.svelte'
+    import Number from '$lib/icons/symbols/Number.svelte'
+    import Object from '$lib/icons/symbols/Object.svelte'
+    import Operator from '$lib/icons/symbols/Operator.svelte'
+    import Package from '$lib/icons/symbols/Package.svelte'
+    import Property from '$lib/icons/symbols/Property.svelte'
+    import String from '$lib/icons/symbols/String.svelte'
+    import Struct from '$lib/icons/symbols/Struct.svelte'
+    import TypeParameter from '$lib/icons/symbols/TypeParameter.svelte'
+    import Unknown from '$lib/icons/symbols/Unknown.svelte'
+    import Variable from '$lib/icons/symbols/Variable.svelte'
+    import Tooltip from '$lib/Tooltip.svelte'
+
+    const icons: Map<string, typeof SvelteComponent<{}>> = new Map([
+        [SymbolKind.ARRAY, Array],
+        [SymbolKind.BOOLEAN, Boolean],
+        [SymbolKind.CLASS, Class],
+        [SymbolKind.CONSTANT, Constant],
+        [SymbolKind.CONSTRUCTOR, Constructor],
+        [SymbolKind.ENUM, Enum],
+        [SymbolKind.ENUMMEMBER, EnumMember],
+        [SymbolKind.EVENT, Event],
+        [SymbolKind.FIELD, Field],
+        [SymbolKind.FILE, File],
+        [SymbolKind.FUNCTION, Function],
+        [SymbolKind.INTERFACE, Interface],
+        [SymbolKind.KEY, Key],
+        [SymbolKind.METHOD, Method],
+        [SymbolKind.MODULE, Module],
+        [SymbolKind.NAMESPACE, Namespace],
+        [SymbolKind.NULL, Null],
+        [SymbolKind.NUMBER, Number],
+        [SymbolKind.OBJECT, Object],
+        [SymbolKind.OPERATOR, Operator],
+        [SymbolKind.PACKAGE, Package],
+        [SymbolKind.PROPERTY, Property],
+        [SymbolKind.STRING, String],
+        [SymbolKind.STRUCT, Struct],
+        [SymbolKind.TYPEPARAMETER, TypeParameter],
+        [SymbolKind.UNKNOWN, Unknown],
+        [SymbolKind.VARIABLE, Variable],
+    ])
+
+    const moduleFamily: Set<string> = new Set([
+        SymbolKind.FILE,
+        SymbolKind.MODULE,
+        SymbolKind.NAMESPACE,
+        SymbolKind.PACKAGE,
+    ])
+
+    const classFamily: Set<string> = new Set([
+        SymbolKind.CLASS,
+        SymbolKind.ENUM,
+        SymbolKind.INTERFACE,
+        SymbolKind.STRUCT,
+    ])
+
+    const functionFamily: Set<string> = new Set([SymbolKind.CONSTRUCTOR, SymbolKind.FUNCTION, SymbolKind.METHOD])
+
+    const variableFamily: Set<string> = new Set([
+        SymbolKind.VARIABLE,
+        SymbolKind.CONSTANT,
+        SymbolKind.PROPERTY,
+        SymbolKind.EVENT,
+        SymbolKind.FIELD,
+        SymbolKind.KEY,
+        SymbolKind.ENUMMEMBER,
+        SymbolKind.TYPEPARAMETER,
+    ])
+</script>
+
+<script lang="ts">
+    import { humanReadableSymbolKind } from './symbolUtils'
+
+    export let symbolKind: SymbolKind | string
+</script>
+
+<Tooltip tooltip={humanReadableSymbolKind(symbolKind)}>
+    <div
+        aria-label="Symbol kind {symbolKind.toLowerCase()}"
+        class:module={moduleFamily.has(symbolKind)}
+        class:class={classFamily.has(symbolKind)}
+        class:function={functionFamily.has(symbolKind)}
+        class:variable={variableFamily.has(symbolKind)}
+    >
+        <svelte:component this={icons.get(symbolKind) ?? Unknown} />
+    </div>
+</Tooltip>
+
+<style lang="scss">
+    div {
+        display: contents;
+
+        // TODO(@taiyab): incorporate these colors into the semantic colors
+
+        --icon-color: var(--text-muted);
+
+        :global(.theme-light) & {
+            &.module {
+                --icon-color: var(--oc-teal-8);
+            }
+            &.class {
+                --icon-color: var(--oc-orange-8);
+            }
+            &.function {
+                --icon-color: var(--oc-violet-8);
+            }
+            &.variable {
+                --icon-color: var(--oc-blue-8);
+            }
+        }
+
+        :global(.theme-dark) & {
+            &.module {
+                --icon-color: var(--oc-teal-6);
+            }
+            &.class {
+                --icon-color: var(--oc-orange-6);
+            }
+            &.function {
+                --icon-color: var(--oc-violet-6);
+            }
+            &.variable {
+                --icon-color: var(--oc-blue-6);
+            }
+        }
+
+        :global(svg) {
+            height: var(--icon-size, 16px);
+            width: var(--icon-size, 16px);
+            flex: none;
+        }
+    }
+</style>
diff --git a/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte b/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
index 6845e5ea7f7..e0ffaa5a5e9 100644
--- a/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
+++ b/client/web-sveltekit/src/lib/search/dynamicFilters/Sidebar.svelte
@@ -36,7 +36,7 @@
     import ArrowBendIcon from '$lib/icons/ArrowBend.svelte'
     import LanguageIcon from '$lib/LanguageIcon.svelte'
     import CodeHostIcon from '$lib/search/CodeHostIcon.svelte'
-    import SymbolKind from '$lib/search/SymbolKind.svelte'
+    import SymbolKindIcon from '$lib/search/SymbolKindIcon.svelte'
     import { displayRepoName, scanSearchQuery, type Filter } from '$lib/shared'
     import { SVELTE_LOGGER, SVELTE_TELEMETRY_EVENTS } from '$lib/telemetry'
     import Tooltip from '$lib/Tooltip.svelte'
@@ -146,8 +146,10 @@
             onFilterSelect={handleFilterSelect}
         >
             <svelte:fragment slot="label" let:label>
-                <SymbolKind symbolKind={label.toUpperCase()} />
-                {label}
+                <div class="symbol-label">
+                    <SymbolKindIcon symbolKind={label.toUpperCase()} />
+                    {label}
+                </div>
             </svelte:fragment>
         </Section>
         <Section
@@ -239,6 +241,12 @@
         }
     }
 
+    .symbol-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
     pre {
         // Overwrites global default
         margin-bottom: 0;
diff --git a/client/web-sveltekit/src/routes/search/SymbolSearchResult.svelte b/client/web-sveltekit/src/routes/search/SymbolSearchResult.svelte
index 131ad122672..d1b57962a05 100644
--- a/client/web-sveltekit/src/routes/search/SymbolSearchResult.svelte
+++ b/client/web-sveltekit/src/routes/search/SymbolSearchResult.svelte
@@ -1,15 +1,15 @@
 <svelte:options immutable />
 
 <script lang="ts">
-    import { observeIntersection } from '$lib/intersection-observer'
-    import { fetchFileRangeMatches } from '$lib/search/api/highlighting'
     import CodeExcerpt from '$lib/CodeExcerpt.svelte'
-    import SymbolKind from '$lib/search/SymbolKind.svelte'
+    import { observeIntersection } from '$lib/intersection-observer'
+    import RepoStars from '$lib/repo/RepoStars.svelte'
+    import { fetchFileRangeMatches } from '$lib/search/api/highlighting'
+    import SymbolKindIcon from '$lib/search/SymbolKindIcon.svelte'
     import type { SymbolMatch } from '$lib/shared'
 
     import FileSearchResultHeader from './FileSearchResultHeader.svelte'
     import PreviewButton from './PreviewButton.svelte'
-    import RepoStars from '$lib/repo/RepoStars.svelte'
     import SearchResult from './SearchResult.svelte'
 
     export let result: SymbolMatch
@@ -41,9 +41,7 @@
             {#each result.symbols as symbol, index}
                 <a href={symbol.url}>
                     <div class="result">
-                        <div class="symbol-kind">
-                            <SymbolKind symbolKind={symbol.kind} />
-                        </div>
+                        <SymbolKindIcon symbolKind={symbol.kind} />
                         {#await highlightedHTMLRows then result}
                             <CodeExcerpt
                                 startLine={symbol.line}
@@ -65,6 +63,7 @@
         align-items: center;
         width: 100%;
         padding: 0.5rem;
+        gap: 0.5rem;
         border-bottom: 1px solid var(--border-color);
 
         background-color: var(--code-bg);
@@ -73,10 +72,6 @@
         }
     }
 
-    .symbol-kind {
-        margin-right: 0.5rem;
-    }
-
     a:hover {
         text-decoration: none;
     }