create icon catalog

Author: hey-august

website/src/pages/internal/extras/Icons.mdx

@@ -48,27 +48,111 @@ import { SiPython, SiRuby, SiJavascript, SiTypescript } from "react-icons/si";
 
 :::info try to stick to a single provider
 
-The `react-icons` package will only bundle 
+The `react-icons` package will only bundle
 icons that are used in the page, so size isn't an issue.
 
 But for visual consistency, it might be a good idea to stick to a single provider.
 
 :::
 
-
+import { PiWaveform, PiMagicWand, PiTreeStructure, PiDatabase } from "react-icons/pi";
+import { FiVideo } from "react-icons/fi";
+import { GrChatOption } from "react-icons/gr";
+import { LiaFaxSolid } from "react-icons/lia";
+import { FaRobot, FaServer, FaMagic, FaExchangeAlt, FaHome, FaCode, FaDesktop, FaPlug, FaBook, FaNewspaper, FaComments, FaIdBadge, FaMoneyCheck, FaProjectDiagram } from "react-icons/fa";
+import { MdOutlineTextsms, MdPayment, MdBolt, MdPhone, MdRocket, MdApps, MdPhonelinkSetup, MdHeadsetMic, MdCallSplit, MdWeb, MdCode, MdCloud, MdOutlineCode, MdAutoAwesome, MdDashboard, MdSafetyCheck, MdHelp, MdOutlineNumbers, MdExplore, MdWorkspacesFilled, MdAutoFixHigh } from "react-icons/md";
+import { TbClick, TbApi } from "react-icons/tb";
+import { LuCodeXml } from "react-icons/lu";
+import { AiIcon, ChatIcon, SmsIcon, VoiceIcon, FlowIcon, SwmlIcon, VideoIcon } from '@site/src/icons';
 
 ---
 
-Custom SW icons
+## Custom SW icons
 
-import { AiIcon, ChatIcon, SmsIcon, VoiceIcon, FlowIcon, SwmlIcon, VideoIcon } from '@site/src/icons';
+<div>
+  <AiIcon size={48} color="#FF0000" />
+  <ChatIcon size={48} color="#00FF00" />
+  <SmsIcon size={48} color="#0000FF" />
+  <VoiceIcon size={48} color="#FF00FF" />
+  <FlowIcon size={48} color="#FFA500" />
+  <SwmlIcon size={48} color="#800080" />
+  <VideoIcon size={48} color="#008000" />
+</div>
+
+---
 
-    <div>
-      <AiIcon size={48} color="#FF0000" />
-      <ChatIcon size={48} color="#00FF00" />
-      <SmsIcon size={48} color="#0000FF" />
-      <VoiceIcon size={48} color="#FF00FF" />
-      <FlowIcon size={48} color="#FFA500" />
-      <SwmlIcon size={48} color="#800080" />
-      <VideoIcon size={48} color="#008000" />
-    </div>
+## Icon Catalog
+
+Reference of icons used across the documentation by product area.
+
+### Homepage & Product Grid
+
+- <PiWaveform size={24} /> Voice
+- <FiVideo size={24} /> Video
+- <GrChatOption size={24} /> Chat
+- <MdOutlineTextsms size={24} /> Messaging
+- <LiaFaxSolid size={24} /> Fax
+- <PiMagicWand size={24} /> AI
+
+### Voice
+
+- <MdPayment size={24} /> Buy phone number
+- <MdBolt size={24} /> Quickstart with AI
+- <MdPhone size={24} /> Phone calls
+- <MdRocket size={24} /> Migration
+- <MdApps size={24} /> Call Flow Builder
+- <MdPhonelinkSetup size={24} /> SIP trunking
+- <MdHeadsetMic size={24} /> Voice features
+- <MdCallSplit size={24} /> Call routing
+
+### SDKs
+
+- <FaRobot size={24} /> Agents SDK
+- <MdWeb size={24} /> Browser SDK
+- <FaServer size={24} /> Realtime SDK
+- <LuCodeXml size={24} /> Compatibility SDKs
+
+### Tools & APIs
+
+- <PiTreeStructure size={24} /> Call Flow Builder
+- <TbClick size={24} /> Click to Call
+- <MdOutlineCode size={24} /> SWML CLI
+- <FaMagic size={24} /> WireStarter
+- <TbApi size={24} /> REST APIs
+- <FaExchangeAlt size={24} /> Compatibility API
+
+### Platform Dashboard
+
+- <MdDashboard size={24} /> Dashboard
+- <FaIdBadge size={24} /> Account/Users
+- <MdSafetyCheck size={24} /> Security
+- <MdHelp size={24} /> Support
+- <FaMoneyCheck size={24} /> Billing
+- <MdOutlineNumbers size={24} /> Phone Numbers
+- <MdExplore size={24} /> Resources
+- <MdWorkspacesFilled size={24} /> Workspaces
+
+### AI & Advanced Features
+
+- <FaRobot size={24} /> AI Agents
+- <PiMagicWand size={24} /> SWAIG
+- <PiDatabase size={24} /> Datasphere/RAG
+- <MdAutoAwesome size={24} /> AI capabilities
+
+### Product Modal (Proposed Update for Alignment)
+
+**Current icons:**
+- FaHome, FaCode, FaRobot, FaDesktop, FaServer, FaPlug, FaExchangeAlt, FaProjectDiagram, FaBook, FaNewspaper, FaComments
+
+**Proposed aligned icons:**
+- <FaHome size={24} /> Home (keep - no equivalent elsewhere)
+- <MdCode size={24} /> SWML (changed from FaCode - matches Tools section)
+- <FaRobot size={24} /> Agents SDK (keep - consistent)
+- <MdWeb size={24} /> Browser SDK (changed from FaDesktop - matches SDKs section)
+- <FaServer size={24} /> Realtime SDK (keep - consistent)
+- <TbApi size={24} /> REST APIs (changed from FaPlug - matches Tools section)
+- <FaExchangeAlt size={24} /> Compatibility API (keep - matches Tools section)
+- <PiTreeStructure size={24} /> Call Flow Builder (changed from FaProjectDiagram - matches Tools section)
+- <FaBook size={24} /> Guides & Tutorials (keep - consistent)
+- <FaNewspaper size={24} /> Blog (keep - consistent)
+- <FaComments size={24} /> Community Forum (keep - consistent)