use svg rather than emoji

packages/next/components/Layout.tsx

@@ -1,4 +1,5 @@
 import { THEME } from '~/assets/global'
+import MagnifyingGlass from '~/assets/svg/magnifying-glass-svgrepo-com.svg'
 import styles from '~/styles/Layout.module.css'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -21,22 +22,19 @@ const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
               </Link>
             </li>
 
-            {(THEME.nav || []).map((n) =>
-              n.to ? (
-                <Link href={n.to} key={n.name}>
-                  <a>{n.name}</a>
-                </Link>
-              ) : (
-                <a
-                  href={n.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  key={n.name}
-                >
-                  {n.name}
-                </a>
-              )
-            )}
+            {(THEME.nav || []).map((n) => (
+              <li key={n.name}>
+                {n.to ? (
+                  <Link href={n.to}>
+                    <a>{n.name}</a>
+                  </Link>
+                ) : (
+                  <a href={n.href} target="_blank" rel="noopener noreferrer">
+                    {n.name}
+                  </a>
+                )}
+              </li>
+            ))}
           </ul>
 
           <form
@@ -55,7 +53,9 @@ const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
               value={q}
               onInput={(ev) => setQ((ev.target as HTMLInputElement).value)}
             />
-            <div className={styles.icon}>🔎</div>
+            <div className={styles.icon}>
+              <MagnifyingGlass />
+            </div>
           </form>
         </nav>
       </header>