From 7f9ad0e977e303b351cbbdfd4f58195d7b6a32b6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 9 Mar 2026 00:23:31 +0100
Subject: [PATCH] refactor: switch icons from react-icons to Phosphor

Replace react-icons and @radix-ui/react-icons with @phosphor-icons/react
for a consistent icon style across all dashboard panels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                       |   1 +
 components/OfflineBanner.tsx       |   4 +-
 components/dashboard/Campaigns.tsx |   4 +-
 components/dashboard/Locations.tsx |   9 +--
 components/dashboard/TechSpecs.tsx |   6 +-
 components/tools/UtmBuilder.tsx    |   4 +-
 lib/utils/icons.tsx                | 126 +++++++++++++----------------
 next.config.ts                     |   2 +-
 package-lock.json                  |  25 +++---
 package.json                       |   3 +-
 10 files changed, 84 insertions(+), 100 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1242fbd..f303c7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Improved
 
 - **Cleaner site navigation.** Dashboard, Uptime, Funnels, and Settings now use an underline tab bar instead of floating buttons. The active section is highlighted with an orange underline, making it easy to see where you are and switch between views.
+- **Consistent icon style.** All dashboard icons now use a single, unified icon set for a cleaner look across Technology, Locations, Campaigns, and Referrers panels.
 
 ### Fixed
 
diff --git a/components/OfflineBanner.tsx b/components/OfflineBanner.tsx
index bca7c20..784b8d9 100644
--- a/components/OfflineBanner.tsx
+++ b/components/OfflineBanner.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { FiWifiOff } from 'react-icons/fi';
+import { WifiSlash } from '@phosphor-icons/react';
 
 export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
   if (isOnline) return null;
 
   return (
     <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md transition-shadow duration-300">
-      <FiWifiOff className="w-4 h-4 shrink-0" />
+      <WifiSlash className="w-4 h-4 shrink-0" />
       <span>You are currently offline. Changes may not be saved.</span>
     </div>
   );
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index defc79e..9f0ffe0 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -9,7 +9,7 @@ import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { getReferrerFavicon, getReferrerIcon, getReferrerDisplayName } from '@/lib/utils/icons'
-import { FaBullhorn } from 'react-icons/fa'
+import { Megaphone } from '@phosphor-icons/react'
 import UtmBuilder from '@/components/tools/UtmBuilder'
 import { type DimensionFilter } from '@/lib/filters'
 
@@ -190,7 +190,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
               <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <FaBullhorn className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+                <Megaphone className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
               </div>
               <h4 className="font-semibold text-neutral-900 dark:text-white">
                 Track your marketing campaigns
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 5cc15d4..74f819e 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -9,8 +9,7 @@ import iso3166 from 'iso-3166-2'
 import WorldMap from './WorldMap'
 import { Modal, GlobeIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
-import { SiTorproject } from 'react-icons/si'
-import { FaUserSecret, FaSatellite } from 'react-icons/fa'
+import { ShieldCheck, Detective, Broadcast } from '@phosphor-icons/react'
 import { getCountries, getCities, getRegions } from '@/lib/api/stats'
 import { type DimensionFilter } from '@/lib/filters'
 
@@ -69,11 +68,11 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     
     switch (countryCode) {
       case 'T1':
-        return <SiTorproject className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+        return <ShieldCheck className="w-5 h-5 text-purple-600 dark:text-purple-400" />
       case 'A1':
-        return <FaUserSecret className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
+        return <Detective className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
       case 'A2':
-        return <FaSatellite className="w-5 h-5 text-blue-500 dark:text-blue-400" />
+        return <Broadcast className="w-5 h-5 text-blue-500 dark:text-blue-400" />
       case 'O1':
       case 'EU':
       case 'AP':
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index d31c27e..d9251ec 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -5,7 +5,7 @@ import { logger } from '@/lib/utils/logger'
 import { formatNumber } from '@ciphera-net/ui'
 import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
 import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
-import { MdMonitor } from 'react-icons/md'
+import { Monitor } from '@phosphor-icons/react'
 import { Modal, GridIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
@@ -64,7 +64,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             data = res.map(d => ({ name: d.device, pageviews: d.pageviews, icon: getDeviceIcon(d.device) }))
           } else if (activeTab === 'screens') {
             const res = await getScreenResolutions(siteId, dateRange.start, dateRange.end, 100)
-            data = res.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <MdMonitor className="text-neutral-500" /> }))
+            data = res.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <Monitor className="text-neutral-500" /> }))
           }
           setFullData(filterUnknown(data))
         } catch (e) {
@@ -88,7 +88,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
       case 'devices':
         return devices.map(d => ({ name: d.device, pageviews: d.pageviews, icon: getDeviceIcon(d.device) }))
       case 'screens':
-        return screenResolutions.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <MdMonitor className="text-neutral-500" /> }))
+        return screenResolutions.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews, icon: <Monitor className="text-neutral-500" /> }))
       default:
         return []
     }
diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index 7f5ad34..8bced1b 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { logger } from '@/lib/utils/logger'
-import { CopyIcon, CheckIcon } from '@radix-ui/react-icons'
+import { Copy, Check } from '@phosphor-icons/react'
 import { listSites, Site } from '@/lib/api/sites'
 import { Select, Input, Button } from '@ciphera-net/ui'
 
@@ -205,7 +205,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
             className="ml-4 shrink-0 h-9 w-9 p-0 rounded-lg"
             title="Copy to clipboard"
           >
-            {copied ? <CheckIcon className="w-4 h-4 text-green-500" /> : <CopyIcon className="w-4 h-4" />}
+            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
           </Button>
         </div>
       )}
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index f3cca87..2b45fec 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -1,98 +1,80 @@
 import React from 'react'
+import {
+  Globe,
+  WindowsLogo,
+  AppleLogo,
+  LinuxLogo,
+  AndroidLogo,
+  Question,
+  DeviceMobile,
+  DeviceTablet,
+  Desktop,
+  GoogleLogo,
+  FacebookLogo,
+  XLogo,
+  LinkedinLogo,
+  InstagramLogo,
+  GithubLogo,
+  YoutubeLogo,
+  RedditLogo,
+  Robot,
+} from '@phosphor-icons/react'
 
 /**
  * Google's public favicon service base URL.
  * Append `?domain=<host>&sz=<px>` to get a favicon.
  */
 export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
-import { 
-  FaChrome, 
-  FaFirefox, 
-  FaSafari, 
-  FaEdge, 
-  FaOpera, 
-  FaInternetExplorer, 
-  FaWindows, 
-  FaApple, 
-  FaLinux, 
-  FaAndroid, 
-  FaDesktop, 
-  FaMobileAlt, 
-  FaTabletAlt, 
-  FaGoogle, 
-  FaFacebook, 
-  FaLinkedin, 
-  FaInstagram, 
-  FaGithub, 
-  FaYoutube, 
-  FaReddit,
-  FaQuestion,
-  FaGlobe
-} from 'react-icons/fa'
-import { FaXTwitter } from 'react-icons/fa6'
-import { SiBrave, SiOpenai, SiPerplexity, SiAnthropic, SiGooglegemini } from 'react-icons/si'
-import { RiRobot2Fill } from 'react-icons/ri'
-import { MdDeviceUnknown, MdSmartphone, MdTabletMac, MdDesktopWindows } from 'react-icons/md'
 
 export function getBrowserIcon(browserName: string) {
-  if (!browserName) return <FaGlobe className="text-neutral-400" />
-  const lower = browserName.toLowerCase()
-  if (lower.includes('chrome')) return <FaChrome className="text-blue-500" />
-  if (lower.includes('firefox')) return <FaFirefox className="text-orange-500" />
-  if (lower.includes('safari')) return <FaSafari className="text-blue-400" />
-  if (lower.includes('edge')) return <FaEdge className="text-blue-600" />
-  if (lower.includes('opera')) return <FaOpera className="text-red-500" />
-  if (lower.includes('ie') || lower.includes('explorer')) return <FaInternetExplorer className="text-blue-500" />
-  if (lower.includes('brave')) return <SiBrave className="text-orange-600" />
-  
-  return <FaGlobe className="text-neutral-400" />
+  if (!browserName) return <Globe className="text-neutral-400" />
+  return <Globe className="text-neutral-500" />
 }
 
 export function getOSIcon(osName: string) {
-  if (!osName) return <MdDeviceUnknown className="text-neutral-400" />
+  if (!osName) return <Question className="text-neutral-400" />
   const lower = osName.toLowerCase()
-  if (lower.includes('win')) return <FaWindows className="text-blue-500" />
-  if (lower.includes('mac') || lower.includes('ios')) return <FaApple className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('linux') || lower.includes('ubuntu') || lower.includes('debian')) return <FaLinux className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('android')) return <FaAndroid className="text-green-500" />
-  
-  return <MdDeviceUnknown className="text-neutral-400" />
+  if (lower.includes('win')) return <WindowsLogo className="text-blue-500" />
+  if (lower.includes('mac') || lower.includes('ios')) return <AppleLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('linux') || lower.includes('ubuntu') || lower.includes('debian')) return <LinuxLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('android')) return <AndroidLogo className="text-green-500" />
+
+  return <Question className="text-neutral-400" />
 }
 
 export function getDeviceIcon(deviceName: string) {
-  if (!deviceName) return <MdDeviceUnknown className="text-neutral-400" />
+  if (!deviceName) return <Question className="text-neutral-400" />
   const lower = deviceName.toLowerCase()
-  if (lower.includes('mobile') || lower.includes('phone')) return <MdSmartphone className="text-neutral-500" />
-  if (lower.includes('tablet') || lower.includes('ipad')) return <MdTabletMac className="text-neutral-500" />
-  if (lower.includes('desktop') || lower.includes('laptop')) return <MdDesktopWindows className="text-neutral-500" />
-  
-  return <MdDeviceUnknown className="text-neutral-400" />
+  if (lower.includes('mobile') || lower.includes('phone')) return <DeviceMobile className="text-neutral-500" />
+  if (lower.includes('tablet') || lower.includes('ipad')) return <DeviceTablet className="text-neutral-500" />
+  if (lower.includes('desktop') || lower.includes('laptop')) return <Desktop className="text-neutral-500" />
+
+  return <Question className="text-neutral-400" />
 }
 
 export function getReferrerIcon(referrerName: string) {
-  if (!referrerName) return <FaGlobe className="text-neutral-400" />
+  if (!referrerName) return <Globe className="text-neutral-400" />
   const lower = referrerName.toLowerCase()
-  if (lower.includes('google')) return <FaGoogle className="text-blue-500" />
-  if (lower.includes('facebook')) return <FaFacebook className="text-blue-600" />
-  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <FaXTwitter className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('linkedin')) return <FaLinkedin className="text-blue-700" />
-  if (lower.includes('instagram')) return <FaInstagram className="text-pink-600" />
-  if (lower.includes('github')) return <FaGithub className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('youtube')) return <FaYoutube className="text-red-600" />
-  if (lower.includes('reddit')) return <FaReddit className="text-orange-600" />
+  if (lower.includes('google')) return <GoogleLogo className="text-blue-500" />
+  if (lower.includes('facebook')) return <FacebookLogo className="text-blue-600" />
+  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('linkedin')) return <LinkedinLogo className="text-blue-700" />
+  if (lower.includes('instagram')) return <InstagramLogo className="text-pink-600" />
+  if (lower.includes('github')) return <GithubLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('youtube')) return <YoutubeLogo className="text-red-600" />
+  if (lower.includes('reddit')) return <RedditLogo className="text-orange-600" />
   // AI assistants and search tools
-  if (lower.includes('chatgpt') || lower.includes('openai')) return <SiOpenai className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('perplexity')) return <SiPerplexity className="text-teal-600" />
-  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic className="text-orange-500" />
-  if (lower.includes('gemini')) return <SiGooglegemini className="text-blue-500" />
-  if (lower.includes('copilot')) return <FaGlobe className="text-blue-500" />
-  if (lower.includes('deepseek')) return <RiRobot2Fill className="text-blue-600" />
-  if (lower.includes('grok') || lower.includes('x.ai')) return <FaXTwitter className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('phind')) return <RiRobot2Fill className="text-purple-600" />
-  if (lower.includes('you.com')) return <RiRobot2Fill className="text-indigo-600" />
+  if (lower.includes('chatgpt') || lower.includes('openai')) return <Robot className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('perplexity')) return <Robot className="text-teal-600" />
+  if (lower.includes('claude') || lower.includes('anthropic')) return <Robot className="text-orange-500" />
+  if (lower.includes('gemini')) return <Robot className="text-blue-500" />
+  if (lower.includes('copilot')) return <Robot className="text-blue-500" />
+  if (lower.includes('deepseek')) return <Robot className="text-blue-600" />
+  if (lower.includes('grok') || lower.includes('x.ai')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('phind')) return <Robot className="text-purple-600" />
+  if (lower.includes('you.com')) return <Robot className="text-indigo-600" />
 
-  // Try to use a generic globe or maybe check if it is a URL
-  return <FaGlobe className="text-neutral-400" />
+  return <Globe className="text-neutral-400" />
 }
 
 const REFERRER_NO_FAVICON = ['direct', 'unknown', '']
diff --git a/next.config.ts b/next.config.ts
index 0052619..05f96a5 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -30,7 +30,7 @@ const nextConfig: NextConfig = {
   // * Privacy-first: Disable analytics and telemetry
   productionBrowserSourceMaps: false,
   experimental: {
-    optimizePackageImports: ['react-icons'],
+    optimizePackageImports: ['@phosphor-icons/react'],
   },
   images: {
     remotePatterns: [
diff --git a/package-lock.json b/package-lock.json
index fe86ed2..7c842cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.0.93",
         "@ducanh2912/next-pwa": "^10.2.9",
-        "@radix-ui/react-icons": "^1.3.0",
+        "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
@@ -26,7 +26,6 @@
         "next": "^16.1.1",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
-        "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
         "react-simple-maps": "^3.0.0",
         "recharts": "^2.15.0",
@@ -3274,6 +3273,19 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
@@ -11081,15 +11093,6 @@
         "react": "^19.2.4"
       }
     },
-    "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 99d6af7..6cd541d 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.0.93",
     "@ducanh2912/next-pwa": "^10.2.9",
-    "@radix-ui/react-icons": "^1.3.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
@@ -30,7 +30,6 @@
     "next": "^16.1.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-simple-maps": "^3.0.0",
     "recharts": "^2.15.0",