diff --git a/public/assets/ui/.gitkeep b/public/assets/ui/.gitkeep
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/public/assets/ui/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/src/app/components/AppSearchModal.module.css b/src/app/components/AppSearchModal.module.css
index 86ef621..1257af1 100644
--- a/src/app/components/AppSearchModal.module.css
+++ b/src/app/components/AppSearchModal.module.css
@@ -47,9 +47,9 @@
   border: 1px solid rgba(168, 243, 237, 0.24);
 }
 
-.searchIcon svg {
-  width: 20px;
-  height: 20px;
+.searchGlyph {
+  width: 24px;
+  height: 24px;
 }
 
 .headerText {
diff --git a/src/app/components/AppSearchModal.tsx b/src/app/components/AppSearchModal.tsx
index 5994b39..b37d695 100644
--- a/src/app/components/AppSearchModal.tsx
+++ b/src/app/components/AppSearchModal.tsx
@@ -1,5 +1,6 @@
 import { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
+import { SearchIcon } from '@/shared/components/icons/SearchIcon'
 import styles from './AppSearchModal.module.css'
 
 type SearchTarget = {
@@ -148,12 +149,7 @@ export function AppSearchModal({ isOpen, onClose, onSelect }: AppSearchModalProp
         >
           <div className={styles.header}>
             <div className={styles.searchIcon} aria-hidden="true">
-              <svg viewBox="0 0 24 24" focusable="false">
-                <path
-                  d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"
-                  fill="currentColor"
-                />
-              </svg>
+              <SearchIcon className={styles.searchGlyph} />
             </div>
             <div className={styles.headerText}>
               <h2 id="app-search-title" className={styles.title}>
diff --git a/src/app/components/AppTopNav.module.css b/src/app/components/AppTopNav.module.css
index 5858eea..d5d497e 100644
--- a/src/app/components/AppTopNav.module.css
+++ b/src/app/components/AppTopNav.module.css
@@ -30,10 +30,10 @@
   outline-offset: 3px;
 }
 
-.searchButton svg {
+.searchGlyph {
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
 }
 
 @media (max-width: 1200px) {
diff --git a/src/app/components/AppTopNav.tsx b/src/app/components/AppTopNav.tsx
index b93e0ae..2c926d1 100644
--- a/src/app/components/AppTopNav.tsx
+++ b/src/app/components/AppTopNav.tsx
@@ -1,5 +1,6 @@
 import type { MouseEvent } from 'react'
 import { TopNav } from '@/shared/components/TopNav'
+import { SearchIcon } from '@/shared/components/icons/SearchIcon'
 import { appNavItems } from '@/shared/data/content'
 import { useAuth } from '@/shared/context/AuthContext'
 import { API_VERSION } from '@/shared/services/apiClient'
@@ -35,12 +36,7 @@ export function AppTopNav({ onOpenSearch }: AppTopNavProps) {
           aria-label="Open search"
           title="Search"
         >
-          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-            <path
-              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"
-              fill="currentColor"
-            />
-          </svg>
+          <SearchIcon className={styles.searchGlyph} />
         </button>
       }
     />
diff --git a/src/shared/components/icons/SearchIcon.tsx b/src/shared/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..30f5f18
--- /dev/null
+++ b/src/shared/components/icons/SearchIcon.tsx
@@ -0,0 +1,34 @@
+type SearchIconProps = {
+  className?: string
+  title?: string
+}
+
+export function SearchIcon({ className, title }: SearchIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 500 500"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      aria-hidden={title ? undefined : 'true'}
+      role={title ? 'img' : undefined}
+    >
+      {title ? <title>{title}</title> : null}
+      <g transform="translate(0 -552.36216)">
+        <g transform="translate(-4.3609793 -7.6704785)" fill="currentColor">
+          <path d="M232.83952 614.96702A154.04816 154.04794 0 0 0 78.79153 769.01382 154.04816 154.04794 0 0 0 232.83952 923.06184 154.04816 154.04794 0 0 0 386.88751 769.01382 154.04816 154.04794 0 0 0 232.83952 614.96702Zm0 26.77613A129.95832 127.2707 0 0 1 362.79832 769.01382 129.95832 127.2707 0 0 1 232.83952 896.28449 129.95832 127.2707 0 0 1 102.88194 769.01382 129.95832 127.2707 0 0 1 232.83952 641.74315Z" />
+          <rect
+            x="794.8775"
+            y="319.55432"
+            width="173.02675"
+            height="36.16684"
+            rx="33.249443"
+            ry="18.08342"
+            transform="matrix(0.65316768 0.7572133 -0.60689051 0.79478545 0 0)"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}