style: use proper zen icon

src/components/icons/zen-browser.tsx

@@ -0,0 +1,24 @@
+export const ZenBrowser = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    role="graphics-symbol img"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      d="M12 8.15c-2.12 0-3.85 1.72-3.85 3.85s1.72 3.85 3.85 3.85 3.85-1.72 3.85-3.85S14.13 8.15 12 8.15m0 6.92c-1.7 0-3.08-1.38-3.08-3.08S10.3 8.91 12 8.91s3.08 1.38 3.08 3.08-1.38 3.08-3.08 3.08"
+      className="b"
+    />
+    <path
+      d="M12 5.33c-3.68 0-6.67 2.98-6.67 6.67s2.98 6.67 6.67 6.67 6.67-2.98 6.67-6.67S15.69 5.33 12 5.33m0 12.05c-2.97 0-5.38-2.41-5.38-5.38S9.03 6.62 12 6.62s5.38 2.41 5.38 5.38-2.41 5.38-5.38 5.38"
+      className="b"
+    />
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18.2c-4.53 0-8.21-3.67-8.21-8.2S7.47 3.79 12 3.79s8.21 3.67 8.21 8.21-3.67 8.2-8.21 8.2"
+      className="b"
+    />
+  </svg>
+);

src/lib/browser-utils.ts

@@ -3,6 +3,7 @@
  * Centralized helpers for browser name mapping, icons, etc.
  */
 
+import { ZenBrowser } from "@/components/icons/zen-browser";
 import { FaChrome, FaFirefox } from "react-icons/fa";
 import { SiBrave, SiMullvad, SiTorbrowser } from "react-icons/si";
 
@@ -38,7 +39,7 @@ export function getBrowserIcon(browserType: string) {
     case "firefox-developer":
       return FaFirefox;
     case "zen":
-      return FaFirefox;
+      return ZenBrowser;
     case "tor-browser":
       return SiTorbrowser;
     default: