feat: replace Phosphor brand icons with real SVG logos

Uses @icons-pack/react-simple-icons for available brands (Google,
Facebook, Instagram, GitHub, YouTube, Reddit, etc.) and inline SVGs
for brands missing from the package (X, LinkedIn, OpenAI, Bing).
All icons now show actual brand logos with correct colors.

lib/utils/icons.tsx

@@ -5,23 +5,42 @@ import {
   DeviceMobile,
   DeviceTablet,
   Desktop,
-  GoogleLogo,
-  FacebookLogo,
-  XLogo,
-  LinkedinLogo,
-  InstagramLogo,
-  GithubLogo,
-  YoutubeLogo,
-  RedditLogo,
-  Robot,
   Link,
-  WhatsappLogo,
-  TelegramLogo,
-  SnapchatLogo,
-  PinterestLogo,
-  ThreadsLogo,
-  MagnifyingGlass,
 } from '@phosphor-icons/react'
+import {
+  SiGoogle,
+  SiFacebook,
+  SiInstagram,
+  SiGithub,
+  SiYoutube,
+  SiReddit,
+  SiWhatsapp,
+  SiTelegram,
+  SiSnapchat,
+  SiPinterest,
+  SiThreads,
+  SiDuckduckgo,
+  SiBrave,
+  SiPerplexity,
+  SiAnthropic,
+  SiGooglegemini,
+  SiGithubcopilot,
+  SiDiscord,
+} from '@icons-pack/react-simple-icons'
+
+// Inline SVG icons for brands not in @icons-pack/react-simple-icons
+function XIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+}
+function LinkedInIcon({ size = 16, color = '#0A66C2' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+}
+function OpenAIIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>
+}
+function BingIcon({ size = 16, color = '#258FFA' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.71 0v18.39l4.44 2.46 8.14-4.69v-4.71l-8.14-2.84V4.09L5.71 0zm4.44 11.19l4.39 1.53v2.78l-4.39 2.53v-6.84z"/></svg>
+}
 
 /**
  * Google's public favicon service base URL.
@@ -98,37 +117,39 @@ export function getDeviceIcon(deviceName: string) {
   return <Question className="text-neutral-400" />
 }
 
+const SI = { size: 16 } as const
+
 export function getReferrerIcon(referrerName: string) {
   if (!referrerName) return <Globe className="text-neutral-400" />
   const lower = referrerName.toLowerCase()
-  if (lower.includes('google')) return <GoogleLogo className="text-blue-500" />
+  // Social / platforms
-  if (lower.includes('facebook')) return <FacebookLogo className="text-blue-600" />
+  if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
-  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('facebook')) return <SiFacebook size={SI.size} color="#0866FF" />
-  if (lower.includes('linkedin')) return <LinkedinLogo className="text-blue-700" />
+  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XIcon />
-  if (lower.includes('instagram')) return <InstagramLogo className="text-pink-600" />
+  if (lower.includes('linkedin')) return <LinkedInIcon />
-  if (lower.includes('github')) return <GithubLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('instagram')) return <SiInstagram size={SI.size} color="#E4405F" />
-  if (lower.includes('youtube')) return <YoutubeLogo className="text-red-600" />
+  if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
-  if (lower.includes('reddit')) return <RedditLogo className="text-orange-600" />
+  if (lower.includes('youtube')) return <SiYoutube size={SI.size} color="#FF0000" />
-  if (lower.includes('whatsapp')) return <WhatsappLogo className="text-green-500" />
+  if (lower.includes('reddit')) return <SiReddit size={SI.size} color="#FF4500" />
-  if (lower.includes('telegram')) return <TelegramLogo className="text-blue-500" />
+  if (lower.includes('whatsapp')) return <SiWhatsapp size={SI.size} color="#25D366" />
-  if (lower.includes('snapchat')) return <SnapchatLogo className="text-yellow-400" />
+  if (lower.includes('telegram')) return <SiTelegram size={SI.size} color="#26A5E4" />
-  if (lower.includes('pinterest')) return <PinterestLogo className="text-red-600" />
+  if (lower.includes('snapchat')) return <SiSnapchat size={SI.size} color="#FFFC00" />
-  if (lower.includes('threads')) return <ThreadsLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('pinterest')) return <SiPinterest size={SI.size} color="#BD081C" />
+  if (lower.includes('threads')) return <SiThreads size={SI.size} color="#fff" />
+  if (lower.includes('discord')) return <SiDiscord size={SI.size} color="#5865F2" />
   // Search engines
-  if (lower.includes('bing')) return <MagnifyingGlass className="text-blue-500" />
+  if (lower.includes('bing')) return <BingIcon />
-  if (lower.includes('duckduckgo')) return <MagnifyingGlass className="text-orange-500" />
+  if (lower.includes('duckduckgo')) return <SiDuckduckgo size={SI.size} color="#DE5833" />
-  if (lower.includes('brave')) return <MagnifyingGlass className="text-orange-400" />
+  if (lower.includes('brave')) return <SiBrave size={SI.size} color="#FB542B" />
-  // AI assistants and search tools
+  // AI assistants
-  if (lower.includes('chatgpt') || lower.includes('openai')) return <Robot className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('chatgpt') || lower.includes('openai')) return <OpenAIIcon />
-  if (lower.includes('perplexity')) return <Robot className="text-teal-600" />
+  if (lower.includes('perplexity')) return <SiPerplexity size={SI.size} color="#1FB8CD" />
-  if (lower.includes('claude') || lower.includes('anthropic')) return <Robot className="text-orange-500" />
+  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic size={SI.size} color="#D97757" />
-  if (lower.includes('gemini')) return <Robot className="text-blue-500" />
+  if (lower.includes('gemini')) return <SiGooglegemini size={SI.size} color="#8E75B2" />
-  if (lower.includes('copilot')) return <Robot className="text-blue-500" />
+  if (lower.includes('copilot')) return <SiGithubcopilot size={SI.size} color="#fff" />
-  if (lower.includes('deepseek')) return <Robot className="text-blue-600" />
+  if (lower.includes('deepseek')) return <OpenAIIcon color="#4D6BFE" />
-  if (lower.includes('grok') || lower.includes('x.ai')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('grok') || lower.includes('x.ai')) return <XIcon />
-  if (lower.includes('phind')) return <Robot className="text-purple-600" />
+  // Shared Link
-  if (lower.includes('you.com')) return <Robot className="text-indigo-600" />
-  // Shared Link (unattributed deep-page traffic)
   if (lower === 'shared link') return <Link className="text-neutral-500" />
 
   return <Globe className="text-neutral-400" />

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.3.1",
         "@ducanh2912/next-pwa": "^10.2.9",
+        "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -2587,6 +2588,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@icons-pack/react-simple-icons": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-13.13.0.tgz",
+      "integrity": "sha512-B5HhQMIpcSH4z8IZ8HFhD59CboHceKYMpPC9kAwGyKntvPdyJJv26DLu4Z1wAjcCLyrJhf11tMhiQGom9Rxb9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=24",
+        "pnpm": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.13 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.3.1",
     "@ducanh2912/next-pwa": "^10.2.9",
+    "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-navigation-menu": "^1.2.14",