diff --git a/scripts/generate-phosphor-icon-registry.mjs b/scripts/generate-phosphor-icon-registry.mjs
index 251e6fe73..2a3eaf74f 100644
--- a/scripts/generate-phosphor-icon-registry.mjs
+++ b/scripts/generate-phosphor-icon-registry.mjs
@@ -9,17 +9,14 @@ const iconNames = readdirSync(path.join(packageRoot, 'dist/csr'))
   .filter((fileName) => fileName.endsWith('.es.js'))
   .map((fileName) => fileName.slice(0, -'.es.js'.length))
   .sort((a, b) => a.localeCompare(b))
-const getLocalName = (iconName) =>
-  iconName === 'Infinity' ? 'InfinityIcon' : iconName
-const getImportSpecifier = (iconName) => {
-  const localName = getLocalName(iconName)
-  return localName === iconName ? iconName : `${iconName} as ${localName}`
-}
+// Every icon module exports both `Name` (deprecated) and `NameIcon`. The
+// suffixed export is the supported one and never collides with a JS global.
+const getLocalName = (iconName) => `${iconName}Icon`
 
 const imports = iconNames
   .map(
     (iconName) =>
-      `import { ${getImportSpecifier(iconName)} } from '@phosphor-icons/react/${iconName}'`,
+      `import { ${getLocalName(iconName)} } from '@phosphor-icons/react/${iconName}'`,
   )
   .join('\n')
 const entries = iconNames
diff --git a/src/builder/templates.ts b/src/builder/templates.ts
index 941aaa6d4..7e3c2105b 100644
--- a/src/builder/templates.ts
+++ b/src/builder/templates.ts
@@ -7,16 +7,16 @@
 
 import type { Icon } from '@phosphor-icons/react'
 import {
-  Rocket,
-  Robot,
-  SquaresFour,
-  FileText,
-  HardDrives,
-  Radio,
-  Globe,
-  HardDrive,
-  Plus,
-  ShoppingBag,
+  RocketIcon,
+  RobotIcon,
+  SquaresFourIcon,
+  FileTextIcon,
+  HardDrivesIcon,
+  RadioIcon,
+  GlobeIcon,
+  HardDriveIcon,
+  PlusIcon,
+  ShoppingBagIcon,
 } from '@phosphor-icons/react'
 
 export interface Template {
@@ -39,7 +39,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'blank',
     name: 'Blank',
     description: 'Start from scratch',
-    icon: Plus,
+    icon: PlusIcon,
     color: '#6B7280', // gray
     features: ['cloudflare'],
   },
@@ -47,7 +47,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'saas',
     name: 'SaaS Starter',
     description: 'Auth, database, and UI',
-    icon: Rocket,
+    icon: RocketIcon,
     color: '#F97316', // orange
     features: ['cloudflare', 'better-auth', 'prisma', 'shadcn', 'form'],
   },
@@ -55,7 +55,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'ai-chat',
     name: 'AI Chat',
     description: 'LLM-powered app',
-    icon: Robot,
+    icon: RobotIcon,
     color: '#8B5CF6', // violet
     features: ['cloudflare', 'ai', 'store', 'shadcn'],
   },
@@ -63,7 +63,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'dashboard',
     name: 'Dashboard',
     description: 'Admin panels, data tables',
-    icon: SquaresFour,
+    icon: SquaresFourIcon,
     color: '#3B82F6', // blue
     features: ['cloudflare', 'table', 'tanstack-query', 'shadcn', 'form'],
   },
@@ -71,7 +71,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'blog',
     name: 'Blog / CMS',
     description: 'Content-driven site',
-    icon: FileText,
+    icon: FileTextIcon,
     color: '#EC4899', // pink
     features: ['cloudflare', 'tanstack-query'],
   },
@@ -79,7 +79,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'api-first',
     name: 'API-First',
     description: 'Type-safe backend APIs',
-    icon: HardDrives,
+    icon: HardDrivesIcon,
     color: '#10B981', // emerald
     features: ['cloudflare', 'tRPC', 'tanstack-query', 'drizzle'],
   },
@@ -87,7 +87,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'realtime',
     name: 'Realtime',
     description: 'Live, collaborative features',
-    icon: Radio,
+    icon: RadioIcon,
     color: '#EF4444', // red
     features: ['cloudflare', 'db', 'tanstack-query'],
   },
@@ -95,7 +95,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'i18n',
     name: 'Multi-Language',
     description: 'Internationalized app',
-    icon: Globe,
+    icon: GlobeIcon,
     color: '#06B6D4', // cyan
     features: ['cloudflare', 'paraglide', 'shadcn'],
   },
@@ -103,7 +103,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'local-first',
     name: 'Local-First',
     description: 'Offline-capable, sync-enabled',
-    icon: HardDrive,
+    icon: HardDriveIcon,
     color: '#F59E0B', // amber
     features: ['cloudflare', 'db', 'tanstack-query', 'store'],
   },
@@ -111,7 +111,7 @@ export const TEMPLATES: Array<Template> = [
     id: 'storefront',
     name: 'Storefront',
     description: 'Sell products with Shopify',
-    icon: ShoppingBag,
+    icon: ShoppingBagIcon,
     color: '#5A31F4', // Shopify purple
     features: ['cloudflare'],
     exampleId: 'shopify-storefront',
diff --git a/src/components/ApplicationStarter.tsx b/src/components/ApplicationStarter.tsx
index a3b1342f6..532af4b4f 100644
--- a/src/components/ApplicationStarter.tsx
+++ b/src/components/ApplicationStarter.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { ClientOnly } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  Check,
-  CaretDown,
-  Copy,
-  DownloadSimple,
-  GithubLogo,
-  OpenAiLogo,
-  CircleNotch,
-  ArrowCounterClockwise,
-  Rocket,
+  ArrowRightIcon,
+  CheckIcon,
+  CaretDownIcon,
+  CopyIcon,
+  DownloadSimpleIcon,
+  GithubLogoIcon,
+  OpenAiLogoIcon,
+  CircleNotchIcon,
+  ArrowCounterClockwiseIcon,
+  RocketIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { ClaudeIcon, CursorIcon } from '~/components/CopyPageDropdown'
@@ -452,11 +452,11 @@ export function ApplicationStarter({
       disabled={!canUseFinalActions}
     >
       {isGeneratingPrompt ? (
-        <CircleNotch className="h-4 w-4 animate-spin" />
+        <CircleNotchIcon className="h-4 w-4 animate-spin" />
       ) : isPromptCopied ? (
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       ) : (
-        <Copy className="h-4 w-4" />
+        <CopyIcon className="h-4 w-4" />
       )}
       {isGeneratingPrompt
         ? loadingPhrase
@@ -477,11 +477,11 @@ export function ApplicationStarter({
       disabled={!canUseFinalActions}
     >
       {isGeneratingPrompt ? (
-        <CircleNotch className="h-4 w-4 animate-spin" />
+        <CircleNotchIcon className="h-4 w-4 animate-spin" />
       ) : isCommandCopied ? (
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       ) : (
-        <Copy className="h-4 w-4" />
+        <CopyIcon className="h-4 w-4" />
       )}
       {isGeneratingPrompt
         ? 'Preparing...'
@@ -545,7 +545,7 @@ export function ApplicationStarter({
         )}
       >
         {transientAction === action || waitingForHref ? (
-          <CircleNotch
+          <CircleNotchIcon
             className={twMerge(
               'animate-spin',
               iconOnly ? 'h-6 w-6' : size === 'xs' ? 'h-3.5 w-3.5' : 'h-4 w-4',
@@ -608,9 +608,9 @@ export function ApplicationStarter({
           aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
         >
           {isDeployFeedbackActive || waitingForHref ? (
-            <CircleNotch className="h-4 w-4 animate-spin" />
+            <CircleNotchIcon className="h-4 w-4 animate-spin" />
           ) : (
-            <Rocket className="h-4 w-4" />
+            <RocketIcon className="h-4 w-4" />
           )}
           {isDeployFeedbackActive
             ? 'Opening...'
@@ -639,9 +639,9 @@ export function ApplicationStarter({
         aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
       >
         {isDeployFeedbackActive ? (
-          <CircleNotch className="h-4 w-4 animate-spin" />
+          <CircleNotchIcon className="h-4 w-4 animate-spin" />
         ) : (
-          <Rocket className="h-4 w-4" />
+          <RocketIcon className="h-4 w-4" />
         )}
         {isDeployFeedbackActive ? 'Opening...' : 'Deploy'}
       </Button>
@@ -858,7 +858,7 @@ export function ApplicationStarter({
                       type="submit"
                       disabled={!canRevealOptions}
                     >
-                      <ArrowRight className="h-4 w-4" />
+                      <ArrowRightIcon className="h-4 w-4" />
                       Next
                       {enableHotkeys ? (
                         <SubmitShortcutHint isMac={isMacShortcutPlatform} />
@@ -1089,7 +1089,7 @@ export function ApplicationStarter({
                             onClick={resetHomeBuilder}
                             className="rounded-lg border-0 bg-transparent text-xs font-medium text-gray-500 shadow-none hover:bg-gray-950/5 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
                           >
-                            <ArrowCounterClockwise className="h-3.5 w-3.5" />
+                            <ArrowCounterClockwiseIcon className="h-3.5 w-3.5" />
                             Start over
                           </Button>
                         ) : isHomePayoffLoading ? (
@@ -1111,7 +1111,7 @@ export function ApplicationStarter({
                             className="rounded-[11px] border-transparent bg-[linear-gradient(117deg,#ff5f5f,#ffa05c,#fff27c,#74dcff)] font-ds-display font-bold text-ds-neutral-500 shadow-md transition-[filter] hover:text-ds-neutral-500 hover:brightness-105 disabled:grayscale"
                           >
                             Go
-                            <ArrowRight className="h-4 w-4" />
+                            <ArrowRightIcon className="h-4 w-4" />
                           </Button>
                         )}
                       </div>
@@ -1128,7 +1128,7 @@ export function ApplicationStarter({
                             className="rounded-[11px] border-transparent bg-[linear-gradient(117deg,#ff5f5f,#ffa05c,#fff27c,#74dcff)] font-ds-display font-bold text-ds-neutral-500 shadow-md transition-[filter] hover:text-ds-neutral-500 hover:brightness-105 disabled:grayscale"
                           >
                             Go
-                            <ArrowRight className="h-4 w-4" />
+                            <ArrowRightIcon className="h-4 w-4" />
                             {enableHotkeys ? (
                               <SubmitShortcutHint
                                 isMac={isMacShortcutPlatform}
@@ -1319,7 +1319,7 @@ export function ApplicationStarter({
                                       className:
                                         'border-[#00AD9F] bg-[#00AD9F] text-white hover:bg-[#009a8e]',
                                       href: netlifyStartHref,
-                                      icon: <Rocket className="h-4 w-4" />,
+                                      icon: <RocketIcon className="h-4 w-4" />,
                                       label: secondaryActionLabel,
                                       onTrack: () => {
                                         trackActivation({
@@ -1337,7 +1337,7 @@ export function ApplicationStarter({
                                   className:
                                     'border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-gray-200',
                                   href: codexStartHref,
-                                  icon: <OpenAiLogo className="h-4 w-4" />,
+                                  icon: <OpenAiLogoIcon className="h-4 w-4" />,
                                   label: 'Open in Codex',
                                   onTrack: () => {
                                     trackActivation({
@@ -1376,7 +1376,7 @@ export function ApplicationStarter({
                                     'text-text-secondary hover:text-text-primary',
                                   href: codexStartHref,
                                   icon: (
-                                    <OpenAiLogo
+                                    <OpenAiLogoIcon
                                       className="h-6 w-6"
                                       weight="regular"
                                     />
@@ -1447,9 +1447,9 @@ export function ApplicationStarter({
                                     className="text-text-secondary hover:text-text-primary"
                                   >
                                     {transientAction === 'clone' ? (
-                                      <CircleNotch className="h-6 w-6 animate-spin" />
+                                      <CircleNotchIcon className="h-6 w-6 animate-spin" />
                                     ) : (
-                                      <GithubLogo
+                                      <GithubLogoIcon
                                         className="h-6 w-6"
                                         weight="regular"
                                       />
@@ -1463,7 +1463,7 @@ export function ApplicationStarter({
                                     'text-text-secondary hover:text-text-primary',
                                   href: downloadHref,
                                   icon: (
-                                    <DownloadSimple
+                                    <DownloadSimpleIcon
                                       className="h-6 w-6"
                                       weight="regular"
                                     />
@@ -1550,7 +1550,7 @@ function StarterCustomizationSection({
           )}
         >
           {title}
-          <CaretDown
+          <CaretDownIcon
             className={twMerge(
               'h-3 w-3 transition-transform duration-200',
               open && 'rotate-180',
diff --git a/src/components/AuthenticatedUserMenu.tsx b/src/components/AuthenticatedUserMenu.tsx
index 208886fb5..d5a2d2aa4 100644
--- a/src/components/AuthenticatedUserMenu.tsx
+++ b/src/components/AuthenticatedUserMenu.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import {
-  CaretDown,
-  Gear,
-  Lock,
-  SignOut,
-  Sparkle,
-  Key,
+  CaretDownIcon,
+  GearIcon,
+  LockIcon,
+  SignOutIcon,
+  SparkleIcon,
+  KeyIcon,
 } from '@phosphor-icons/react'
 import { Avatar } from '~/components/Avatar'
 import {
@@ -47,7 +47,7 @@ export function AuthenticatedUserMenu({
             size="xs"
             className="w-[26px] h-[26px]"
           />
-          <CaretDown className="w-3 h-3 opacity-50" />
+          <CaretDownIcon className="w-3 h-3 opacity-50" />
         </div>
       </DropdownTrigger>
       <DropdownContent align="end">
@@ -57,13 +57,13 @@ export function AuthenticatedUserMenu({
         <DropdownSeparator />
         <DropdownItem asChild>
           <Link to="/account" className="flex items-center gap-2">
-            <Gear className="w-4 h-4" />
+            <GearIcon className="w-4 h-4" />
             <span>Account</span>
           </Link>
         </DropdownItem>
         <DropdownItem asChild>
           <Link to="/account/submissions" className="flex items-center gap-2">
-            <Sparkle className="w-4 h-4" />
+            <SparkleIcon className="w-4 h-4" />
             <span>My Showcases</span>
           </Link>
         </DropdownItem>
@@ -73,7 +73,7 @@ export function AuthenticatedUserMenu({
               to="/account/integrations"
               className="flex items-center gap-2"
             >
-              <Key className="w-4 h-4" />
+              <KeyIcon className="w-4 h-4" />
               <span>Integrations</span>
             </Link>
           </DropdownItem>
@@ -81,14 +81,14 @@ export function AuthenticatedUserMenu({
         {canAdmin && (
           <DropdownItem asChild>
             <Link to="/admin" className="flex items-center gap-2">
-              <Lock className="w-4 h-4" />
+              <LockIcon className="w-4 h-4" />
               <span>Admin</span>
             </Link>
           </DropdownItem>
         )}
         <DropdownSeparator />
         <DropdownItem onSelect={onSignOut}>
-          <SignOut className="w-4 h-4" />
+          <SignOutIcon className="w-4 h-4" />
           <span>Sign out</span>
         </DropdownItem>
       </DropdownContent>
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 9f977b7ca..0dca019e7 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,4 +1,4 @@
-import { User } from '@phosphor-icons/react'
+import { UserIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 
 type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -80,7 +80,7 @@ export function Avatar({
         className,
       )}
     >
-      <User className="w-1/2 h-1/2" />
+      <UserIcon className="w-1/2 h-1/2" />
     </div>
   )
 }
diff --git a/src/components/AvatarCropModal.tsx b/src/components/AvatarCropModal.tsx
index 02e0063dc..47772969c 100644
--- a/src/components/AvatarCropModal.tsx
+++ b/src/components/AvatarCropModal.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import Cropper from 'react-easy-crop'
 import type { Area, Point } from 'react-easy-crop'
-import { X } from '@phosphor-icons/react'
+import { XIcon } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 
 interface AvatarCropModalProps {
@@ -116,7 +116,7 @@ export function AvatarCropModal({
               Crop Profile Picture
             </DialogPrimitive.Title>
             <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
-              <X className="w-5 h-5 text-gray-500" />
+              <XIcon className="w-5 h-5 text-gray-500" />
             </DialogPrimitive.Close>
           </div>
 
diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
index 7eee2ca7c..4400ee29a 100644
--- a/src/components/BlogAuthorFilter.tsx
+++ b/src/components/BlogAuthorFilter.tsx
@@ -1,4 +1,4 @@
-import { Check, CaretUpDown } from '@phosphor-icons/react'
+import { CheckIcon, CaretUpDownIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import {
   Dropdown,
@@ -67,7 +67,10 @@ export function BlogAuthorFilter({
               {activeAuthor ?? 'All authors'}
             </span>
             <span className="flex items-center pr-1">
-              <CaretUpDown className="h-4 w-4 opacity-40" aria-hidden="true" />
+              <CaretUpDownIcon
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
             </span>
           </button>
         </DropdownTrigger>
@@ -86,7 +89,7 @@ export function BlogAuthorFilter({
           >
             <span className="truncate">All authors</span>
             {!activeAuthor ? (
-              <Check
+              <CheckIcon
                 className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
                 aria-hidden="true"
               />
@@ -115,7 +118,7 @@ export function BlogAuthorFilter({
                 />
                 <span className="truncate">{name}</span>
                 {isSelected ? (
-                  <Check
+                  <CheckIcon
                     className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
                     aria-hidden="true"
                   />
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 8f02649de..6a5974f66 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { CaretDown } from '@phosphor-icons/react'
+import { CaretDownIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import type { MarkdownHeading } from '~/utils/markdown'
 import {
@@ -56,7 +56,7 @@ export function Breadcrumbs({
                 )}
               >
                 <span>On this page</span>
-                <CaretDown className="w-3.5 h-3.5" />
+                <CaretDownIcon className="w-3.5 h-3.5" />
               </button>
             </DropdownTrigger>
             <DropdownContent align="end" sideOffset={8} className={hiddenClass}>
diff --git a/src/components/CodeExplorerTopBar.tsx b/src/components/CodeExplorerTopBar.tsx
index 3868fcab3..7ececc04b 100644
--- a/src/components/CodeExplorerTopBar.tsx
+++ b/src/components/CodeExplorerTopBar.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import {
-  ArrowLineLeft,
-  ArrowLineRight,
-  ArrowsOut,
-  ArrowsIn,
-  TextAlignLeft,
+  ArrowLineLeftIcon,
+  ArrowLineRightIcon,
+  ArrowsOutIcon,
+  ArrowsInIcon,
+  TextAlignLeftIcon,
 } from '@phosphor-icons/react'
 
 interface CodeExplorerTopBarProps {
@@ -34,7 +34,7 @@ export function CodeExplorerTopBar({
               className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400"
               title={'Hide sidebar'}
             >
-              <ArrowLineLeft className="w-4 h-4" />
+              <ArrowLineLeftIcon className="w-4 h-4" />
             </button>
           ) : (
             <button
@@ -42,12 +42,15 @@ export function CodeExplorerTopBar({
               className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400"
               title={'Show sidebar'}
             >
-              <ArrowLineRight className="w-4 h-4" />
+              <ArrowLineRightIcon className="w-4 h-4" />
             </button>
           )
         ) : (
           <div className="p-2 text-sm rounded" aria-hidden>
-            <TextAlignLeft className="w-4 h-4 text-transparent" aria-hidden />
+            <TextAlignLeftIcon
+              className="w-4 h-4 text-transparent"
+              aria-hidden
+            />
           </div>
         )}
         <button
@@ -96,9 +99,9 @@ export function CodeExplorerTopBar({
           title={isFullScreen ? 'Exit full screen' : 'Enter full screen'}
         >
           {isFullScreen ? (
-            <ArrowsIn className="w-4 h-4" />
+            <ArrowsInIcon className="w-4 h-4" />
           ) : (
-            <ArrowsOut className="w-4 h-4" />
+            <ArrowsOutIcon className="w-4 h-4" />
           )}
         </button>
       </div>
diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index a177651fe..c4832685f 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -1,6 +1,6 @@
 'use client'
 import * as React from 'react'
-import { CaretDown, Copy, Check } from '@phosphor-icons/react'
+import { CaretDownIcon, CopyIcon, CheckIcon } from '@phosphor-icons/react'
 import { useToast } from '~/components/ToastProvider'
 import { Button } from '~/ui'
 import { ButtonGroup } from './ButtonGroup'
@@ -301,12 +301,12 @@ export function CopyPageDropdown({
       >
         {copied.active ? (
           <>
-            <Check className="w-3 h-3" />
+            <CheckIcon className="w-3 h-3" />
             Copied!
           </>
         ) : (
           <>
-            <Copy className="w-3 h-3" />
+            <CopyIcon className="w-3 h-3" />
             {label}
           </>
         )}
@@ -321,7 +321,7 @@ export function CopyPageDropdown({
             className="border-0 px-1.5"
             aria-label={`More ${label} options`}
           >
-            <CaretDown className="w-3 h-3" />
+            <CaretDownIcon className="w-3 h-3" />
           </Button>
         </DropdownTrigger>
         <DropdownContent align="end" className="min-w-72">
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index b9fd892ba..36df04f44 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {
-  ArrowsInLineHorizontal,
-  ArrowsOutLineHorizontal,
+  ArrowsInLineHorizontalIcon,
+  ArrowsOutLineHorizontalIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { DocNavigation, WidthToggleContext } from '~/components/LibraryLayout'
@@ -167,9 +167,9 @@ export function Doc({
                   title={isFullWidth ? 'Constrain width' : 'Expand width'}
                 >
                   {isFullWidth ? (
-                    <ArrowsInLineHorizontal className="w-4 h-4" />
+                    <ArrowsInLineHorizontalIcon className="w-4 h-4" />
                   ) : (
-                    <ArrowsOutLineHorizontal className="w-4 h-4" />
+                    <ArrowsOutLineHorizontalIcon className="w-4 h-4" />
                   )}
                 </button>
               ) : null
diff --git a/src/components/DocFeedbackFloatingButton.tsx b/src/components/DocFeedbackFloatingButton.tsx
index 5b32410e6..ecb90a408 100644
--- a/src/components/DocFeedbackFloatingButton.tsx
+++ b/src/components/DocFeedbackFloatingButton.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Lightbulb, ChatCentered, Plus } from '@phosphor-icons/react'
+import {
+  LightbulbIcon,
+  ChatCenteredIcon,
+  PlusIcon,
+} from '@phosphor-icons/react'
 
 interface DocFeedbackFloatingButtonProps {
   onAddNote: () => void
@@ -113,7 +117,7 @@ export function DocFeedbackFloatingButton({
         )}
         title="Add feedback"
       >
-        <Plus
+        <PlusIcon
           className={twMerge(
             'text-[10px] transition-transform duration-200',
             isMenuOpen && 'rotate-45',
@@ -130,7 +134,7 @@ export function DocFeedbackFloatingButton({
                 onClick={handleNoteClick}
                 className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
               >
-                <ChatCentered className="text-blue-500" />
+                <ChatCenteredIcon className="text-blue-500" />
                 <div>
                   <div className="font-medium text-sm text-gray-900 dark:text-white">
                     Add Note
@@ -150,7 +154,7 @@ export function DocFeedbackFloatingButton({
               onClick={handleFeedbackClick}
               className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
             >
-              <Lightbulb className="text-yellow-500" />
+              <LightbulbIcon className="text-yellow-500" />
               <div>
                 <div className="font-medium text-sm text-gray-900 dark:text-white">
                   Suggest Improvement
diff --git a/src/components/DocFeedbackNote.tsx b/src/components/DocFeedbackNote.tsx
index 7b9ddcb19..a0918a5d8 100644
--- a/src/components/DocFeedbackNote.tsx
+++ b/src/components/DocFeedbackNote.tsx
@@ -8,13 +8,13 @@ import {
 } from '~/utils/docFeedback.functions'
 import type { DocFeedback } from '~/db/types'
 import {
-  CaretDown,
-  CaretUp,
-  Lightbulb,
-  ChatCentered,
-  FloppyDisk,
-  Trash,
-  X,
+  CaretDownIcon,
+  CaretUpIcon,
+  LightbulbIcon,
+  ChatCenteredIcon,
+  FloppyDiskIcon,
+  TrashIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 
 interface DocFeedbackNoteProps {
@@ -52,7 +52,7 @@ export function DocFeedbackNote({
 
   // Theme based on type
   const isImprovement = note.type === 'improvement'
-  const Icon = isImprovement ? Lightbulb : ChatCentered
+  const Icon = isImprovement ? LightbulbIcon : ChatCenteredIcon
   const colors = isImprovement
     ? {
         bg: 'bg-yellow-50 dark:bg-yellow-900/20',
@@ -402,7 +402,7 @@ export function DocFeedbackNote({
                     title={isImprovement ? 'Delete improvement' : 'Delete note'}
                     disabled={isDeleting || isSaving}
                   >
-                    <Trash className="text-xs" />
+                    <TrashIcon className="text-xs" />
                   </button>
                 </>
               )}
@@ -419,9 +419,9 @@ export function DocFeedbackNote({
                 }
               >
                 {note.isCollapsed ? (
-                  <CaretDown className="text-xs" />
+                  <CaretDownIcon className="text-xs" />
                 ) : (
-                  <CaretUp className="text-xs" />
+                  <CaretUpIcon className="text-xs" />
                 )}
               </button>
             </div>
@@ -469,7 +469,7 @@ export function DocFeedbackNote({
                   )}
                   disabled={isSaving}
                 >
-                  <FloppyDisk className="text-[10px]" />
+                  <FloppyDiskIcon className="text-[10px]" />
                   {isSaving ? 'Saving...' : 'Save'}
                 </button>
                 <button
@@ -477,7 +477,7 @@ export function DocFeedbackNote({
                   className="px-3 py-1 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white disabled:opacity-50"
                   disabled={isSaving}
                 >
-                  <X className="inline text-[10px] mr-1" />
+                  <XIcon className="inline text-[10px] mr-1" />
                   Cancel
                 </button>
               </div>
diff --git a/src/components/DocFeedbackProvider.tsx b/src/components/DocFeedbackProvider.tsx
index e42602672..256b2a186 100644
--- a/src/components/DocFeedbackProvider.tsx
+++ b/src/components/DocFeedbackProvider.tsx
@@ -13,7 +13,7 @@ import {
   getBlockIdentifier,
 } from '~/utils/docFeedback'
 import type { DocFeedback } from '~/db/types'
-import { Lightbulb, ChatCentered } from '@phosphor-icons/react'
+import { LightbulbIcon, ChatCenteredIcon } from '@phosphor-icons/react'
 
 interface DocFeedbackProviderProps {
   children: React.ReactNode
@@ -584,7 +584,7 @@ function CreatingFeedbackNote({
 
   // Theme based on type
   const isImprovement = type === 'improvement'
-  const Icon = isImprovement ? Lightbulb : ChatCentered
+  const Icon = isImprovement ? LightbulbIcon : ChatCenteredIcon
 
   const colors = isImprovement
     ? {
diff --git a/src/components/ExampleDeployDialog.tsx b/src/components/ExampleDeployDialog.tsx
index 1533bf2a8..5b292893d 100644
--- a/src/components/ExampleDeployDialog.tsx
+++ b/src/components/ExampleDeployDialog.tsx
@@ -7,13 +7,13 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import {
-  CircleNotch,
-  ArrowSquareOut,
-  WarningCircle,
-  Check,
-  Lock,
-  Globe,
-  Rocket,
+  CircleNotchIcon,
+  ArrowSquareOutIcon,
+  WarningCircleIcon,
+  CheckIcon,
+  LockIcon,
+  GlobeIcon,
+  RocketIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useAsyncDebouncer } from '@tanstack/react-pacer'
@@ -246,7 +246,7 @@ export function ExampleDeployDialog({
               className="w-10 h-10 rounded-lg flex items-center justify-center"
               style={{ backgroundColor: providerInfo.color }}
             >
-              <Rocket className="w-5 h-5 text-white" />
+              <RocketIcon className="w-5 h-5 text-white" />
             </div>
             <div>
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -263,7 +263,7 @@ export function ExampleDeployDialog({
         <div className="p-6">
           {state.step === 'auth-check' && (
             <div className="flex flex-col items-center justify-center py-8">
-              <CircleNotch className="w-8 h-8 animate-spin text-gray-400" />
+              <CircleNotchIcon className="w-8 h-8 animate-spin text-gray-400" />
               <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
                 Checking authentication...
               </p>
@@ -320,14 +320,14 @@ export function ExampleDeployDialog({
                   />
                   <div className="absolute right-2.5 top-1/2 -translate-y-1/2">
                     {repoNameStatus === 'checking' && (
-                      <CircleNotch className="w-4 h-4 animate-spin text-gray-400" />
+                      <CircleNotchIcon className="w-4 h-4 animate-spin text-gray-400" />
                     )}
                     {repoNameStatus === 'available' && (
-                      <Check className="w-4 h-4 text-green-500" />
+                      <CheckIcon className="w-4 h-4 text-green-500" />
                     )}
                     {(repoNameStatus === 'taken' ||
                       repoNameStatus === 'invalid') && (
-                      <WarningCircle className="w-4 h-4 text-red-500" />
+                      <WarningCircleIcon className="w-4 h-4 text-red-500" />
                     )}
                   </div>
                 </div>
@@ -350,7 +350,7 @@ export function ExampleDeployDialog({
                         : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
                     )}
                   >
-                    <Globe className="w-4 h-4" />
+                    <GlobeIcon className="w-4 h-4" />
                     Public
                   </button>
                   <button
@@ -362,7 +362,7 @@ export function ExampleDeployDialog({
                         : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
                     )}
                   >
-                    <Lock className="w-4 h-4" />
+                    <LockIcon className="w-4 h-4" />
                     Private
                   </button>
                 </div>
@@ -401,7 +401,7 @@ export function ExampleDeployDialog({
 
           {state.step === 'deploying' && (
             <div className="flex flex-col items-center justify-center py-8">
-              <CircleNotch className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
+              <CircleNotchIcon className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
               <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
                 {state.message}
               </p>
@@ -411,7 +411,7 @@ export function ExampleDeployDialog({
           {state.step === 'success' && (
             <div className="flex flex-col items-center text-center py-4">
               <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-4">
-                <Check className="w-8 h-8 text-green-600 dark:text-green-400" />
+                <CheckIcon className="w-8 h-8 text-green-600 dark:text-green-400" />
               </div>
               <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                 Repository Created!
@@ -423,7 +423,7 @@ export function ExampleDeployDialog({
                 className="text-sm text-blue-600 dark:text-cyan-400 hover:underline flex items-center gap-1 mb-4"
               >
                 {state.owner}/{state.repoName}
-                <ArrowSquareOut className="w-3 h-3" />
+                <ArrowSquareOutIcon className="w-3 h-3" />
               </a>
               {countdown !== null && countdown > 0 && (
                 <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
@@ -443,7 +443,7 @@ export function ExampleDeployDialog({
                 className="gap-2"
                 style={{ backgroundColor: providerInfo.color }}
               >
-                <Rocket className="w-4 h-4" />
+                <RocketIcon className="w-4 h-4" />
                 Deploy Now
               </Button>
             </div>
@@ -452,7 +452,7 @@ export function ExampleDeployDialog({
           {state.step === 'error' && (
             <div className="flex flex-col items-center text-center py-4">
               <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
-                <WarningCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+                <WarningCircleIcon className="w-8 h-8 text-red-600 dark:text-red-400" />
               </div>
               <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                 Deployment Failed
diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx
index 8de8b249b..d27ae18eb 100644
--- a/src/components/FeatureGrid.tsx
+++ b/src/components/FeatureGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CheckCircle } from '@phosphor-icons/react'
+import { CheckCircleIcon } from '@phosphor-icons/react'
 
 type FeatureGridProps = {
   title?: string
@@ -23,7 +23,7 @@ export function FeatureGrid({ title, items, gridClassName }: FeatureGridProps) {
       >
         {items.map((d, i) => (
           <span key={i} className="flex gap-2">
-            <CheckCircle className="text-green-500 h-lh w-4 shrink-0" /> {d}
+            <CheckCircleIcon className="text-green-500 h-lh w-4 shrink-0" /> {d}
           </span>
         ))}
       </div>
diff --git a/src/components/FeedbackLeaderboard.tsx b/src/components/FeedbackLeaderboard.tsx
index e9022bbc8..c079809cb 100644
--- a/src/components/FeedbackLeaderboard.tsx
+++ b/src/components/FeedbackLeaderboard.tsx
@@ -14,7 +14,7 @@ import {
 } from './TableComponents'
 import { PaginationControls } from './PaginationControls'
 import { twMerge } from 'tailwind-merge'
-import { Medal, Trophy } from '@phosphor-icons/react'
+import { MedalIcon, TrophyIcon } from '@phosphor-icons/react'
 
 export function FeedbackLeaderboard() {
   const navigate = useNavigate({ from: '/feedback-leaderboard' })
@@ -67,9 +67,9 @@ export function FeedbackLeaderboard() {
   }
 
   const getRankIcon = (rank: number) => {
-    if (rank === 1) return <Trophy className="text-yellow-500" />
-    if (rank === 2) return <Medal className="text-gray-400" />
-    if (rank === 3) return <Medal className="text-amber-600" />
+    if (rank === 1) return <TrophyIcon className="text-yellow-500" />
+    if (rank === 2) return <MedalIcon className="text-gray-400" />
+    if (rank === 3) return <MedalIcon className="text-amber-600" />
     return null
   }
 
@@ -79,7 +79,7 @@ export function FeedbackLeaderboard() {
       <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <div className="flex items-center gap-3 mb-2">
-            <Medal className="text-3xl text-blue-500" />
+            <MedalIcon className="text-3xl text-blue-500" />
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
               Documentation Feedback Leaderboard
             </h1>
diff --git a/src/components/FeedbackModerationList.tsx b/src/components/FeedbackModerationList.tsx
index 3688aafc7..bd57cd128 100644
--- a/src/components/FeedbackModerationList.tsx
+++ b/src/components/FeedbackModerationList.tsx
@@ -15,8 +15,8 @@ import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/types'
 import { calculatePoints } from '~/utils/docFeedback.shared'
 import { getRowFieldId } from '~/utils/route-encoding'
-import { Check, Lightbulb, Warning } from '@phosphor-icons/react'
-import { ChatCentered, X } from '@phosphor-icons/react'
+import { CheckIcon, LightbulbIcon, WarningIcon } from '@phosphor-icons/react'
+import { ChatCenteredIcon, XIcon } from '@phosphor-icons/react'
 import { Badge, Button } from '~/ui'
 
 interface FeedbackModerationListProps {
@@ -189,9 +189,9 @@ export function FeedbackModerationList({
                       onClick={(e) => e.stopPropagation()}
                     >
                       {feedback.type === 'note' ? (
-                        <ChatCentered className="text-blue-500" />
+                        <ChatCenteredIcon className="text-blue-500" />
                       ) : (
-                        <Lightbulb className="text-yellow-500" />
+                        <LightbulbIcon className="text-yellow-500" />
                       )}
                       <span className="text-xs">
                         {feedback.type === 'note' ? 'Note' : 'Improvement'}
@@ -226,7 +226,7 @@ export function FeedbackModerationList({
                     </span>
                     {feedback.isDetached && (
                       <div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400 mt-1">
-                        <Warning />
+                        <WarningIcon />
                         Detached
                       </div>
                     )}
@@ -250,7 +250,7 @@ export function FeedbackModerationList({
                           onClick={() => handleModerate(feedback.id, 'approve')}
                           title="Approve"
                         >
-                          <Check />
+                          <CheckIcon />
                         </Button>
                         <Button
                           variant="icon"
@@ -259,7 +259,7 @@ export function FeedbackModerationList({
                           onClick={() => handleModerate(feedback.id, 'deny')}
                           title="Deny"
                         >
-                          <X />
+                          <XIcon />
                         </Button>
                       </div>
                     )}
diff --git a/src/components/FilterComponents.tsx b/src/components/FilterComponents.tsx
index aebf455af..936ca3442 100644
--- a/src/components/FilterComponents.tsx
+++ b/src/components/FilterComponents.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { useState, useRef, useEffect } from 'react'
 import {
-  Table,
-  List,
-  CaretDown,
-  Plus,
-  X,
-  ArrowCounterClockwise,
-  SlidersHorizontal,
+  TableIcon,
+  ListIcon,
+  CaretDownIcon,
+  PlusIcon,
+  XIcon,
+  ArrowCounterClockwiseIcon,
+  SlidersHorizontalIcon,
 } from '@phosphor-icons/react'
 import { useDebouncer } from '@tanstack/react-pacer'
 import { twMerge } from 'tailwind-merge'
@@ -84,14 +84,14 @@ export function TopBarFilter({
                 : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700',
             )}
           >
-            <SlidersHorizontal className="w-3.5 h-3.5" />
+            <SlidersHorizontalIcon className="w-3.5 h-3.5" />
             <span>Filters</span>
             {hasActiveFilters && (
               <span className="ml-0.5 px-1 py-0.5 text-[10px] bg-blue-200 dark:bg-blue-800 rounded-full">
                 !
               </span>
             )}
-            <CaretDown
+            <CaretDownIcon
               className={twMerge(
                 'w-3.5 h-3.5 transition-transform',
                 mobileExpanded && 'rotate-180',
@@ -110,7 +110,7 @@ export function TopBarFilter({
                 onClick={onClearAll}
                 className="mt-2 flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md transition-colors"
               >
-                <ArrowCounterClockwise className="w-3 h-3" />
+                <ArrowCounterClockwiseIcon className="w-3 h-3" />
                 <span>Reset all filters</span>
               </button>
             )}
@@ -137,7 +137,7 @@ export function TopBarFilter({
               onClick={onClearAll}
               className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md transition-colors"
             >
-              <ArrowCounterClockwise className="w-3 h-3" />
+              <ArrowCounterClockwiseIcon className="w-3 h-3" />
               <span>Reset</span>
             </button>
           )}
@@ -185,7 +185,7 @@ export function FilterChip({
         className="p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800 rounded transition-colors"
         aria-label={`Remove ${label} filter`}
       >
-        <X className="w-2.5 h-2.5" />
+        <XIcon className="w-2.5 h-2.5" />
       </button>
     </span>
   )
@@ -231,9 +231,9 @@ export function AddFilterButton({
             : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700',
         )}
       >
-        <Plus className="w-3.5 h-3.5" />
+        <PlusIcon className="w-3.5 h-3.5" />
         <span>{label}</span>
-        <CaretDown
+        <CaretDownIcon
           className={twMerge(
             'w-3.5 h-3.5 transition-transform',
             isOpen && 'rotate-180',
@@ -309,7 +309,7 @@ export function FacetFilterButton({
                 {selectionCount}
               </span>
             )}
-          <CaretDown
+          <CaretDownIcon
             className={twMerge(
               'w-3 h-3 transition-transform',
               isOpen && 'rotate-180',
@@ -322,7 +322,7 @@ export function FacetFilterButton({
             className="p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800 rounded transition-colors"
             aria-label={`Clear ${label} filter`}
           >
-            <X className="w-2.5 h-2.5" />
+            <XIcon className="w-2.5 h-2.5" />
           </button>
         )}
       </div>
@@ -394,7 +394,7 @@ export function FilterDropdownSection({
           className="flex items-center gap-1 flex-1 text-xs font-medium text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"
         >
           <span>{title}</span>
-          <CaretDown
+          <CaretDownIcon
             className={twMerge(
               'w-3.5 h-3.5 transition-transform ml-auto',
               !isExpanded && '-rotate-90',
@@ -485,7 +485,7 @@ export function FilterSection({
           className="flex items-center gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors flex-1 py-0"
         >
           <span>{title}</span>
-          <CaretDown
+          <CaretDownIcon
             className={twMerge(
               'w-3.5 h-3.5 transition-transform',
               !isExpanded && 'rotate-90',
@@ -622,8 +622,8 @@ export function ViewModeToggle({
     'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white/50 dark:hover:bg-gray-700/50'
 
   const compactViewModes = [
-    { mode: 'table' as const, icon: Table, title: 'Table view' },
-    { mode: 'timeline' as const, icon: List, title: 'Timeline view' },
+    { mode: 'table' as const, icon: TableIcon, title: 'Table view' },
+    { mode: 'timeline' as const, icon: ListIcon, title: 'Timeline view' },
   ]
 
   if (compact) {
@@ -652,13 +652,13 @@ export function ViewModeToggle({
   const viewModes = [
     {
       mode: 'table' as const,
-      icon: Table,
+      icon: TableIcon,
       label: 'Table',
       title: 'Table view',
     },
     {
       mode: 'timeline' as const,
-      icon: List,
+      icon: ListIcon,
       label: 'Timeline',
       title: 'Timeline view',
     },
diff --git a/src/components/FrameworkCard.tsx b/src/components/FrameworkCard.tsx
index 299cace48..3da830831 100644
--- a/src/components/FrameworkCard.tsx
+++ b/src/components/FrameworkCard.tsx
@@ -4,7 +4,7 @@ import type { Library, LibraryId } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
 import { useCopyButton } from '~/components/CopyMarkdownButton'
 import { useToast } from '~/components/ToastProvider'
-import { Check, Copy } from '@phosphor-icons/react'
+import { CheckIcon, CopyIcon } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import {
   getFrameworkDocsHash,
@@ -102,9 +102,9 @@ export function FrameworkCard({
             title="Copy package name"
           >
             {copied ? (
-              <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
+              <CheckIcon className="w-3 h-3 text-green-600 dark:text-green-400" />
             ) : (
-              <Copy className="w-3 h-3" />
+              <CopyIcon className="w-3 h-3" />
             )}
           </button>
         </div>
diff --git a/src/components/ImageUpload.client.tsx b/src/components/ImageUpload.client.tsx
index c24d8a8e9..8859981a6 100644
--- a/src/components/ImageUpload.client.tsx
+++ b/src/components/ImageUpload.client.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useUploadThing } from '~/utils/uploadthing.client'
 import { useToast } from './ToastProvider'
-import { Upload, X, CircleNotch } from '@phosphor-icons/react'
+import { UploadIcon, XIcon, CircleNotchIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import {
   SHOWCASE_IMAGE_MAX_BYTES,
@@ -143,7 +143,7 @@ export function ImageUploadClient({
             )}
             title="Remove image"
           >
-            <X className={isSmall ? 'w-3 h-3' : 'w-4 h-4'} />
+            <XIcon className={isSmall ? 'w-3 h-3' : 'w-4 h-4'} />
           </button>
         </div>
       ) : (
@@ -165,7 +165,7 @@ export function ImageUploadClient({
         >
           {isUploading ? (
             <div className="p-4 text-center">
-              <CircleNotch
+              <CircleNotchIcon
                 className={twMerge(
                   'text-blue-500 animate-spin mx-auto',
                   isSmall ? 'w-5 h-5' : 'w-8 h-8',
@@ -179,7 +179,7 @@ export function ImageUploadClient({
             </div>
           ) : (
             <div className="p-4 text-center">
-              <Upload
+              <UploadIcon
                 className={twMerge(
                   'text-gray-400 mx-auto',
                   isSmall ? 'w-5 h-5' : 'w-8 h-8',
diff --git a/src/components/LibrariesBrowser.tsx b/src/components/LibrariesBrowser.tsx
index 724d65478..2ce5b985b 100644
--- a/src/components/LibrariesBrowser.tsx
+++ b/src/components/LibrariesBrowser.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { CaretDown, Check } from '@phosphor-icons/react'
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react'
 import { type Framework } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import LibraryGridCard from '~/components/LibraryGridCard'
@@ -158,7 +158,7 @@ export function LibrariesBrowser({
                   ? activeFrameworkOption.label
                   : 'All frameworks'}
               </span>
-              <CaretDown className="size-3 text-text-secondary" />
+              <CaretDownIcon className="size-3 text-text-secondary" />
             </button>
           </DropdownTrigger>
           <DropdownContent
@@ -169,7 +169,7 @@ export function LibrariesBrowser({
               <span className="flex-1">All frameworks</span>
               <span className="text-text-muted">{ordered.length}</span>
               {activeFramework === null ? (
-                <Check className="size-4 text-text-primary" />
+                <CheckIcon className="size-4 text-text-primary" />
               ) : null}
             </DropdownItem>
             <DropdownSeparator />
@@ -189,7 +189,7 @@ export function LibrariesBrowser({
                   {frameworkCounts[framework.value] ?? 0}
                 </span>
                 {activeFramework === framework.value ? (
-                  <Check className="size-4 text-text-primary" />
+                  <CheckIcon className="size-4 text-text-primary" />
                 ) : null}
               </DropdownItem>
             ))}
diff --git a/src/components/LibrariesOverlay.tsx b/src/components/LibrariesOverlay.tsx
index 49d96d37f..6678ee8f9 100644
--- a/src/components/LibrariesOverlay.tsx
+++ b/src/components/LibrariesOverlay.tsx
@@ -1,5 +1,5 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { ArrowLeft, X } from '@phosphor-icons/react'
+import { ArrowLeftIcon, XIcon } from '@phosphor-icons/react'
 import { LibrariesBrowser } from '~/components/LibrariesBrowser'
 
 export function LibrariesOverlay({
@@ -38,7 +38,7 @@ export function LibrariesOverlay({
               onClick={onBack}
               className="fixed left-4 top-4 z-[112] inline-flex h-11 items-center gap-2 rounded-xl bg-background-subtle px-3 font-ds-display text-ds-body-md font-medium text-text-primary transition-colors hover:bg-surface-state-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus min-[900px]:hidden"
             >
-              <ArrowLeft className="size-5" />
+              <ArrowLeftIcon className="size-5" />
               Back to menu
             </button>
           ) : null}
@@ -46,7 +46,7 @@ export function LibrariesOverlay({
             aria-label="Close"
             className="fixed right-4 top-4 z-[112] flex size-11 items-center justify-center rounded-full corner-squircle text-text-secondary transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/10 min-[900px]:right-6 min-[900px]:top-6 min-[900px]:size-14"
           >
-            <X className="size-7 min-[900px]:size-10" weight="light" />
+            <XIcon className="size-7 min-[900px]:size-10" weight="light" />
           </DialogPrimitive.Close>
           <LibrariesBrowser variant="dialog" />
         </DialogPrimitive.Content>
diff --git a/src/components/LibraryDownloadsMicro.tsx b/src/components/LibraryDownloadsMicro.tsx
index 081f2e01d..f7a07e033 100644
--- a/src/components/LibraryDownloadsMicro.tsx
+++ b/src/components/LibraryDownloadsMicro.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { twMerge } from 'tailwind-merge'
-import { Download, Star, TrendUp } from '@phosphor-icons/react'
+import { DownloadIcon, StarIcon, TrendUpIcon } from '@phosphor-icons/react'
 import type { LibrarySlim } from '~/libraries'
 import { ossStatsQuery, recentDownloadsQuery } from '~/queries/stats'
 import type { RecentDownloadStats } from '~/utils/stats.types'
@@ -360,14 +360,14 @@ export function LibraryDownloadsMicro({
   const items: Array<StatItem> = [
     {
       key: 'total',
-      icon: <TrendUp weight="regular" />,
+      icon: <TrendUpIcon weight="regular" />,
       value: hasTotalDownloadCount ? formatCompact(totalDownloadCount) : '',
       placeholder: '000.0M',
       label: 'Total Downloads',
     },
     {
       key: 'weekly',
-      icon: <Download weight="regular" />,
+      icon: <DownloadIcon weight="regular" />,
       value: hasNpmDownloads ? (totalDownloads ?? 0).toLocaleString() : '',
       placeholder: '000,000,000',
       label: formattedLabel,
@@ -377,7 +377,7 @@ export function LibraryDownloadsMicro({
     },
     {
       key: 'stars',
-      icon: <Star weight="regular" />,
+      icon: <StarIcon weight="regular" />,
       value: hasStarCount ? starCount.toLocaleString() : '',
       placeholder: '000,000',
       label: 'GitHub Stars',
diff --git a/src/components/LibraryGridCard.tsx b/src/components/LibraryGridCard.tsx
index a99cad3dc..bf41dfe52 100644
--- a/src/components/LibraryGridCard.tsx
+++ b/src/components/LibraryGridCard.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { ArrowRight, CaretRight } from '@phosphor-icons/react'
+import { ArrowRightIcon, CaretRightIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import type { PublicLibrarySlim } from '~/libraries'
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
@@ -84,11 +84,11 @@ export default function LibraryGridCard({
         {/* Persistent affordance that the card is clickable; sm+ only. */}
         <span className="hidden shrink-0 translate-y-0.5 items-center gap-1 rounded-[11px] corner-squircle bg-black/[0.03] px-3 py-1.5 font-ds-display text-sm font-bold text-text-secondary opacity-70 group-hover:text-text-primary group-hover:opacity-100 group-focus-visible:text-text-primary group-focus-visible:opacity-100 dark:bg-white/5 sm:inline-flex">
           Docs
-          <ArrowRight className="size-3.5" />
+          <ArrowRightIcon className="size-3.5" />
         </span>
       </div>
       {/* Compact-row caret (mobile only); the full card uses the Docs pill above. */}
-      <CaretRight className="size-5 shrink-0 text-text-muted sm:hidden" />
+      <CaretRightIcon className="size-5 shrink-0 text-text-muted sm:hidden" />
       <p className="hidden font-sans text-ds-body-md text-text-secondary sm:line-clamp-2 sm:block">
         {copy}
       </p>
diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
index 83377219f..25d10194a 100644
--- a/src/components/LibraryLayout.tsx
+++ b/src/components/LibraryLayout.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react'
-import { CaretLeft, CaretRight, List, X } from '@phosphor-icons/react'
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  ListIcon,
+  XIcon,
+} from '@phosphor-icons/react'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'
@@ -583,7 +588,7 @@ function DocNavigationCard({
   const children =
     direction === 'previous' ? (
       <>
-        <CaretLeft className="w-3 h-3 sm:w-4 sm:h-4" />
+        <CaretLeftIcon className="w-3 h-3 sm:w-4 sm:h-4" />
         <div className="flex flex-col">
           <span className="hidden sm:block text-[10px] uppercase tracking-wider opacity-60 mb-0.5">
             Previous
@@ -601,7 +606,7 @@ function DocNavigationCard({
             {item.label}
           </span>
         </div>
-        <CaretRight className="h-3 w-3 text-text-primary sm:h-4 sm:w-4" />
+        <CaretRightIcon className="h-3 w-3 text-text-primary sm:h-4 sm:w-4" />
       </>
     )
 
@@ -1174,7 +1179,7 @@ export function LibraryLayout({
             className="p-1 rounded-md hover:bg-gray-500/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current cursor-pointer"
             onClick={closeMobileMenu}
           >
-            <X className="w-5 h-5" />
+            <XIcon className="w-5 h-5" />
           </button>
         </div>
         <div className="flex flex-col gap-4 p-4 text-lg">
@@ -1344,8 +1349,8 @@ export function LibraryLayout({
           data-docs-mobile-trigger
           className="min-[900px]:hidden flex items-center gap-1.5 shrink-0 px-3 border-r border-gray-500/20 text-slate-600 dark:text-slate-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
         >
-          <List className="w-4 h-4" data-docs-mobile-closed-icon />
-          <X className="w-4 h-4" data-docs-mobile-open-icon />
+          <ListIcon className="w-4 h-4" data-docs-mobile-closed-icon />
+          <XIcon className="w-4 h-4" data-docs-mobile-open-icon />
           <span className="text-xs font-medium max-[479.98px]:sr-only">
             Menu
           </span>
@@ -1367,7 +1372,7 @@ export function LibraryLayout({
           data-docs-menu-trigger
           className="hidden min-[900px]:flex xl:hidden items-center gap-1 shrink-0 px-2 border-r border-gray-500/20 text-xs font-medium text-slate-600 dark:text-slate-300 min-[1120px]:gap-1.5 min-[1120px]:px-3 min-[1120px]:text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
         >
-          <List className="w-4 h-4" />
+          <ListIcon className="w-4 h-4" />
           <span className="text-xs font-medium">Menu</span>
         </button>
         <div className="relative hidden min-w-0 flex-1 items-stretch md:flex">
diff --git a/src/components/LibraryStatsSection.tsx b/src/components/LibraryStatsSection.tsx
index f2eb6581c..b032e2bb5 100644
--- a/src/components/LibraryStatsSection.tsx
+++ b/src/components/LibraryStatsSection.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { Download, Star } from '@phosphor-icons/react'
+import { DownloadIcon, StarIcon } from '@phosphor-icons/react'
 import type * as React from 'react'
 import type { Library } from '~/libraries'
 import { ossStatsQuery } from '~/queries/stats'
@@ -59,13 +59,13 @@ export function LibraryStatsSection({ library }: LibraryStatsSectionProps) {
       <div className="flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:gap-6">
         <LibraryPlainStat
           href="https://www.npmjs.com/org/tanstack"
-          icon={<Download size={18} aria-hidden="true" />}
+          icon={<DownloadIcon size={18} aria-hidden="true" />}
           label="NPM Downloads"
           value={stats?.npm?.totalDownloads}
         />
         <LibraryPlainStat
           href={`https://github.com/${library.repo}`}
-          icon={<Star size={18} aria-hidden="true" />}
+          icon={<StarIcon size={18} aria-hidden="true" />}
           label="GitHub Stars"
           value={stats?.github?.starCount}
         />
diff --git a/src/components/LibraryTestimonials.tsx b/src/components/LibraryTestimonials.tsx
index 607786d3b..f0f3ed4d4 100644
--- a/src/components/LibraryTestimonials.tsx
+++ b/src/components/LibraryTestimonials.tsx
@@ -1,4 +1,4 @@
-import { Star } from '@phosphor-icons/react'
+import { StarIcon } from '@phosphor-icons/react'
 import type { Testimonial } from '~/libraries/types'
 import { Card } from './Card'
 
@@ -54,7 +54,7 @@ function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
     <Card className="shrink-0 w-72 md:w-80 p-5">
       <div className="flex items-start gap-1 mb-3">
         {[...Array(5)].map((_, j) => (
-          <Star
+          <StarIcon
             key={j}
             className="w-3.5 h-3.5 text-yellow-500 fill-yellow-500"
           />
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index fb7356d06..f04bf8917 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from '@phosphor-icons/react'
+import { XIcon } from '@phosphor-icons/react'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
 import { authClient } from '~/auth/client'
@@ -51,7 +51,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
               Sign in to continue
             </DialogPrimitive.Title>
             <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
-              <X className="w-5 h-5 text-gray-500" />
+              <XIcon className="w-5 h-5 text-gray-500" />
             </DialogPrimitive.Close>
           </div>
 
diff --git a/src/components/MegaMenuItem.tsx b/src/components/MegaMenuItem.tsx
index 3fdc4cb16..a252e0df9 100644
--- a/src/components/MegaMenuItem.tsx
+++ b/src/components/MegaMenuItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { ArrowSquareOut, IconContext } from '@phosphor-icons/react'
+import { ArrowSquareOutIcon, IconContext } from '@phosphor-icons/react'
 
 type IconComponent = React.ComponentType<{ className?: string }>
 
@@ -91,7 +91,7 @@ export function MegaMenuItem({
             </span>
           ) : null}
           {external && !to.startsWith('mailto:') ? (
-            <ArrowSquareOut className="h-3 w-3 text-text-muted transition-colors group-hover/mmi:text-text-secondary" />
+            <ArrowSquareOutIcon className="h-3 w-3 text-text-muted transition-colors group-hover/mmi:text-text-secondary" />
           ) : null}
         </span>
         {description ? (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 77312b85e..aba068c51 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -12,26 +12,26 @@ import { NavbarCartButton } from './NavbarCartButton'
 import { MegaMenuItem } from './MegaMenuItem'
 import { Link, useLocation } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  ArrowLeft,
-  ArrowSquareOut,
-  Briefcase,
-  Code,
-  GridFour,
-  Hammer,
-  Heart,
-  Infinity as InfinityIcon,
-  Lifebuoy,
-  Mailbox,
-  List as Menu,
-  MagnifyingGlass,
-  ShieldCheck,
-  ShoppingBag,
-  SignIn,
-  Sparkle as Sparkles,
-  TrendUp as TrendingUp,
-  Users,
-  X,
+  ArrowRightIcon,
+  ArrowLeftIcon,
+  ArrowSquareOutIcon,
+  BriefcaseIcon,
+  CodeIcon,
+  GridFourIcon,
+  HammerIcon,
+  HeartIcon,
+  InfinityIcon,
+  LifebuoyIcon,
+  MailboxIcon,
+  ListIcon as Menu,
+  MagnifyingGlassIcon,
+  ShieldCheckIcon,
+  ShoppingBagIcon,
+  SignInIcon,
+  SparkleIcon as Sparkles,
+  TrendUpIcon as TrendingUp,
+  UsersIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 import { ThemeToggle } from './ThemeToggle'
 import { AiDockButton, SearchButton } from './SearchButton'
@@ -165,7 +165,7 @@ const NAV_GROUPS = [
             label: 'Workshops',
             to: '/workshops',
             description: 'Live sessions from the maintainers.',
-            icon: Users,
+            icon: UsersIcon,
           },
           {
             label: 'Release Notes',
@@ -205,13 +205,13 @@ const NAV_GROUPS = [
             label: 'Maintainers',
             to: '/maintainers',
             description: 'Meet the people maintaining the stack.',
-            icon: Code,
+            icon: CodeIcon,
           },
           {
             label: 'Contributors',
             to: '/maintainers',
             description: 'Core, library, and community contributors.',
-            icon: Users,
+            icon: UsersIcon,
           },
           {
             label: 'Showcase',
@@ -235,7 +235,7 @@ const NAV_GROUPS = [
             to: '/builder',
             description: 'Generate TanStack app starters.',
             badge: 'Alpha',
-            icon: Hammer,
+            icon: HammerIcon,
           },
           {
             label: 'Stats',
@@ -264,32 +264,32 @@ const NAV_GROUPS = [
             label: 'Support Overview',
             to: '/support',
             description: 'Find the right support path.',
-            icon: Lifebuoy,
+            icon: LifebuoyIcon,
           },
           {
             label: 'Partners',
             to: '/partners',
             description: 'Companies supporting TanStack.',
-            icon: Heart,
+            icon: HeartIcon,
           },
           {
             label: 'OSS Sponsors',
             to: '/',
             hash: 'sponsors',
             description: 'Sponsors keeping TanStack open source.',
-            icon: ShieldCheck,
+            icon: ShieldCheckIcon,
           },
           {
             label: 'Enterprise Support',
             to: '/paid-support',
             description: 'Private consulting and expert support.',
-            icon: Briefcase,
+            icon: BriefcaseIcon,
           },
           {
             label: 'Contact',
             to: 'mailto:support@tanstack.com',
             description: 'Get in touch with the TanStack team.',
-            icon: Mailbox,
+            icon: MailboxIcon,
           },
         ],
       },
@@ -300,7 +300,7 @@ const NAV_GROUPS = [
             label: 'Ethos',
             to: '/ethos',
             description: 'How we approach open source.',
-            icon: ShieldCheck,
+            icon: ShieldCheckIcon,
           },
           {
             label: 'Tenets',
@@ -312,7 +312,7 @@ const NAV_GROUPS = [
             label: 'Design System',
             to: '/ds',
             description: 'Logos, tokens, and UI components.',
-            icon: GridFour,
+            icon: GridFourIcon,
           },
         ],
       },
@@ -325,7 +325,7 @@ const NAV_GROUPS = [
         analyticsPlacement: 'navbar',
         label: 'Partnership Inquiry',
         to: PARTNER_INQUIRY_HREF,
-        icon: Mailbox,
+        icon: MailboxIcon,
       },
     },
   },
@@ -563,7 +563,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       )}
     >
       <span className="hidden min-[430px]:inline">Log In</span>
-      <SignIn className="size-4" weight="bold" />
+      <SignInIcon className="size-4" weight="bold" />
     </Link>
   )
   const renderAuthControls = (className?: string) =>
@@ -658,7 +658,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           onClick={() => setMobileMenuOpen((prev) => !prev)}
         >
           {mobileMenuOpen ? (
-            <X className="h-5 w-5" />
+            <XIcon className="h-5 w-5" />
           ) : (
             <Menu className="h-5 w-5" />
           )}
@@ -900,7 +900,7 @@ function MobileNavigation({
               onClick={() => openUtility('search')}
               className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-1 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
             >
-              <MagnifyingGlass className="size-8 shrink-0" />
+              <MagnifyingGlassIcon className="size-8 shrink-0" />
               Search
             </button>
             <button
@@ -918,7 +918,7 @@ function MobileNavigation({
               onClick={onNavigate}
               className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-1 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
             >
-              <SignIn className="size-8 shrink-0" />
+              <SignInIcon className="size-8 shrink-0" />
               Sign In
             </Link>
           </div>
@@ -931,7 +931,7 @@ function MobileNavigation({
             onClick={onBack}
             className="mb-4 inline-flex items-center gap-2 rounded-xl bg-[#171717] px-3 py-2 font-ds-display text-ds-body-lg font-medium text-white transition-colors hover:bg-[#262626] focus-visible:bg-[#262626] focus-visible:outline-none"
           >
-            <ArrowLeft className="size-5" />
+            <ArrowLeftIcon className="size-5" />
             Back
           </button>
           {activeGroup ? (
@@ -1064,14 +1064,14 @@ function LibrariesMenuContent({
           'min-[1120px]:gap-[7px] min-[1120px]:rounded-[10px] min-[1120px]:px-[11px] min-[1120px]:py-2.5 min-[1120px]:text-[14px]',
       )}
     >
-      <GridFour
+      <GridFourIcon
         className={twMerge(
           'size-4',
           variant === 'desktop' && 'min-[1120px]:size-[19px]',
         )}
       />
       Browse all libraries
-      <ArrowRight
+      <ArrowRightIcon
         className={twMerge(
           'size-3.5 transition-transform group-hover/all:translate-x-0.5',
           variant === 'desktop' && 'min-[1120px]:size-[17px]',
@@ -1468,7 +1468,7 @@ function MerchMenuContent({
         )}
       >
         View all
-        <ArrowRight className="size-3.5" />
+        <ArrowRightIcon className="size-3.5" />
       </Link>
     </div>
   )
@@ -1503,7 +1503,7 @@ function MerchProductLink({
           />
         ) : (
           <span className="flex h-full w-full items-center justify-center text-text-muted">
-            <ShoppingBag className="size-7" />
+            <ShoppingBagIcon className="size-7" />
           </span>
         )}
       </div>
@@ -1544,7 +1544,7 @@ function MenuRail({
     <>
       {rail.item.label}
       {external && !rail.item.to.startsWith('mailto:') ? (
-        <ArrowSquareOut className="size-3" />
+        <ArrowSquareOutIcon className="size-3" />
       ) : null}
     </>
   )
diff --git a/src/components/NavbarAuthControls.tsx b/src/components/NavbarAuthControls.tsx
index ef3b652c6..c419a1f9c 100644
--- a/src/components/NavbarAuthControls.tsx
+++ b/src/components/NavbarAuthControls.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SignIn } from '@phosphor-icons/react'
+import { SignInIcon } from '@phosphor-icons/react'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -47,7 +47,7 @@ export function NavbarAuthControls({ className }: NavbarAuthControlsProps) {
       )}
     >
       <span className="hidden min-[430px]:inline">Log In</span>
-      <SignIn className="size-4" weight="bold" />
+      <SignInIcon className="size-4" weight="bold" />
     </Link>
   )
 
diff --git a/src/components/NavbarCartButton.tsx b/src/components/NavbarCartButton.tsx
index 1ac831273..c7fbe19dd 100644
--- a/src/components/NavbarCartButton.tsx
+++ b/src/components/NavbarCartButton.tsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from '@tanstack/react-router'
-import { ShoppingCart } from '@phosphor-icons/react'
+import { ShoppingCartIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useCart } from '~/hooks/useCart'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
@@ -57,7 +57,7 @@ export function NavbarCartButton() {
         aria-label={label}
         className={buttonClasses}
       >
-        <ShoppingCart className="size-[18px]" weight="bold" />
+        <ShoppingCartIcon className="size-[18px]" weight="bold" />
         {badge}
       </button>
     )
@@ -66,7 +66,7 @@ export function NavbarCartButton() {
   // Everywhere else: navigate to the cart page
   return (
     <Link to="/shop/cart" aria-label={label} className={buttonClasses}>
-      <ShoppingCart className="size-[18px]" weight="bold" />
+      <ShoppingCartIcon className="size-[18px]" weight="bold" />
       {badge}
     </Link>
   )
diff --git a/src/components/NewsletterSignup.tsx b/src/components/NewsletterSignup.tsx
index a7e24e715..26fd70b83 100644
--- a/src/components/NewsletterSignup.tsx
+++ b/src/components/NewsletterSignup.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Check, SignIn, Envelope } from '@phosphor-icons/react'
+import { CheckIcon, SignInIcon, EnvelopeIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
 import { useLoginModal } from '~/contexts/LoginModalContext'
@@ -80,7 +80,7 @@ export function NewsletterSignup({
           successClassName,
         )}
       >
-        <Check className="h-3.5 w-3.5" />
+        <CheckIcon className="h-3.5 w-3.5" />
         You're subscribed
       </p>
     )
@@ -95,9 +95,9 @@ export function NewsletterSignup({
         className={twMerge('w-full', buttonClassName)}
       >
         {user ? (
-          <Envelope className="h-4 w-4" />
+          <EnvelopeIcon className="h-4 w-4" />
         ) : (
-          <SignIn className="h-4 w-4" />
+          <SignInIcon className="h-4 w-4" />
         )}
         {isPending
           ? 'Subscribing...'
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index b64ce4d9e..34e31c8c0 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { Link, useRouterState } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  BookOpen,
-  Stack,
-  Compass,
-  Question,
-  House,
-  Lifebuoy,
-  Newspaper,
-  ShoppingBag,
-  Sparkle,
+  ArrowRightIcon,
+  BookOpenIcon,
+  StackIcon,
+  CompassIcon,
+  QuestionIcon,
+  HouseIcon,
+  LifebuoyIcon,
+  NewspaperIcon,
+  ShoppingBagIcon,
+  SparkleIcon,
   type Icon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
@@ -47,7 +47,7 @@ const fallbackDestinations: NotFoundDestination[] = [
     label: 'All libraries',
     description: 'Browse TanStack Query, Router, Table, Start, and more.',
     href: '/libraries',
-    icon: Stack,
+    icon: StackIcon,
     accent: 'emerald',
     score: 1,
   },
@@ -56,7 +56,7 @@ const fallbackDestinations: NotFoundDestination[] = [
     label: 'Blog',
     description: 'Read release notes, deep dives, and project updates.',
     href: '/blog',
-    icon: Newspaper,
+    icon: NewspaperIcon,
     accent: 'cyan',
     score: 1,
   },
@@ -65,7 +65,7 @@ const fallbackDestinations: NotFoundDestination[] = [
     label: 'Support',
     description: 'Find paid support, community help, and project resources.',
     href: '/support',
-    icon: Lifebuoy,
+    icon: LifebuoyIcon,
     accent: 'amber',
     score: 1,
   },
@@ -77,7 +77,7 @@ const sectionDestinations: NotFoundDestination[] = [
     label: 'Shop',
     description: 'Find TanStack merch and products.',
     href: '/shop',
-    icon: ShoppingBag,
+    icon: ShoppingBagIcon,
     accent: 'rose',
     score: 0,
   },
@@ -86,7 +86,7 @@ const sectionDestinations: NotFoundDestination[] = [
     label: 'Showcase',
     description: 'Explore projects built with TanStack.',
     href: '/showcase',
-    icon: Sparkle,
+    icon: SparkleIcon,
     accent: 'cyan',
     score: 0,
   },
@@ -95,7 +95,7 @@ const sectionDestinations: NotFoundDestination[] = [
     label: 'Explore',
     description: 'Sail through the TanStack ecosystem.',
     href: '/explore',
-    icon: Compass,
+    icon: CompassIcon,
     accent: 'blue',
     score: 0,
   },
@@ -176,7 +176,7 @@ function getLibraryDestinations(pathname: string) {
           label: library.name,
           description: library.tagline,
           href: library.to,
-          icon: BookOpen,
+          icon: BookOpenIcon,
           accent: 'emerald',
           score: score + 2,
         })
@@ -188,7 +188,7 @@ function getLibraryDestinations(pathname: string) {
           label: `${library.name.replace(/^TanStack\s+/i, '')} docs`,
           description: 'Open the current docs for this project.',
           href: `/${library.id}/latest/docs/${library.defaultDocs ?? 'overview'}`,
-          icon: BookOpen,
+          icon: BookOpenIcon,
           accent: 'cyan',
           score: score + 1,
         })
@@ -249,7 +249,7 @@ function getSectionDestinations(pathname: string) {
     label: 'Docs',
     description: 'Pick a library, then jump into its current documentation.',
     href: '/libraries',
-    icon: BookOpen,
+    icon: BookOpenIcon,
     accent: 'emerald',
     score: 0,
   }
@@ -259,7 +259,7 @@ function getSectionDestinations(pathname: string) {
     label: 'Support',
     description: 'Get help when the missing page was supposed to unblock you.',
     href: '/support',
-    icon: Question,
+    icon: QuestionIcon,
     accent: 'amber',
     score: 0,
   }
@@ -319,7 +319,7 @@ function DestinationCard({
           {destination.description}
         </span>
       </span>
-      <ArrowRight className="mt-1 h-4 w-4 shrink-0 opacity-50 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100" />
+      <ArrowRightIcon className="mt-1 h-4 w-4 shrink-0 opacity-50 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100" />
     </Link>
   )
 }
@@ -340,7 +340,7 @@ export function NotFound({ children }: { children?: React.ReactNode }) {
       <div className="mx-auto grid w-full max-w-6xl gap-8 px-4 py-10 md:px-8 lg:grid-cols-[minmax(0,0.95fr)_minmax(360px,1.05fr)] lg:items-center lg:py-16">
         <section className="space-y-7 lg:self-start">
           <div className="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-semibold uppercase text-gray-500 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
-            <Compass className="h-3.5 w-3.5" />
+            <CompassIcon className="h-3.5 w-3.5" />
             404 Not Found
           </div>
 
@@ -366,15 +366,15 @@ export function NotFound({ children }: { children?: React.ReactNode }) {
 
           <div className="flex flex-wrap gap-3">
             <Button onClick={() => openLibraries()} color="emerald">
-              <Stack className="h-4 w-4" />
+              <StackIcon className="h-4 w-4" />
               Browse libraries
             </Button>
             <Button as={Link} to="/support" variant="ghost">
-              <Lifebuoy className="h-4 w-4" />
+              <LifebuoyIcon className="h-4 w-4" />
               Support
             </Button>
             <Button as={Link} to="/" variant="ghost">
-              <House className="h-4 w-4" />
+              <HouseIcon className="h-4 w-4" />
               Home
             </Button>
           </div>
diff --git a/src/components/NotesModerationList.tsx b/src/components/NotesModerationList.tsx
index 2a304e3ce..1db7da72f 100644
--- a/src/components/NotesModerationList.tsx
+++ b/src/components/NotesModerationList.tsx
@@ -14,7 +14,7 @@ import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/types'
 import { calculatePoints } from '~/utils/docFeedback.shared'
-import { ArrowSquareOut, Warning } from '@phosphor-icons/react'
+import { ArrowSquareOutIcon, WarningIcon } from '@phosphor-icons/react'
 import { Badge } from '~/ui'
 
 interface NotesModerationListProps {
@@ -186,7 +186,7 @@ export function NotesModerationList({
                     </span>
                     {feedback.isDetached && (
                       <div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400 mt-1">
-                        <Warning />
+                        <WarningIcon />
                         Detached
                       </div>
                     )}
@@ -218,7 +218,7 @@ export function NotesModerationList({
                       rel="noopener noreferrer"
                       className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
                     >
-                      <ArrowSquareOut className="text-[10px]" />
+                      <ArrowSquareOutIcon className="text-[10px]" />
                       View Doc
                     </Link>
                   </TableCell>
diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx
index c07aa20eb..85e3d6835 100644
--- a/src/components/OpenSourceStats.tsx
+++ b/src/components/OpenSourceStats.tsx
@@ -1,5 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
-import { CalendarDots, DownloadSimple, Star } from '@phosphor-icons/react'
+import {
+  CalendarDotsIcon,
+  DownloadSimpleIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
 import { type Library } from '~/libraries'
 import {
   homepageNpmStatsSummaryQuery,
@@ -97,7 +101,7 @@ export default function OssStats({
   if (npmLoading || hasNpmDownloads) {
     items.push({
       key: 'total',
-      icon: <DownloadSimple weight="regular" />,
+      icon: <DownloadSimpleIcon weight="regular" />,
       value: hasNpmDownloads ? formatCompact(npmDownloads) : '',
       placeholder: '00.0B',
       label: 'Total Downloads',
@@ -107,7 +111,7 @@ export default function OssStats({
   if (weeklyLoading || hasWeeklyDownloads) {
     items.push({
       key: 'weekly',
-      icon: <CalendarDots weight="regular" />,
+      icon: <CalendarDotsIcon weight="regular" />,
       value: hasWeeklyDownloads ? weeklyDownloads.toLocaleString() : '',
       placeholder: '00,000,000',
       label: 'Weekly Downloads',
@@ -120,7 +124,7 @@ export default function OssStats({
   if (loading || hasStarCount) {
     items.push({
       key: 'stars',
-      icon: <Star weight="regular" />,
+      icon: <StarIcon weight="regular" />,
       value: hasStarCount ? starCount.toLocaleString() : '',
       placeholder: '000,000',
       label: 'GitHub Stars',
diff --git a/src/components/OssSponsorsSection.tsx b/src/components/OssSponsorsSection.tsx
index 82a12932e..e679ca468 100644
--- a/src/components/OssSponsorsSection.tsx
+++ b/src/components/OssSponsorsSection.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight } from '@phosphor-icons/react'
+import { ArrowRightIcon } from '@phosphor-icons/react'
 import { getOssSponsors } from '~/utils/sponsors.functions'
 import { Button } from '~/ui'
 import OssSponsors from './OssSponsors'
@@ -54,7 +54,7 @@ export function OssSponsorsSection({
           <div className="flex justify-center">
             <Button as="a" href="https://github.com/sponsors/tannerlinsley">
               Become a Sponsor
-              <ArrowRight className="w-4 h-4" />
+              <ArrowRightIcon className="w-4 h-4" />
             </Button>
           </div>
         ) : null}
diff --git a/src/components/PaginationControls.tsx b/src/components/PaginationControls.tsx
index ffce37c47..43a0918ee 100644
--- a/src/components/PaginationControls.tsx
+++ b/src/components/PaginationControls.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CaretLeft, CaretRight } from '@phosphor-icons/react'
+import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 
 interface PaginationControlsProps {
   currentPage: number
@@ -145,7 +145,7 @@ export function PaginationControls({
             disabled={!canGoPrevious}
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
           >
-            <CaretLeft className="w-2.5 h-2.5" />
+            <CaretLeftIcon className="w-2.5 h-2.5" />
             <span>Prev</span>
           </button>
 
@@ -188,7 +188,7 @@ export function PaginationControls({
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
           >
             <span>Next</span>
-            <CaretRight className="w-2.5 h-2.5" />
+            <CaretRightIcon className="w-2.5 h-2.5" />
           </button>
         </div>
       </div>
diff --git a/src/components/PartnersSection.tsx b/src/components/PartnersSection.tsx
index 76544efe6..936e6ead8 100644
--- a/src/components/PartnersSection.tsx
+++ b/src/components/PartnersSection.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { PartnersGrid } from './PartnersGrid'
 import { PartnershipCallout } from './PartnershipCallout'
 import { Link } from '@tanstack/react-router'
-import { ArrowRight } from '@phosphor-icons/react'
+import { ArrowRightIcon } from '@phosphor-icons/react'
 import { Button } from '~/components/ds/ui'
 
 type PartnersSectionProps = {
@@ -25,7 +25,7 @@ export function PartnersSection({
             <Link to="/partners" search={{ status: 'inactive' }}>
               <Button as="span" variant="subtle-link" color="gray">
                 View Previous Partners
-                <ArrowRight />
+                <ArrowRightIcon />
               </Button>
             </Link>
           </div>
diff --git a/src/components/PartnersSponsorsSection.tsx b/src/components/PartnersSponsorsSection.tsx
index 1cc4acd6c..73d3f786a 100644
--- a/src/components/PartnersSponsorsSection.tsx
+++ b/src/components/PartnersSponsorsSection.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight } from '@phosphor-icons/react'
+import { ArrowRightIcon } from '@phosphor-icons/react'
 import { Button } from '~/components/ds/ui'
 import { OssSponsorsWithQuery } from '~/components/OssSponsorsSection'
 import { PartnersGrid, TierBand } from '~/components/PartnersGrid'
@@ -35,7 +35,7 @@ function OssSponsorsBand() {
         <div className="mt-6 flex justify-center">
           <Button as="a" href="https://github.com/sponsors/tannerlinsley">
             Become a Sponsor
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRightIcon className="h-4 w-4" />
           </Button>
         </div>
       </div>
@@ -64,7 +64,7 @@ export function PartnersSponsorsContent({
         <Link to="/partners" search={{ status: 'inactive' }}>
           <Button as="span" variant="subtle-link" color="gray">
             View Previous Partners
-            <ArrowRight />
+            <ArrowRightIcon />
           </Button>
         </Link>
       </div>
diff --git a/src/components/PartnershipCallout.tsx b/src/components/PartnershipCallout.tsx
index 59988f0e3..ae826c4f7 100644
--- a/src/components/PartnershipCallout.tsx
+++ b/src/components/PartnershipCallout.tsx
@@ -1,4 +1,4 @@
-import { HandHeart as HeartHandshake } from '@phosphor-icons/react'
+import { HandHeartIcon as HeartHandshake } from '@phosphor-icons/react'
 import { Card } from './Card'
 import {
   PARTNER_INQUIRY_HREF,
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index 69ef72edd..9bc1be65b 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react'
-import { Command, MagnifyingGlass, Sparkle } from '@phosphor-icons/react'
+import {
+  CommandIcon,
+  MagnifyingGlassIcon,
+  SparkleIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { Button, Tooltip } from '~/ui'
 import { useSearchContext } from '~/contexts/SearchContext'
@@ -33,7 +37,7 @@ export function SearchButton({
         className,
       )}
     >
-      <MagnifyingGlass
+      <MagnifyingGlassIcon
         className={iconOnly ? 'size-[18px]' : 'size-3.5'}
         weight={iconOnly ? 'bold' : undefined}
       />
@@ -43,7 +47,7 @@ export function SearchButton({
         <>
           <span>Search...</span>
           <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
-            <Command className="w-2.5 h-2.5" /> K
+            <CommandIcon className="w-2.5 h-2.5" /> K
           </div>
         </>
       )}
@@ -121,7 +125,7 @@ export function AiDockButton({ className }: { className?: string }) {
           className,
         )}
       >
-        <Sparkle aria-hidden="true" className="size-[18px]" weight="bold" />
+        <SparkleIcon aria-hidden="true" className="size-[18px]" weight="bold" />
         <span className="sr-only">Ask AI</span>
       </Button>
     </Tooltip>
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index 92751015a..ecb9a3861 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -19,21 +19,21 @@ import {
 } from 'react-instantsearch'
 import { liteClient } from 'algoliasearch/lite'
 import {
-  X,
-  MagnifyingGlass,
-  MagnifyingGlassMinus,
-  CaretDown,
-  ArrowElbowDownLeft,
-  ArrowUp,
-  Check,
-  Copy,
-  ArrowSquareOut,
-  ClockCounterClockwise,
-  ChatCenteredDots,
-  ThumbsDown,
-  ThumbsUp,
-  ArrowsOutSimple,
-  ArrowsInSimple,
+  XIcon,
+  MagnifyingGlassIcon,
+  MagnifyingGlassMinusIcon,
+  CaretDownIcon,
+  ArrowElbowDownLeftIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  CopyIcon,
+  ArrowSquareOutIcon,
+  ClockCounterClockwiseIcon,
+  ChatCenteredDotsIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+  ArrowsOutSimpleIcon,
+  ArrowsInSimpleIcon,
 } from '@phosphor-icons/react'
 import {
   DefaultKapaApiService,
@@ -1196,9 +1196,9 @@ function DockMaximizeButton({
       )}
     >
       {isMaximized ? (
-        <ArrowsInSimple className="w-3.5 h-3.5" />
+        <ArrowsInSimpleIcon className="w-3.5 h-3.5" />
       ) : (
-        <ArrowsOutSimple className="w-3.5 h-3.5" />
+        <ArrowsOutSimpleIcon className="w-3.5 h-3.5" />
       )}
       <ChatControlTooltip>{label}</ChatControlTooltip>
     </button>
@@ -1268,9 +1268,9 @@ function CopyChatButton({
       )}
     >
       {copied ? (
-        <Check className="w-3.5 h-3.5" />
+        <CheckIcon className="w-3.5 h-3.5" />
       ) : (
-        <Copy className="w-3 h-3" />
+        <CopyIcon className="w-3 h-3" />
       )}
       {compact ? <ChatControlTooltip>{label}</ChatControlTooltip> : label}
     </button>
@@ -1321,7 +1321,7 @@ function KapaHistoryButton({
               : 'gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
           )}
         >
-          <ClockCounterClockwise className="w-3 h-3" />
+          <ClockCounterClockwiseIcon className="w-3 h-3" />
           {compact ? (
             <ChatControlTooltip>Chat history</ChatControlTooltip>
           ) : (
@@ -1362,7 +1362,7 @@ function KapaHistoryButton({
                 </span>
               </span>
               {isActive ? (
-                <Check className="mt-0.5 w-3 h-3 shrink-0 text-green-500" />
+                <CheckIcon className="mt-0.5 w-3 h-3 shrink-0 text-green-500" />
               ) : null}
             </DropdownItem>
           )
@@ -1392,9 +1392,9 @@ function MessageActionButton({
   }
 
   const iconEl = flashed ? (
-    <Check className="w-3 h-3 text-green-500" />
+    <CheckIcon className="w-3 h-3 text-green-500" />
   ) : (
-    <Copy className="w-3 h-3" />
+    <CopyIcon className="w-3 h-3" />
   )
 
   return (
@@ -1693,7 +1693,7 @@ function KapaAnswer({
                   >
                     <SourceScopeBadges {...sourceScope} />
                     {!hasSourceScope ? (
-                      <ArrowSquareOut className="w-2.5 h-2.5 flex-none opacity-60" />
+                      <ArrowSquareOutIcon className="w-2.5 h-2.5 flex-none opacity-60" />
                     ) : null}
                     <span className="truncate">{label}</span>
                   </SafeLink>
@@ -1716,7 +1716,7 @@ function KapaAnswer({
                   : 'text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 disabled:opacity-40',
               )}
             >
-              <ThumbsUp className="w-3 h-3" />
+              <ThumbsUpIcon className="w-3 h-3" />
             </button>
             <button
               type="button"
@@ -1730,7 +1730,7 @@ function KapaAnswer({
                   : 'text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 disabled:opacity-40',
               )}
             >
-              <ThumbsDown className="w-3 h-3" />
+              <ThumbsDownIcon className="w-3 h-3" />
             </button>
             <div className="w-px h-3 bg-gray-200 dark:bg-white/10 mx-0.5" />
             <MessageActionButton
@@ -1990,7 +1990,7 @@ function KapaChatPanel({
                 className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
                 aria-label="Close search"
               >
-                <X className="w-3.5 h-3.5" />
+                <XIcon className="w-3.5 h-3.5" />
               </button>
               <button
                 type="button"
@@ -1999,9 +1999,9 @@ function KapaChatPanel({
                 aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
               >
                 {isFullHeight ? (
-                  <ArrowsInSimple className="w-3 h-3" />
+                  <ArrowsInSimpleIcon className="w-3 h-3" />
                 ) : (
-                  <ArrowsOutSimple className="w-3 h-3" />
+                  <ArrowsOutSimpleIcon className="w-3 h-3" />
                 )}
               </button>
             </>
@@ -2046,7 +2046,7 @@ function KapaChatPanel({
                     : 'gap-1 px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
                 )}
               >
-                <ChatCenteredDots className="w-3.5 h-3.5" />
+                <ChatCenteredDotsIcon className="w-3.5 h-3.5" />
                 {isDock ? (
                   <ChatControlTooltip>New chat</ChatControlTooltip>
                 ) : (
@@ -2214,7 +2214,7 @@ function KapaUnavailablePanel({
                 className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
                 aria-label="Close search"
               >
-                <X className="w-3.5 h-3.5" />
+                <XIcon className="w-3.5 h-3.5" />
               </button>
               <button
                 type="button"
@@ -2223,9 +2223,9 @@ function KapaUnavailablePanel({
                 aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
               >
                 {isFullHeight ? (
-                  <ArrowsInSimple className="w-3 h-3" />
+                  <ArrowsInSimpleIcon className="w-3 h-3" />
                 ) : (
-                  <ArrowsOutSimple className="w-3 h-3" />
+                  <ArrowsOutSimpleIcon className="w-3 h-3" />
                 )}
               </button>
             </>
@@ -2399,7 +2399,7 @@ function CommandSearchInput({
     <header className="flex-none border-b border-gray-200/80 bg-white/95 px-3 py-3 dark:border-white/10 dark:bg-black/95 sm:px-4">
       <div className="flex items-center gap-2">
         <div className="flex min-w-0 flex-1 items-center gap-3 rounded-xl border border-gray-200 bg-gray-500/[0.04] px-3 py-2.5 shadow-sm dark:border-white/10 dark:bg-white/[0.06]">
-          <MagnifyingGlass className="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" />
+          <MagnifyingGlassIcon className="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" />
           <Command.Input
             ref={inputRef}
             aria-label="Search TanStack"
@@ -2421,7 +2421,7 @@ function CommandSearchInput({
             tabIndex={-1}
             aria-label="Clear search"
           >
-            <X className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
           </button>
         </div>
         <button
@@ -2431,9 +2431,9 @@ function CommandSearchInput({
           aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
         >
           {isFullHeight ? (
-            <ArrowsInSimple className="h-4 w-4" />
+            <ArrowsInSimpleIcon className="h-4 w-4" />
           ) : (
-            <ArrowsOutSimple className="h-4 w-4" />
+            <ArrowsOutSimpleIcon className="h-4 w-4" />
           )}
         </button>
         <button
@@ -2442,7 +2442,7 @@ function CommandSearchInput({
           className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 shadow-sm transition-colors hover:text-gray-700 dark:border-white/10 dark:bg-white/[0.06] dark:text-gray-500 dark:hover:text-gray-200"
           aria-label="Close search"
         >
-          <X className="h-4 w-4" />
+          <XIcon className="h-4 w-4" />
         </button>
       </div>
     </header>
@@ -2579,7 +2579,7 @@ function AskAIResult({ query }: { query: string }) {
       )}
     >
       <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300">
-        <ChatCenteredDots className="h-4 w-4" />
+        <ChatCenteredDotsIcon className="h-4 w-4" />
       </span>
       <span className="min-w-0 flex-1">
         <span className="block text-sm font-semibold text-gray-900 dark:text-white">
@@ -2589,7 +2589,7 @@ function AskAIResult({ query }: { query: string }) {
           Open TanStack AI with this query
         </span>
       </span>
-      <ArrowElbowDownLeft className="h-4 w-4 shrink-0 text-gray-300 dark:text-gray-600" />
+      <ArrowElbowDownLeftIcon className="h-4 w-4 shrink-0 text-gray-300 dark:text-gray-600" />
     </Command.Item>
   )
 }
@@ -2640,7 +2640,7 @@ function InputBar({
     <div className={twMerge('flex-none px-3', isDock ? 'pb-4' : 'pb-3')}>
       <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/[0.06] shadow-sm overflow-visible">
         <div className="flex items-center gap-2 px-3 py-2.5">
-          <MagnifyingGlass className="w-4 h-4 opacity-30 flex-none" />
+          <MagnifyingGlassIcon className="w-4 h-4 opacity-30 flex-none" />
           <form className="flex-1 min-w-0" onSubmit={handleSubmit}>
             <input
               ref={inputRef}
@@ -2688,7 +2688,7 @@ function InputBar({
             tabIndex={-1}
             aria-label="Clear search"
           >
-            <X className="w-3.5 h-3.5" />
+            <XIcon className="w-3.5 h-3.5" />
           </button>
           <SearchResultsToggle />
 
@@ -2707,7 +2707,7 @@ function InputBar({
             {canStop ? (
               <span className="w-2 h-2 rounded-[1px] bg-current" />
             ) : (
-              <ArrowUp className="w-3.5 h-3.5" />
+              <ArrowUpIcon className="w-3.5 h-3.5" />
             )}
           </button>
         </div>
@@ -2755,9 +2755,9 @@ function SearchResultsToggle() {
         )}
       >
         {showSearchResults ? (
-          <MagnifyingGlassMinus className="w-[18px] h-[18px]" />
+          <MagnifyingGlassMinusIcon className="w-[18px] h-[18px]" />
         ) : (
-          <MagnifyingGlass className="w-[18px] h-[18px]" />
+          <MagnifyingGlassIcon className="w-[18px] h-[18px]" />
         )}
       </button>
       {tooltipRect && typeof document !== 'undefined'
@@ -2820,7 +2820,7 @@ function SearchResultsInChat({ surface }: { surface: SearchSurface }) {
       aria-label="Hide search results"
       className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition-colors hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
     >
-      <X className="w-3 h-3" />
+      <XIcon className="w-3 h-3" />
     </button>
   )
 
@@ -3177,7 +3177,7 @@ function LibraryRefinement({ compact = false }: SearchScopePickerProps) {
           ) : (
             <span className="truncate">All Libraries</span>
           )}
-          <CaretDown className="w-3 h-3 opacity-50 shrink-0" />
+          <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
         </button>
       </DropdownTrigger>
       <DropdownContent align="end" className="max-h-[60vh] w-64 overflow-auto">
@@ -3255,7 +3255,7 @@ function FrameworkRefinement({ compact = false }: SearchScopePickerProps) {
               ? capitalize(currentFramework.label)
               : 'All Frameworks'}
           </span>
-          <CaretDown className="w-3 h-3 opacity-50 shrink-0" />
+          <CaretDownIcon className="w-3 h-3 opacity-50 shrink-0" />
         </button>
       </DropdownTrigger>
       <DropdownContent align="end" className="max-h-[60vh] w-52 overflow-auto">
@@ -3332,7 +3332,7 @@ function NoResults({
               </span>
             )}
           </button>
-          <ArrowElbowDownLeft className="w-4 h-4 animate-bounce" />
+          <ArrowElbowDownLeftIcon className="w-4 h-4 animate-bounce" />
         </div>
       )}
       {!refinedFramework && refinedLibrary && (
@@ -3348,7 +3348,7 @@ function NoResults({
               </span>
             )}
           </button>
-          <ArrowElbowDownLeft className="w-4 h-4 animate-bounce" />
+          <ArrowElbowDownLeftIcon className="w-4 h-4 animate-bounce" />
         </div>
       )}
     </div>
@@ -3356,7 +3356,7 @@ function NoResults({
 }
 
 const _submitIconComponent = () => {
-  return <MagnifyingGlass />
+  return <MagnifyingGlassIcon />
 }
 
 function isSearchModalPortalTarget(target: EventTarget | null) {
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index c2b3cd195..84c415beb 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { Check, CaretUpDown } from '@phosphor-icons/react'
+import { CheckIcon, CaretUpDownIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import {
   Dropdown,
@@ -63,7 +63,10 @@ export function Select<T extends SelectOption>({
             ) : null}
             <span className="truncate font-medium">{selectedOption.label}</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <CaretUpDown className="h-4 w-4 opacity-40" aria-hidden="true" />
+              <CaretUpDownIcon
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
             </span>
           </button>
         </DropdownTrigger>
@@ -89,7 +92,7 @@ export function Select<T extends SelectOption>({
               ) : null}
               <span className="truncate">{option.label}</span>
               {selected === option.value ? (
-                <Check
+                <CheckIcon
                   className="h-4 w-4 absolute right-2 text-gray-800 dark:text-gray-400"
                   aria-hidden="true"
                 />
diff --git a/src/components/ShowcaseCard.tsx b/src/components/ShowcaseCard.tsx
index 7a6a3efa6..84960981b 100644
--- a/src/components/ShowcaseCard.tsx
+++ b/src/components/ShowcaseCard.tsx
@@ -1,10 +1,10 @@
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
-  ArrowSquareOut,
-  ThumbsUp,
-  ThumbsDown,
-  Code,
+  ArrowSquareOutIcon,
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  CodeIcon,
 } from '@phosphor-icons/react'
 import { libraries, type LibraryId } from '~/libraries'
 import type { Showcase } from '~/db/types'
@@ -92,7 +92,7 @@ export function ShowcaseCard({
             className="p-2 rounded-full bg-white/90 dark:bg-gray-800/90 shadow-sm hover:bg-white dark:hover:bg-gray-700 transition-colors"
             title="View source code"
           >
-            <Code className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+            <CodeIcon className="w-4 h-4 text-gray-600 dark:text-gray-300" />
           </a>
         )}
         <a
@@ -103,7 +103,7 @@ export function ShowcaseCard({
           className="p-2 rounded-full bg-white/90 dark:bg-gray-800/90 shadow-sm hover:bg-white dark:hover:bg-gray-700 transition-colors"
           title="Visit site"
         >
-          <ArrowSquareOut className="w-4 h-4 text-gray-600 dark:text-gray-300" />
+          <ArrowSquareOutIcon className="w-4 h-4 text-gray-600 dark:text-gray-300" />
         </a>
       </div>
 
@@ -149,7 +149,7 @@ export function ShowcaseCard({
               )}
               title="Upvote"
             >
-              <ThumbsUp
+              <ThumbsUpIcon
                 className="w-4 h-4"
                 weight={currentUserVote === 1 ? 'fill' : 'regular'}
               />
@@ -178,7 +178,7 @@ export function ShowcaseCard({
               )}
               title="Downvote"
             >
-              <ThumbsDown
+              <ThumbsDownIcon
                 className="w-4 h-4"
                 weight={currentUserVote === -1 ? 'fill' : 'regular'}
               />
diff --git a/src/components/ShowcaseDetail.tsx b/src/components/ShowcaseDetail.tsx
index a318ee0b9..ecce3f4cb 100644
--- a/src/components/ShowcaseDetail.tsx
+++ b/src/components/ShowcaseDetail.tsx
@@ -2,12 +2,12 @@ import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  ArrowLeft,
-  ArrowSquareOut,
-  ThumbsUp,
-  ThumbsDown,
-  Sparkle,
-  Code,
+  ArrowLeftIcon,
+  ArrowSquareOutIcon,
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  SparkleIcon,
+  CodeIcon,
 } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 import { twMerge } from 'tailwind-merge'
@@ -193,7 +193,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
     return (
       <div className="min-h-screen">
         <div className="max-w-4xl mx-auto px-4 py-16 text-center">
-          <Sparkle className="mx-auto h-16 w-16 text-gray-400 mb-4" />
+          <SparkleIcon className="mx-auto h-16 w-16 text-gray-400 mb-4" />
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
             Showcase not found
           </h1>
@@ -205,7 +205,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
             to="/showcase"
             className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeftIcon className="w-4 h-4" />
             Back to Showcase Gallery
           </Link>
         </div>
@@ -227,7 +227,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
           to="/showcase"
           className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6"
         >
-          <ArrowLeft className="w-4 h-4" />
+          <ArrowLeftIcon className="w-4 h-4" />
           Back to Showcase Gallery
         </Link>
 
@@ -269,7 +269,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
                 className="px-4 py-2 text-sm"
               >
                 View Source
-                <Code className="w-4 h-4" />
+                <CodeIcon className="w-4 h-4" />
               </Button>
             )}
             <Button
@@ -280,7 +280,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
               className="px-4 py-2 text-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-200"
             >
               Visit Site
-              <ArrowSquareOut className="w-4 h-4" />
+              <ArrowSquareOutIcon className="w-4 h-4" />
             </Button>
           </div>
         </div>
@@ -354,7 +354,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
               )}
               title="Upvote"
             >
-              <ThumbsUp
+              <ThumbsUpIcon
                 className="w-5 h-5"
                 weight={currentUserVote === 1 ? 'fill' : 'regular'}
               />
@@ -384,7 +384,7 @@ export function ShowcaseDetail({ showcaseId }: ShowcaseDetailProps) {
               )}
               title="Downvote"
             >
-              <ThumbsDown
+              <ThumbsDownIcon
                 className="w-5 h-5"
                 weight={currentUserVote === -1 ? 'fill' : 'regular'}
               />
diff --git a/src/components/ShowcaseGallery.tsx b/src/components/ShowcaseGallery.tsx
index 46e7ea800..269129a77 100644
--- a/src/components/ShowcaseGallery.tsx
+++ b/src/components/ShowcaseGallery.tsx
@@ -11,7 +11,7 @@ import { SubmitShowcasePlaceholder } from './ShowcaseSection'
 import { PaginationControls } from './PaginationControls'
 import { ShowcaseTopBarFilters } from './ShowcaseTopBarFilters'
 import type { ShowcaseUseCase } from '~/db/types'
-import { Plus } from '@phosphor-icons/react'
+import { PlusIcon } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { useLoginModal } from '~/contexts/LoginModalContext'
@@ -311,7 +311,7 @@ export function ShowcaseGallery() {
               to="/showcase/submit"
               className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg border-none"
             >
-              <Plus className="w-5 h-5" />
+              <PlusIcon className="w-5 h-5" />
               Submit Your Project
             </Button>
           </div>
diff --git a/src/components/ShowcaseModerationList.tsx b/src/components/ShowcaseModerationList.tsx
index b447d838b..167d18c16 100644
--- a/src/components/ShowcaseModerationList.tsx
+++ b/src/components/ShowcaseModerationList.tsx
@@ -13,13 +13,13 @@ import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { Showcase } from '~/db/types'
 import {
-  Check,
-  X,
-  Star,
-  ArrowSquareOut,
-  Trash,
-  ThumbsUp,
-  ThumbsDown,
+  CheckIcon,
+  XIcon,
+  StarIcon,
+  ArrowSquareOutIcon,
+  TrashIcon,
+  ThumbsUpIcon,
+  ThumbsDownIcon,
 } from '@phosphor-icons/react'
 import { libraries } from '~/libraries'
 import { Badge, Button } from '~/ui'
@@ -304,7 +304,7 @@ export function ShowcaseModerationList({
                           : 'Add to featured'
                       }
                     >
-                      <Star
+                      <StarIcon
                         className={twMerge(
                           'w-4 h-4',
                           showcase.isFeatured && 'fill-current',
@@ -319,7 +319,7 @@ export function ShowcaseModerationList({
                         className="p-1 rounded hover:bg-emerald-100 dark:hover:bg-emerald-900/30 text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                         title="Upvote"
                       >
-                        <ThumbsUp className="w-3.5 h-3.5" />
+                        <ThumbsUpIcon className="w-3.5 h-3.5" />
                       </button>
                       <span
                         className={twMerge(
@@ -340,7 +340,7 @@ export function ShowcaseModerationList({
                         className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
                         title="Downvote"
                       >
-                        <ThumbsDown className="w-3.5 h-3.5" />
+                        <ThumbsDownIcon className="w-3.5 h-3.5" />
                       </button>
                     </div>
                   </TableCell>
@@ -376,7 +376,7 @@ export function ShowcaseModerationList({
                             }
                             title="Approve"
                           >
-                            <Check className="w-3.5 h-3.5" />
+                            <CheckIcon className="w-3.5 h-3.5" />
                           </Button>
                         )}
                         {showcase.status !== 'denied' && (
@@ -387,7 +387,7 @@ export function ShowcaseModerationList({
                             onClick={() => handleModerate(showcase.id, 'deny')}
                             title="Deny"
                           >
-                            <X className="w-3.5 h-3.5" />
+                            <XIcon className="w-3.5 h-3.5" />
                           </Button>
                         )}
                         <Button
@@ -405,7 +405,7 @@ export function ShowcaseModerationList({
                           }}
                           title="Delete"
                         >
-                          <Trash className="w-3.5 h-3.5" />
+                          <TrashIcon className="w-3.5 h-3.5" />
                         </Button>
                       </div>
                     )}
@@ -443,7 +443,7 @@ export function ShowcaseModerationList({
                               className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
                             >
                               {showcase.url}
-                              <ArrowSquareOut className="w-3 h-3" />
+                              <ArrowSquareOutIcon className="w-3 h-3" />
                             </a>
                           </div>
                           <div>
@@ -514,9 +514,9 @@ export function ShowcaseModerationList({
                             )}
                           >
                             {showcase.voteScore > 0 ? (
-                              <ThumbsUp className="w-4 h-4" />
+                              <ThumbsUpIcon className="w-4 h-4" />
                             ) : showcase.voteScore < 0 ? (
-                              <ThumbsDown className="w-4 h-4" />
+                              <ThumbsDownIcon className="w-4 h-4" />
                             ) : null}
                             <span>
                               {showcase.voteScore > 0 ? '+' : ''}
diff --git a/src/components/ShowcaseSection.tsx b/src/components/ShowcaseSection.tsx
index 48273349a..6c7d6b9f4 100644
--- a/src/components/ShowcaseSection.tsx
+++ b/src/components/ShowcaseSection.tsx
@@ -9,7 +9,7 @@ import {
 import { voteShowcase } from '~/utils/showcase.functions'
 import { ShowcaseCard, ShowcaseCardSkeleton } from './ShowcaseCard'
 import { Button } from '~/ui'
-import { ArrowRight, Plus } from '@phosphor-icons/react'
+import { ArrowRightIcon, PlusIcon } from '@phosphor-icons/react'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { useLoginModal } from '~/contexts/LoginModalContext'
 import type { LibraryId } from '~/libraries'
@@ -37,7 +37,7 @@ export function SubmitShowcasePlaceholder({
       <div className="aspect-video flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
         <div className="text-center p-6">
           <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 transition-colors">
-            <Plus className="w-6 h-6 text-gray-400 group-hover:text-blue-500 transition-colors" />
+            <PlusIcon className="w-6 h-6 text-gray-400 group-hover:text-blue-500 transition-colors" />
           </div>
           <p className="text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
             Submit your project
@@ -244,7 +244,7 @@ export function ShowcaseSection({
           >
             <Button variant="ghost" size="xs">
               View all projects
-              <ArrowRight className="w-4 h-4" />
+              <ArrowRightIcon className="w-4 h-4" />
             </Button>
           </Link>
         </div>
diff --git a/src/components/ShowcaseSubmitForm.tsx b/src/components/ShowcaseSubmitForm.tsx
index 30e13d41a..1172f46be 100644
--- a/src/components/ShowcaseSubmitForm.tsx
+++ b/src/components/ShowcaseSubmitForm.tsx
@@ -12,7 +12,7 @@ import {
   USE_CASE_LABELS,
 } from '~/utils/showcase.shared'
 import { useToast } from './ToastProvider'
-import { Check, WarningCircle } from '@phosphor-icons/react'
+import { CheckIcon, WarningCircleIcon } from '@phosphor-icons/react'
 import { Button, FormInput } from '~/ui'
 import { ImageUpload } from './ImageUpload'
 import { FormEvent, useMemo, useState } from 'react'
@@ -364,7 +364,7 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
                     } ${isAutoIncluded ? 'opacity-60 cursor-not-allowed' : ''}`}
                   >
                     {(isSelected || isAutoIncluded) && (
-                      <Check className="w-4 h-4 text-blue-600" />
+                      <CheckIcon className="w-4 h-4 text-blue-600" />
                     )}
                     <span className="text-sm font-medium text-gray-900 dark:text-white">
                       {lib.name?.replace('TanStack ', '')}
@@ -380,7 +380,7 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
             </div>
             {selectedLibraries.length === 0 && (
               <p className="mt-2 text-sm text-red-500 flex items-center gap-1">
-                <WarningCircle className="w-4 h-4" />
+                <WarningCircleIcon className="w-4 h-4" />
                 Select at least one library
               </p>
             )}
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 1121a7b3c..95551115b 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { CircleNotch } from '@phosphor-icons/react'
+import { CircleNotchIcon } from '@phosphor-icons/react'
 
 interface SpinnerProps {
   className?: string
@@ -7,7 +7,7 @@ interface SpinnerProps {
 
 export function Spinner({ className }: SpinnerProps) {
   return (
-    <CircleNotch
+    <CircleNotchIcon
       className={twMerge(
         'animate-spin text-gray-900 dark:text-white text-2xl',
         className,
diff --git a/src/components/TableComponents.tsx b/src/components/TableComponents.tsx
index fa71946c4..239cfa97e 100644
--- a/src/components/TableComponents.tsx
+++ b/src/components/TableComponents.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CaretUp, CaretDown } from '@phosphor-icons/react'
+import { CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react'
 
 // Table - Main table wrapper
 interface TableProps {
@@ -141,10 +141,10 @@ export function SortableTableHeaderCell({
       >
         {children}
         <span className="w-3 h-3 flex items-center justify-center">
-          {sortDirection === 'asc' && <CaretUp className="w-3 h-3" />}
-          {sortDirection === 'desc' && <CaretDown className="w-3 h-3" />}
+          {sortDirection === 'asc' && <CaretUpIcon className="w-3 h-3" />}
+          {sortDirection === 'desc' && <CaretDownIcon className="w-3 h-3" />}
           {!sortDirection && (
-            <CaretUp className="w-3 h-3 opacity-0 group-hover:opacity-40 transition-opacity" />
+            <CaretUpIcon className="w-3 h-3 opacity-0 group-hover:opacity-40 transition-opacity" />
           )}
         </span>
       </span>
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 350527c36..bb087204d 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTheme } from './ThemeProvider'
-import { Moon, Sun, SunHorizon } from '@phosphor-icons/react'
+import { MoonIcon, SunIcon, SunHorizonIcon } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 
 export function ThemeToggle() {
@@ -41,9 +41,9 @@ export function ThemeToggle() {
         aria-hidden="true"
         className="grid size-[18px] shrink-0 place-items-center"
       >
-        <SunHorizon className={getIconClassName('auto')} weight="bold" />
-        <Sun className={getIconClassName('light')} weight="bold" />
-        <Moon className={getIconClassName('dark')} weight="bold" />
+        <SunHorizonIcon className={getIconClassName('auto')} weight="bold" />
+        <SunIcon className={getIconClassName('light')} weight="bold" />
+        <MoonIcon className={getIconClassName('dark')} weight="bold" />
       </span>
     </Button>
   )
diff --git a/src/components/TocMobile.tsx b/src/components/TocMobile.tsx
index 12c53131c..c29164bb3 100644
--- a/src/components/TocMobile.tsx
+++ b/src/components/TocMobile.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from '@tanstack/react-router'
 import type { MarkdownHeading } from '~/utils/markdown'
-import { CaretDown, CaretRight } from '@phosphor-icons/react'
+import { CaretDownIcon, CaretRightIcon } from '@phosphor-icons/react'
 
 interface TocMobileProps {
   headings: Array<MarkdownHeading>
@@ -26,7 +26,7 @@ export function TocMobile({ headings }: TocMobileProps) {
           rounded-b-xl"
           aria-expanded={isOpen}
         >
-          <span>{isOpen ? <CaretDown /> : <CaretRight />}</span>
+          <span>{isOpen ? <CaretDownIcon /> : <CaretRightIcon />}</span>
           <span>On this page</span>
         </summary>
         <div className="py-2">
diff --git a/src/components/UserFeedbackSection.tsx b/src/components/UserFeedbackSection.tsx
index d9fa6da02..b5f9f406b 100644
--- a/src/components/UserFeedbackSection.tsx
+++ b/src/components/UserFeedbackSection.tsx
@@ -5,10 +5,10 @@ import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import { calculatePoints } from '~/utils/docFeedback.shared'
 import {
-  Medal,
-  ArrowSquareOut,
-  Lightbulb,
-  ChatCentered,
+  MedalIcon,
+  ArrowSquareOutIcon,
+  LightbulbIcon,
+  ChatCenteredIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui'
 import { useState } from 'react'
@@ -43,7 +43,7 @@ export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
-              <Medal className="text-2xl text-blue-600 dark:text-blue-400" />
+              <MedalIcon className="text-2xl text-blue-600 dark:text-blue-400" />
               <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                 Feedback Points
               </h3>
@@ -87,7 +87,7 @@ export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1"
           >
             View Leaderboard
-            <ArrowSquareOut className="text-xs" />
+            <ArrowSquareOutIcon className="text-xs" />
           </Link>
         </div>
       </div>
@@ -125,9 +125,9 @@ export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
                       {/* Icon */}
                       <div className="mt-1">
                         {item.type === 'note' ? (
-                          <ChatCentered className="text-blue-500" />
+                          <ChatCenteredIcon className="text-blue-500" />
                         ) : (
-                          <Lightbulb className="text-yellow-500" />
+                          <LightbulbIcon className="text-yellow-500" />
                         )}
                       </div>
 
diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx
index 11a77cf2e..c6bdda11e 100644
--- a/src/components/VersionSelect.tsx
+++ b/src/components/VersionSelect.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { create } from 'zustand'
 import { useNavigate, useParams } from '@tanstack/react-router'
-import { Tag } from '@phosphor-icons/react'
+import { TagIcon } from '@phosphor-icons/react'
 import { Select, SelectOption } from './Select'
 import { getLibrary, LibraryId } from '~/libraries'
 import {
@@ -17,7 +17,7 @@ export function VersionSelect({ libraryId }: { libraryId: LibraryId }) {
   return (
     <Select
       className="w-full"
-      icon={<Tag className="w-3.5 h-3.5 opacity-60" />}
+      icon={<TagIcon className="w-3.5 h-3.5 opacity-60" />}
       selected={versionConfig.selected}
       available={versionConfig.available}
       onSelect={versionConfig.onSelect}
diff --git a/src/components/account/AccountProfilePictureSection.client.tsx b/src/components/account/AccountProfilePictureSection.client.tsx
index d713fd038..51483adb7 100644
--- a/src/components/account/AccountProfilePictureSection.client.tsx
+++ b/src/components/account/AccountProfilePictureSection.client.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Camera, ArrowCounterClockwise, Trash } from '@phosphor-icons/react'
+import {
+  CameraIcon,
+  ArrowCounterClockwiseIcon,
+  TrashIcon,
+} from '@phosphor-icons/react'
 import { Avatar } from '~/components/Avatar'
 import { AvatarCropModal } from '~/components/AvatarCropModal'
 import { useToast } from '~/components/ToastProvider'
@@ -177,7 +181,7 @@ export function AccountProfilePictureSection({
             disabled={isUploading}
             className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:cursor-not-allowed"
           >
-            <Camera className="w-6 h-6 text-white" />
+            <CameraIcon className="w-6 h-6 text-white" />
           </button>
           <input
             ref={fileInputRef}
@@ -194,7 +198,7 @@ export function AccountProfilePictureSection({
             onClick={() => fileInputRef.current?.click()}
             disabled={isUploading}
           >
-            <Camera className="w-3.5 h-3.5" />
+            <CameraIcon className="w-3.5 h-3.5" />
             {isUploading ? 'Uploading...' : 'Change photo'}
           </Button>
           {canRevert && (
@@ -204,7 +208,7 @@ export function AccountProfilePictureSection({
               onClick={handleRevertToOAuth}
               disabled={isReverting}
             >
-              <ArrowCounterClockwise className="w-3.5 h-3.5" />
+              <ArrowCounterClockwiseIcon className="w-3.5 h-3.5" />
               {isReverting ? 'Reverting...' : 'Revert to original'}
             </Button>
           )}
@@ -215,7 +219,7 @@ export function AccountProfilePictureSection({
               onClick={handleRemovePhoto}
               disabled={isRemoving}
             >
-              <Trash className="w-3.5 h-3.5" />
+              <TrashIcon className="w-3.5 h-3.5" />
               {isRemoving ? 'Removing...' : 'Remove photo'}
             </Button>
           )}
diff --git a/src/components/admin/AdminAccessDenied.tsx b/src/components/admin/AdminAccessDenied.tsx
index 9ba7ab6da..0e2f8f04e 100644
--- a/src/components/admin/AdminAccessDenied.tsx
+++ b/src/components/admin/AdminAccessDenied.tsx
@@ -1,12 +1,12 @@
 import { Link } from '@tanstack/react-router'
-import { Lock } from '@phosphor-icons/react'
+import { LockIcon } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 
 export function AdminAccessDenied() {
   return (
     <div className="min-h-screen flex items-center justify-center">
       <div className="text-center">
-        <Lock className="w-12 h-12 text-red-500 mx-auto mb-4" />
+        <LockIcon className="w-12 h-12 text-red-500 mx-auto mb-4" />
         <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
         <p className="text-gray-600 dark:text-gray-400 mb-4">
           You don't have permission to access the admin area.
diff --git a/src/components/admin/DocsCacheTab.tsx b/src/components/admin/DocsCacheTab.tsx
index e90c71404..b0d0dee1c 100644
--- a/src/components/admin/DocsCacheTab.tsx
+++ b/src/components/admin/DocsCacheTab.tsx
@@ -1,10 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  BookOpen,
-  Clock,
-  Database,
-  GitBranch,
-  ArrowsClockwise,
+  BookOpenIcon,
+  ClockIcon,
+  DatabaseIcon,
+  GitBranchIcon,
+  ArrowsClockwiseIcon,
 } from '@phosphor-icons/react'
 import {
   AdminEmptyState,
@@ -99,9 +99,9 @@ export function DocsCacheTab() {
   if (!data && !docsCacheQuery.isError && repos.length === 0) {
     return (
       <div className="space-y-6">
-        <AdminPageHeader icon={<BookOpen />} title="Docs Cache" />
+        <AdminPageHeader icon={<BookOpenIcon />} title="Docs Cache" />
         <AdminEmptyState
-          icon={<Database className="h-6 w-6" />}
+          icon={<DatabaseIcon className="h-6 w-6" />}
           title="No docs cache repos found"
           description="No watched repos or cached docs entries are available yet."
         />
@@ -116,7 +116,7 @@ export function DocsCacheTab() {
   return (
     <div className="space-y-6">
       <AdminPageHeader
-        icon={<BookOpen />}
+        icon={<BookOpenIcon />}
         title="Docs Cache"
         isLoading={docsCacheQuery.isFetching}
         actions={
@@ -130,7 +130,7 @@ export function DocsCacheTab() {
             }
             title="Mark every cached docs row stale so the next docs request repopulates it"
           >
-            <ArrowsClockwise
+            <ArrowsClockwiseIcon
               className={invalidatingAll ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
             />
             {invalidatingAll ? 'Invalidating...' : 'Invalidate All Docs'}
@@ -191,22 +191,22 @@ export function DocsCacheTab() {
         <StatsCard
           label="Watched Repos"
           value={data?.summary.watchedRepoCount ?? docsWebhookSources.length}
-          icon={<GitBranch className="h-5 w-5" />}
+          icon={<GitBranchIcon className="h-5 w-5" />}
         />
         <StatsCard
           label="Cached Repos"
           value={data?.summary.cachedRepoCount ?? 0}
-          icon={<Database className="h-5 w-5" />}
+          icon={<DatabaseIcon className="h-5 w-5" />}
         />
         <StatsCard
           label="Content Rows"
           value={data?.summary.contentEntries ?? 0}
-          icon={<BookOpen className="h-5 w-5" />}
+          icon={<BookOpenIcon className="h-5 w-5" />}
         />
         <StatsCard
           label="Artifact Rows"
           value={data?.summary.artifactEntries ?? 0}
-          icon={<Clock className="h-5 w-5" />}
+          icon={<ClockIcon className="h-5 w-5" />}
         />
       </div>
 
@@ -313,7 +313,7 @@ export function DocsCacheTab() {
                         }
                         title={`Mark ${repo.repo} docs cache entries stale`}
                       >
-                        <ArrowsClockwise
+                        <ArrowsClockwiseIcon
                           className={
                             isInvalidatingRepo
                               ? 'h-4 w-4 animate-spin'
diff --git a/src/components/admin/UserAvatar.tsx b/src/components/admin/UserAvatar.tsx
index 23ad4d152..ba50af88c 100644
--- a/src/components/admin/UserAvatar.tsx
+++ b/src/components/admin/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import { User } from '@phosphor-icons/react'
+import { UserIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 
 type UserAvatarProps = {
@@ -47,7 +47,9 @@ export function UserAvatar({
         className,
       )}
     >
-      <User className={twMerge('text-gray-500 dark:text-gray-400', iconSize)} />
+      <UserIcon
+        className={twMerge('text-gray-500 dark:text-gray-400', iconSize)}
+      />
     </div>
   )
 }
diff --git a/src/components/application-builder/parts.tsx b/src/components/application-builder/parts.tsx
index b6b579806..b4b1315d1 100644
--- a/src/components/application-builder/parts.tsx
+++ b/src/components/application-builder/parts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { Check, Copy, Sparkle, X } from '@phosphor-icons/react'
+import { CheckIcon, CopyIcon, SparkleIcon, XIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import {
   getApplicationStarterConflictingPartnerIds,
@@ -221,7 +221,7 @@ function StarterLibraryTooltip({ library }: { library: StarterTryLibrary }) {
   return (
     <div className="w-[min(22rem,calc(100vw-1rem))] rounded-xl border border-gray-200 bg-white/95 px-3.5 py-3 text-left shadow-lg shadow-gray-950/10 dark:border-gray-800 dark:bg-gray-950/95">
       <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
-        <Sparkle className="h-3.5 w-3.5" />
+        <SparkleIcon className="h-3.5 w-3.5" />
         TanStack {library.label}
       </div>
       <div className="mt-2 flex flex-wrap gap-1.5">
@@ -585,7 +585,7 @@ function StarterPartnerTooltip({
   return (
     <div className="w-[min(22rem,calc(100vw-1rem))] rounded-xl border border-gray-200 bg-white/95 px-3.5 py-3 text-left shadow-lg shadow-gray-950/10 dark:border-gray-800 dark:bg-gray-950/95">
       <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
-        <Sparkle className="h-3.5 w-3.5" />
+        <SparkleIcon className="h-3.5 w-3.5" />
         {partner.label}
       </div>
       {partner.tags.length > 0 ? (
@@ -662,12 +662,12 @@ export function GeneratedPromptPreviewHeader({
             >
               {copiedPrompt ? (
                 <>
-                  <Check className="h-4 w-4" />
+                  <CheckIcon className="h-4 w-4" />
                   Copied
                 </>
               ) : (
                 <>
-                  <Copy className="h-4 w-4" />
+                  <CopyIcon className="h-4 w-4" />
                   Copy Prompt
                 </>
               )}
@@ -693,7 +693,7 @@ export function GeneratedPromptPreviewHeader({
               className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-emerald-200/80 text-emerald-800 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:text-emerald-300 dark:hover:bg-emerald-900/50"
               aria-label="Dismiss copied prompt notice"
             >
-              <X className="h-4 w-4" />
+              <XIcon className="h-4 w-4" />
             </button>
           ) : null}
         </div>
diff --git a/src/components/builder/BuilderSummary.tsx b/src/components/builder/BuilderSummary.tsx
index ac2627e95..10af7e091 100644
--- a/src/components/builder/BuilderSummary.tsx
+++ b/src/components/builder/BuilderSummary.tsx
@@ -2,13 +2,13 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import {
-  BookOpen,
-  Code,
-  FileText,
-  Palette,
-  Rocket,
-  GearSix,
-  Terminal,
+  BookOpenIcon,
+  CodeIcon,
+  FileTextIcon,
+  PaletteIcon,
+  RocketIcon,
+  GearSixIcon,
+  TerminalIcon,
 } from '@phosphor-icons/react'
 import {
   useAvailableExamples,
@@ -244,16 +244,19 @@ export function BuilderSummaryPanel({
               </p>
               <div className="mt-4 flex flex-wrap gap-2">
                 <SummaryBadge
-                  icon={Code}
+                  icon={CodeIcon}
                   label={summary.framework === 'solid' ? 'Solid' : 'React'}
                 />
-                <SummaryBadge icon={Terminal} label={summary.packageManager} />
                 <SummaryBadge
-                  icon={Palette}
+                  icon={TerminalIcon}
+                  label={summary.packageManager}
+                />
+                <SummaryBadge
+                  icon={PaletteIcon}
                   label={summary.tailwind ? 'Tailwind' : 'Custom CSS'}
                 />
                 <SummaryBadge
-                  icon={Rocket}
+                  icon={RocketIcon}
                   label={
                     summary.deploymentFeatures.length > 0
                       ? summary.deploymentFeatures
@@ -264,20 +267,23 @@ export function BuilderSummaryPanel({
                 />
                 {summary.selectedTemplate ? (
                   <SummaryBadge
-                    icon={FileText}
+                    icon={FileTextIcon}
                     label={summary.selectedTemplate}
                   />
                 ) : null}
                 {summary.toolingFeatures.length > 0 ? (
                   <SummaryBadge
-                    icon={GearSix}
+                    icon={GearSixIcon}
                     label={summary.toolingFeatures
                       .map((feature) => feature.name)
                       .join(', ')}
                   />
                 ) : null}
                 {summary.exampleName ? (
-                  <SummaryBadge icon={BookOpen} label={summary.exampleName} />
+                  <SummaryBadge
+                    icon={BookOpenIcon}
+                    label={summary.exampleName}
+                  />
                 ) : null}
               </div>
             </div>
diff --git a/src/components/builder/BuilderWorkspace.tsx b/src/components/builder/BuilderWorkspace.tsx
index 750e5aed3..dc8e97dbe 100644
--- a/src/components/builder/BuilderWorkspace.tsx
+++ b/src/components/builder/BuilderWorkspace.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
-import { Question, X } from '@phosphor-icons/react'
+import { QuestionIcon, XIcon } from '@phosphor-icons/react'
 import { useBuilderStore } from './store'
 import { useBuilderUrl } from './useBuilderUrl'
 import { BuilderSummaryPanel, useBuilderSummaryData } from './BuilderSummary'
@@ -151,9 +151,9 @@ export function BuilderWorkspace() {
                 title={showIntro ? 'Hide builder help' : 'Show builder help'}
               >
                 {showIntro ? (
-                  <X className="h-4 w-4" />
+                  <XIcon className="h-4 w-4" />
                 ) : (
-                  <Question className="h-4 w-4" />
+                  <QuestionIcon className="h-4 w-4" />
                 )}
               </button>
             }
diff --git a/src/components/builder/CustomAddonDialog.tsx b/src/components/builder/CustomAddonDialog.tsx
index 9f86b2fee..21c1c4d1f 100644
--- a/src/components/builder/CustomAddonDialog.tsx
+++ b/src/components/builder/CustomAddonDialog.tsx
@@ -8,12 +8,12 @@ import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
-  Plus,
-  CircleNotch,
-  WarningCircle,
-  X,
-  ArrowSquareOut,
-  Question,
+  PlusIcon,
+  CircleNotchIcon,
+  WarningCircleIcon,
+  XIcon,
+  ArrowSquareOutIcon,
+  QuestionIcon,
 } from '@phosphor-icons/react'
 import { useBuilderStore, useTailwind } from './store'
 import type { IntegrationCompiled } from '~/builder/api'
@@ -118,7 +118,7 @@ export function CustomAddonDialog({ onClose }: CustomAddonDialogProps) {
             )}
           >
             {isLoading ? (
-              <CircleNotch className="w-4 h-4 animate-spin" />
+              <CircleNotchIcon className="w-4 h-4 animate-spin" />
             ) : (
               'Load'
             )}
@@ -133,7 +133,7 @@ export function CustomAddonDialog({ onClose }: CustomAddonDialogProps) {
       {/* Error */}
       {error && (
         <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400">
-          <WarningCircle className="w-4 h-4 mt-0.5 shrink-0" />
+          <WarningCircleIcon className="w-4 h-4 mt-0.5 shrink-0" />
           <span>{error}</span>
         </div>
       )}
@@ -157,7 +157,7 @@ export function CustomAddonDialog({ onClose }: CustomAddonDialogProps) {
                 rel="noopener noreferrer"
                 className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
               >
-                <ArrowSquareOut className="w-4 h-4" />
+                <ArrowSquareOutIcon className="w-4 h-4" />
               </a>
             )}
           </div>
@@ -223,19 +223,19 @@ export function CustomAddonButton() {
       >
         {isOpen ? (
           <>
-            <X className="w-4 h-4" />
+            <XIcon className="w-4 h-4" />
             Cancel
           </>
         ) : (
           <>
-            <Plus className="w-4 h-4" />
+            <PlusIcon className="w-4 h-4" />
             Custom Integration
             <Link
               to="/builder/docs"
               onClick={(e) => e.stopPropagation()}
               className="p-0.5 hover:text-blue-600 dark:hover:text-cyan-400"
             >
-              <Question className="w-3.5 h-3.5" />
+              <QuestionIcon className="w-3.5 h-3.5" />
             </Link>
           </>
         )}
diff --git a/src/components/builder/CustomTemplateDialog.tsx b/src/components/builder/CustomTemplateDialog.tsx
index bee907d8f..06b934735 100644
--- a/src/components/builder/CustomTemplateDialog.tsx
+++ b/src/components/builder/CustomTemplateDialog.tsx
@@ -8,11 +8,11 @@ import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
-  CircleNotch,
-  WarningCircle,
-  Link as LinkIcon,
-  X,
-  Question,
+  CircleNotchIcon,
+  WarningCircleIcon,
+  LinkIcon,
+  XIcon,
+  QuestionIcon,
 } from '@phosphor-icons/react'
 import { useBuilderStore, useCustomTemplate } from './store'
 import type { CustomTemplateCompiled } from '~/builder/api'
@@ -109,7 +109,7 @@ export function CustomTemplateDialog({ onClose }: CustomTemplateDialogProps) {
             )}
           >
             {isLoading ? (
-              <CircleNotch className="w-4 h-4 animate-spin" />
+              <CircleNotchIcon className="w-4 h-4 animate-spin" />
             ) : (
               'Load'
             )}
@@ -123,7 +123,7 @@ export function CustomTemplateDialog({ onClose }: CustomTemplateDialogProps) {
       {/* Error */}
       {error && (
         <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400">
-          <WarningCircle className="w-4 h-4 mt-0.5 shrink-0" />
+          <WarningCircleIcon className="w-4 h-4 mt-0.5 shrink-0" />
           <span>{error}</span>
         </div>
       )}
@@ -199,7 +199,7 @@ export function CustomTemplateSection() {
             onClick={() => setCustomTemplate(null)}
             className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
           >
-            <X className="w-4 h-4" />
+            <XIcon className="w-4 h-4" />
           </button>
         </div>
       </div>
@@ -219,7 +219,7 @@ export function CustomTemplateSection() {
       >
         {isOpen ? (
           <>
-            <X className="w-4 h-4" />
+            <XIcon className="w-4 h-4" />
             Cancel
           </>
         ) : (
@@ -231,7 +231,7 @@ export function CustomTemplateSection() {
               onClick={(e) => e.stopPropagation()}
               className="p-0.5 hover:text-blue-600 dark:hover:text-cyan-400"
             >
-              <Question className="w-3.5 h-3.5" />
+              <QuestionIcon className="w-3.5 h-3.5" />
             </Link>
           </>
         )}
@@ -281,7 +281,7 @@ export function CustomTemplateItem({
               onClick={() => setCustomTemplate(null)}
               className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
             >
-              <X className="w-4 h-4" />
+              <XIcon className="w-4 h-4" />
             </button>
           </div>
         </div>
@@ -327,7 +327,7 @@ export function CustomTemplateItem({
               onClick={(e) => e.stopPropagation()}
               className="p-0.5 text-gray-400 hover:text-blue-600 dark:hover:text-cyan-400"
             >
-              <Question className="w-3.5 h-3.5" />
+              <QuestionIcon className="w-3.5 h-3.5" />
             </Link>
           </div>
           <div className="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
diff --git a/src/components/builder/DeployDialog.tsx b/src/components/builder/DeployDialog.tsx
index 682f750e9..364563eb3 100644
--- a/src/components/builder/DeployDialog.tsx
+++ b/src/components/builder/DeployDialog.tsx
@@ -6,13 +6,13 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import {
-  CircleNotch,
-  ArrowSquareOut,
-  WarningCircle,
-  Check,
-  Lock,
-  Globe,
-  Rocket,
+  CircleNotchIcon,
+  ArrowSquareOutIcon,
+  WarningCircleIcon,
+  CheckIcon,
+  LockIcon,
+  GlobeIcon,
+  RocketIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useAsyncDebouncer } from '@tanstack/react-pacer'
@@ -319,7 +319,7 @@ export function DeployDialog({
               }
             >
               {providerInfo ? (
-                <Rocket className="w-5 h-5 text-white" />
+                <RocketIcon className="w-5 h-5 text-white" />
               ) : (
                 <GitHub className="w-5 h-5 text-white" />
               )}
@@ -343,7 +343,7 @@ export function DeployDialog({
         <div className="p-6">
           {state.step === 'auth-check' && (
             <div className="flex flex-col items-center justify-center py-8">
-              <CircleNotch className="w-8 h-8 animate-spin text-gray-400" />
+              <CircleNotchIcon className="w-8 h-8 animate-spin text-gray-400" />
               <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
                 Checking authentication...
               </p>
@@ -400,14 +400,14 @@ export function DeployDialog({
                   />
                   <div className="absolute right-2.5 top-1/2 -translate-y-1/2">
                     {repoNameStatus === 'checking' && (
-                      <CircleNotch className="w-4 h-4 animate-spin text-gray-400" />
+                      <CircleNotchIcon className="w-4 h-4 animate-spin text-gray-400" />
                     )}
                     {repoNameStatus === 'available' && (
-                      <Check className="w-4 h-4 text-green-500" />
+                      <CheckIcon className="w-4 h-4 text-green-500" />
                     )}
                     {(repoNameStatus === 'taken' ||
                       repoNameStatus === 'invalid') && (
-                      <WarningCircle className="w-4 h-4 text-red-500" />
+                      <WarningCircleIcon className="w-4 h-4 text-red-500" />
                     )}
                   </div>
                 </div>
@@ -430,7 +430,7 @@ export function DeployDialog({
                         : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
                     )}
                   >
-                    <Globe className="w-4 h-4" />
+                    <GlobeIcon className="w-4 h-4" />
                     Public
                   </button>
                   <button
@@ -442,7 +442,7 @@ export function DeployDialog({
                         : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
                     )}
                   >
-                    <Lock className="w-4 h-4" />
+                    <LockIcon className="w-4 h-4" />
                     Private
                   </button>
                 </div>
@@ -483,7 +483,7 @@ export function DeployDialog({
 
           {state.step === 'deploying' && (
             <div className="flex flex-col items-center justify-center py-8">
-              <CircleNotch className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
+              <CircleNotchIcon className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
               <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
                 {state.message}
               </p>
@@ -493,7 +493,7 @@ export function DeployDialog({
           {state.step === 'success' && (
             <div className="flex flex-col items-center text-center py-4">
               <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-4">
-                <Check className="w-8 h-8 text-green-600 dark:text-green-400" />
+                <CheckIcon className="w-8 h-8 text-green-600 dark:text-green-400" />
               </div>
               <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                 Repository Created!
@@ -508,7 +508,7 @@ export function DeployDialog({
                 className="text-sm text-blue-600 dark:text-cyan-400 hover:underline flex items-center gap-1 mb-4"
               >
                 {state.owner}/{state.repoName}
-                <ArrowSquareOut className="w-3 h-3" />
+                <ArrowSquareOutIcon className="w-3 h-3" />
               </a>
               {providerInfo ? (
                 <>
@@ -537,7 +537,7 @@ export function DeployDialog({
                         className="gap-2"
                         style={{ backgroundColor: providerInfo.color }}
                       >
-                        <Rocket className="w-4 h-4" />
+                        <RocketIcon className="w-4 h-4" />
                         Deploy Now
                       </Button>
                     )
@@ -554,7 +554,7 @@ export function DeployDialog({
           {state.step === 'error' && (
             <div className="flex flex-col items-center text-center py-4">
               <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
-                <WarningCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+                <WarningCircleIcon className="w-8 h-8 text-red-600 dark:text-red-400" />
               </div>
               <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                 Deployment Failed
diff --git a/src/components/builder/FeaturePicker.tsx b/src/components/builder/FeaturePicker.tsx
index 75d09b1b8..a54a12ec1 100644
--- a/src/components/builder/FeaturePicker.tsx
+++ b/src/components/builder/FeaturePicker.tsx
@@ -11,11 +11,11 @@
 import { useState, useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import {
-  Star,
-  ArrowSquareOut,
-  CaretDown,
-  Sparkle,
-  X,
+  StarIcon,
+  ArrowSquareOutIcon,
+  CaretDownIcon,
+  SparkleIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 import { matchSorter } from 'match-sorter'
 import {
@@ -346,7 +346,7 @@ function FeatureSection({
             {description}
           </p>
         </div>
-        <CaretDown
+        <CaretDownIcon
           className={twMerge(
             'w-4 h-4 text-gray-400 transition-transform duration-200',
             effectiveOpen && 'rotate-180',
@@ -455,7 +455,7 @@ function FeatureCard({ feature, categoryColor }: FeatureCardProps) {
         <div className="flex flex-col items-center gap-2 shrink-0">
           {isPartner && (
             <span className="flex items-center gap-0.5 text-[9px] font-semibold text-amber-500 dark:text-amber-400 leading-none">
-              <Star className="w-2.5 h-2.5 fill-amber-500 dark:fill-amber-400" />
+              <StarIcon className="w-2.5 h-2.5 fill-amber-500 dark:fill-amber-400" />
               Partner
             </span>
           )}
@@ -467,7 +467,7 @@ function FeatureCard({ feature, categoryColor }: FeatureCardProps) {
               onClick={handleLinkClick}
               className="p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
             >
-              <ArrowSquareOut className="w-3.5 h-3.5" />
+              <ArrowSquareOutIcon className="w-3.5 h-3.5" />
             </a>
           )}
         </div>
@@ -582,7 +582,7 @@ function ExamplePicker() {
             Start with a complete demo app
           </p>
         </div>
-        <CaretDown
+        <CaretDownIcon
           className={twMerge(
             'w-4 h-4 text-gray-400 transition-transform duration-200',
             isOpen && 'rotate-180',
@@ -617,7 +617,7 @@ function ExamplePicker() {
                       : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400',
                   )}
                 >
-                  <Sparkle className="w-4 h-4" />
+                  <SparkleIcon className="w-4 h-4" />
                 </div>
 
                 {/* Content */}
@@ -640,7 +640,7 @@ function ExamplePicker() {
                 {/* Deselect button when selected */}
                 {isSelected && (
                   <div className="shrink-0 p-1 text-purple-600 dark:text-purple-400">
-                    <X className="w-4 h-4" />
+                    <XIcon className="w-4 h-4" />
                   </div>
                 )}
               </button>
diff --git a/src/components/charts/ChartControls.tsx b/src/components/charts/ChartControls.tsx
index 3044cda0e..3cc5eb1ef 100644
--- a/src/components/charts/ChartControls.tsx
+++ b/src/components/charts/ChartControls.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CaretDown } from '@phosphor-icons/react'
+import { CaretDownIcon } from '@phosphor-icons/react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -47,7 +47,7 @@ export function ChartControls({
         <DropdownMenuTrigger asChild>
           <button className={buttonStyles.base}>
             {timeRangeOptions.find((r) => r.value === timeRange)?.label}
-            <CaretDown className="w-3 h-3" />
+            <CaretDownIcon className="w-3 h-3" />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="min-w-[120px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-1 z-50">
@@ -76,7 +76,7 @@ export function ChartControls({
             )}
           >
             {binningOptions.find((b) => b.value === binType)?.label}
-            <CaretDown className="w-3 h-3" />
+            <CaretDownIcon className="w-3 h-3" />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="min-w-[100px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-1 z-50">
diff --git a/src/components/charts/ChartsCatalogPages.tsx b/src/components/charts/ChartsCatalogPages.tsx
index 8b42d0263..f7c20b417 100644
--- a/src/components/charts/ChartsCatalogPages.tsx
+++ b/src/components/charts/ChartsCatalogPages.tsx
@@ -1,4 +1,4 @@
-import { ArrowsOutSimple, GridFour } from '@phosphor-icons/react'
+import { ArrowsOutSimpleIcon, GridFourIcon } from '@phosphor-icons/react'
 import { Link } from '@tanstack/react-router'
 import * as React from 'react'
 import type {
@@ -286,9 +286,9 @@ function CatalogToolbar({
         className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-600 hover:text-gray-950 aria-pressed:border-blue-500 aria-pressed:text-blue-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400 dark:hover:text-white dark:aria-pressed:border-blue-500 dark:aria-pressed:text-blue-400"
       >
         {fullWidth ? (
-          <GridFour aria-hidden="true" className="size-4" />
+          <GridFourIcon aria-hidden="true" className="size-4" />
         ) : (
-          <ArrowsOutSimple aria-hidden="true" className="size-4" />
+          <ArrowsOutSimpleIcon aria-hidden="true" className="size-4" />
         )}
         Full width
       </button>
diff --git a/src/components/ds/BrandAssets.tsx b/src/components/ds/BrandAssets.tsx
index 2ec708be2..0df3f31a2 100644
--- a/src/components/ds/BrandAssets.tsx
+++ b/src/components/ds/BrandAssets.tsx
@@ -1,4 +1,4 @@
-import { DownloadSimple } from '@phosphor-icons/react'
+import { DownloadSimpleIcon } from '@phosphor-icons/react'
 import { DsSection } from '~/components/ds/DsKit'
 
 type LogoTone = 'black' | 'charcoal' | 'cream' | 'white'
@@ -138,7 +138,7 @@ function AssetCard({ asset }: { asset: GalleryAsset }) {
               download
               className="inline-flex items-center gap-1.5 rounded-md border border-border-default bg-background-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-background-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
             >
-              <DownloadSimple size={14} aria-hidden="true" />
+              <DownloadSimpleIcon size={14} aria-hidden="true" />
               {download.format}
             </a>
           ))}
diff --git a/src/components/ds/DsKit.tsx b/src/components/ds/DsKit.tsx
index d3c77f16a..da76917e7 100644
--- a/src/components/ds/DsKit.tsx
+++ b/src/components/ds/DsKit.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Check, CaretDown, Code, Copy } from '@phosphor-icons/react'
+import {
+  CheckIcon,
+  CaretDownIcon,
+  CodeIcon,
+  CopyIcon,
+} from '@phosphor-icons/react'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 
 const descriptionStyles = {
@@ -143,9 +148,9 @@ export function ComponentPreview({
                 onClick={() => setShowCode((s) => !s)}
                 className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-background-subtle hover:text-text-primary"
               >
-                <Code className="h-3.5 w-3.5" />
+                <CodeIcon className="h-3.5 w-3.5" />
                 Code
-                <CaretDown
+                <CaretDownIcon
                   className={twMerge(
                     'h-3.5 w-3.5 transition-transform',
                     showCode && 'rotate-180',
@@ -159,9 +164,9 @@ export function ComponentPreview({
                 className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-background-subtle hover:text-text-primary"
               >
                 {copied ? (
-                  <Check className="h-3.5 w-3.5 text-green-500" />
+                  <CheckIcon className="h-3.5 w-3.5 text-green-500" />
                 ) : (
-                  <Copy className="h-3.5 w-3.5" />
+                  <CopyIcon className="h-3.5 w-3.5" />
                 )}
               </button>
             </div>
@@ -187,7 +192,7 @@ export function ComponentPreview({
                 onClick={() => setShowCode((visible) => !visible)}
                 className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-background-subtle hover:text-text-primary"
               >
-                <Code className="h-3.5 w-3.5" />
+                <CodeIcon className="h-3.5 w-3.5" />
                 Code
               </button>
               <button
@@ -197,9 +202,9 @@ export function ComponentPreview({
                 className="inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-background-subtle hover:text-text-primary"
               >
                 {copied ? (
-                  <Check className="h-3.5 w-3.5 text-green-500" />
+                  <CheckIcon className="h-3.5 w-3.5 text-green-500" />
                 ) : (
-                  <Copy className="h-3.5 w-3.5" />
+                  <CopyIcon className="h-3.5 w-3.5" />
                 )}
               </button>
             </div>
@@ -286,9 +291,9 @@ export function Swatch({ token }: { token: string }) {
       <div className="mt-1.5 flex items-center gap-1 text-xs font-medium text-text-primary">
         {token}
         {copied ? (
-          <Check className="h-3 w-3 text-status-success" />
+          <CheckIcon className="h-3 w-3 text-status-success" />
         ) : (
-          <Copy className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-60" />
+          <CopyIcon className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-60" />
         )}
       </div>
       <div className="font-ds-mono text-[11px] uppercase text-text-muted">
diff --git a/src/components/ds/phosphor-icons.generated.ts b/src/components/ds/phosphor-icons.generated.ts
index 13f2c9b3c..c1b98dc4d 100644
--- a/src/components/ds/phosphor-icons.generated.ts
+++ b/src/components/ds/phosphor-icons.generated.ts
@@ -2,3033 +2,3033 @@
 // Importing individual icon modules keeps this registry out of the shared
 // @phosphor-icons/react barrel used by the rest of the site.
 import type { Icon } from '@phosphor-icons/react'
-import { Acorn } from '@phosphor-icons/react/Acorn'
-import { AddressBook } from '@phosphor-icons/react/AddressBook'
-import { AddressBookTabs } from '@phosphor-icons/react/AddressBookTabs'
-import { Airplane } from '@phosphor-icons/react/Airplane'
-import { AirplaneInFlight } from '@phosphor-icons/react/AirplaneInFlight'
-import { AirplaneLanding } from '@phosphor-icons/react/AirplaneLanding'
-import { AirplaneTakeoff } from '@phosphor-icons/react/AirplaneTakeoff'
-import { AirplaneTaxiing } from '@phosphor-icons/react/AirplaneTaxiing'
-import { AirplaneTilt } from '@phosphor-icons/react/AirplaneTilt'
-import { Airplay } from '@phosphor-icons/react/Airplay'
-import { AirTrafficControl } from '@phosphor-icons/react/AirTrafficControl'
-import { Alarm } from '@phosphor-icons/react/Alarm'
-import { Alien } from '@phosphor-icons/react/Alien'
-import { AlignBottom } from '@phosphor-icons/react/AlignBottom'
-import { AlignBottomSimple } from '@phosphor-icons/react/AlignBottomSimple'
-import { AlignCenterHorizontal } from '@phosphor-icons/react/AlignCenterHorizontal'
-import { AlignCenterHorizontalSimple } from '@phosphor-icons/react/AlignCenterHorizontalSimple'
-import { AlignCenterVertical } from '@phosphor-icons/react/AlignCenterVertical'
-import { AlignCenterVerticalSimple } from '@phosphor-icons/react/AlignCenterVerticalSimple'
-import { AlignLeft } from '@phosphor-icons/react/AlignLeft'
-import { AlignLeftSimple } from '@phosphor-icons/react/AlignLeftSimple'
-import { AlignRight } from '@phosphor-icons/react/AlignRight'
-import { AlignRightSimple } from '@phosphor-icons/react/AlignRightSimple'
-import { AlignTop } from '@phosphor-icons/react/AlignTop'
-import { AlignTopSimple } from '@phosphor-icons/react/AlignTopSimple'
-import { AmazonLogo } from '@phosphor-icons/react/AmazonLogo'
-import { Ambulance } from '@phosphor-icons/react/Ambulance'
-import { Anchor } from '@phosphor-icons/react/Anchor'
-import { AnchorSimple } from '@phosphor-icons/react/AnchorSimple'
-import { AndroidLogo } from '@phosphor-icons/react/AndroidLogo'
-import { Angle } from '@phosphor-icons/react/Angle'
-import { AngularLogo } from '@phosphor-icons/react/AngularLogo'
-import { Aperture } from '@phosphor-icons/react/Aperture'
-import { AppleLogo } from '@phosphor-icons/react/AppleLogo'
-import { ApplePodcastsLogo } from '@phosphor-icons/react/ApplePodcastsLogo'
-import { ApproximateEquals } from '@phosphor-icons/react/ApproximateEquals'
-import { AppStoreLogo } from '@phosphor-icons/react/AppStoreLogo'
-import { AppWindow } from '@phosphor-icons/react/AppWindow'
-import { Archive } from '@phosphor-icons/react/Archive'
-import { Armchair } from '@phosphor-icons/react/Armchair'
-import { ArrowArcLeft } from '@phosphor-icons/react/ArrowArcLeft'
-import { ArrowArcRight } from '@phosphor-icons/react/ArrowArcRight'
-import { ArrowBendDoubleUpLeft } from '@phosphor-icons/react/ArrowBendDoubleUpLeft'
-import { ArrowBendDoubleUpRight } from '@phosphor-icons/react/ArrowBendDoubleUpRight'
-import { ArrowBendDownLeft } from '@phosphor-icons/react/ArrowBendDownLeft'
-import { ArrowBendDownRight } from '@phosphor-icons/react/ArrowBendDownRight'
-import { ArrowBendLeftDown } from '@phosphor-icons/react/ArrowBendLeftDown'
-import { ArrowBendLeftUp } from '@phosphor-icons/react/ArrowBendLeftUp'
-import { ArrowBendRightDown } from '@phosphor-icons/react/ArrowBendRightDown'
-import { ArrowBendRightUp } from '@phosphor-icons/react/ArrowBendRightUp'
-import { ArrowBendUpLeft } from '@phosphor-icons/react/ArrowBendUpLeft'
-import { ArrowBendUpRight } from '@phosphor-icons/react/ArrowBendUpRight'
-import { ArrowCircleDown } from '@phosphor-icons/react/ArrowCircleDown'
-import { ArrowCircleDownLeft } from '@phosphor-icons/react/ArrowCircleDownLeft'
-import { ArrowCircleDownRight } from '@phosphor-icons/react/ArrowCircleDownRight'
-import { ArrowCircleLeft } from '@phosphor-icons/react/ArrowCircleLeft'
-import { ArrowCircleRight } from '@phosphor-icons/react/ArrowCircleRight'
-import { ArrowCircleUp } from '@phosphor-icons/react/ArrowCircleUp'
-import { ArrowCircleUpLeft } from '@phosphor-icons/react/ArrowCircleUpLeft'
-import { ArrowCircleUpRight } from '@phosphor-icons/react/ArrowCircleUpRight'
-import { ArrowClockwise } from '@phosphor-icons/react/ArrowClockwise'
-import { ArrowCounterClockwise } from '@phosphor-icons/react/ArrowCounterClockwise'
-import { ArrowDown } from '@phosphor-icons/react/ArrowDown'
-import { ArrowDownLeft } from '@phosphor-icons/react/ArrowDownLeft'
-import { ArrowDownRight } from '@phosphor-icons/react/ArrowDownRight'
-import { ArrowElbowDownLeft } from '@phosphor-icons/react/ArrowElbowDownLeft'
-import { ArrowElbowDownRight } from '@phosphor-icons/react/ArrowElbowDownRight'
-import { ArrowElbowLeft } from '@phosphor-icons/react/ArrowElbowLeft'
-import { ArrowElbowLeftDown } from '@phosphor-icons/react/ArrowElbowLeftDown'
-import { ArrowElbowLeftUp } from '@phosphor-icons/react/ArrowElbowLeftUp'
-import { ArrowElbowRight } from '@phosphor-icons/react/ArrowElbowRight'
-import { ArrowElbowRightDown } from '@phosphor-icons/react/ArrowElbowRightDown'
-import { ArrowElbowRightUp } from '@phosphor-icons/react/ArrowElbowRightUp'
-import { ArrowElbowUpLeft } from '@phosphor-icons/react/ArrowElbowUpLeft'
-import { ArrowElbowUpRight } from '@phosphor-icons/react/ArrowElbowUpRight'
-import { ArrowFatDown } from '@phosphor-icons/react/ArrowFatDown'
-import { ArrowFatLeft } from '@phosphor-icons/react/ArrowFatLeft'
-import { ArrowFatLineDown } from '@phosphor-icons/react/ArrowFatLineDown'
-import { ArrowFatLineLeft } from '@phosphor-icons/react/ArrowFatLineLeft'
-import { ArrowFatLineRight } from '@phosphor-icons/react/ArrowFatLineRight'
-import { ArrowFatLinesDown } from '@phosphor-icons/react/ArrowFatLinesDown'
-import { ArrowFatLinesLeft } from '@phosphor-icons/react/ArrowFatLinesLeft'
-import { ArrowFatLinesRight } from '@phosphor-icons/react/ArrowFatLinesRight'
-import { ArrowFatLinesUp } from '@phosphor-icons/react/ArrowFatLinesUp'
-import { ArrowFatLineUp } from '@phosphor-icons/react/ArrowFatLineUp'
-import { ArrowFatRight } from '@phosphor-icons/react/ArrowFatRight'
-import { ArrowFatUp } from '@phosphor-icons/react/ArrowFatUp'
-import { ArrowLeft } from '@phosphor-icons/react/ArrowLeft'
-import { ArrowLineDown } from '@phosphor-icons/react/ArrowLineDown'
-import { ArrowLineDownLeft } from '@phosphor-icons/react/ArrowLineDownLeft'
-import { ArrowLineDownRight } from '@phosphor-icons/react/ArrowLineDownRight'
-import { ArrowLineLeft } from '@phosphor-icons/react/ArrowLineLeft'
-import { ArrowLineRight } from '@phosphor-icons/react/ArrowLineRight'
-import { ArrowLineUp } from '@phosphor-icons/react/ArrowLineUp'
-import { ArrowLineUpLeft } from '@phosphor-icons/react/ArrowLineUpLeft'
-import { ArrowLineUpRight } from '@phosphor-icons/react/ArrowLineUpRight'
-import { ArrowRight } from '@phosphor-icons/react/ArrowRight'
-import { ArrowsClockwise } from '@phosphor-icons/react/ArrowsClockwise'
-import { ArrowsCounterClockwise } from '@phosphor-icons/react/ArrowsCounterClockwise'
-import { ArrowsDownUp } from '@phosphor-icons/react/ArrowsDownUp'
-import { ArrowsHorizontal } from '@phosphor-icons/react/ArrowsHorizontal'
-import { ArrowsIn } from '@phosphor-icons/react/ArrowsIn'
-import { ArrowsInCardinal } from '@phosphor-icons/react/ArrowsInCardinal'
-import { ArrowsInLineHorizontal } from '@phosphor-icons/react/ArrowsInLineHorizontal'
-import { ArrowsInLineVertical } from '@phosphor-icons/react/ArrowsInLineVertical'
-import { ArrowsInSimple } from '@phosphor-icons/react/ArrowsInSimple'
-import { ArrowsLeftRight } from '@phosphor-icons/react/ArrowsLeftRight'
-import { ArrowsMerge } from '@phosphor-icons/react/ArrowsMerge'
-import { ArrowsOut } from '@phosphor-icons/react/ArrowsOut'
-import { ArrowsOutCardinal } from '@phosphor-icons/react/ArrowsOutCardinal'
-import { ArrowsOutLineHorizontal } from '@phosphor-icons/react/ArrowsOutLineHorizontal'
-import { ArrowsOutLineVertical } from '@phosphor-icons/react/ArrowsOutLineVertical'
-import { ArrowsOutSimple } from '@phosphor-icons/react/ArrowsOutSimple'
-import { ArrowSquareDown } from '@phosphor-icons/react/ArrowSquareDown'
-import { ArrowSquareDownLeft } from '@phosphor-icons/react/ArrowSquareDownLeft'
-import { ArrowSquareDownRight } from '@phosphor-icons/react/ArrowSquareDownRight'
-import { ArrowSquareIn } from '@phosphor-icons/react/ArrowSquareIn'
-import { ArrowSquareLeft } from '@phosphor-icons/react/ArrowSquareLeft'
-import { ArrowSquareOut } from '@phosphor-icons/react/ArrowSquareOut'
-import { ArrowSquareRight } from '@phosphor-icons/react/ArrowSquareRight'
-import { ArrowSquareUp } from '@phosphor-icons/react/ArrowSquareUp'
-import { ArrowSquareUpLeft } from '@phosphor-icons/react/ArrowSquareUpLeft'
-import { ArrowSquareUpRight } from '@phosphor-icons/react/ArrowSquareUpRight'
-import { ArrowsSplit } from '@phosphor-icons/react/ArrowsSplit'
-import { ArrowsVertical } from '@phosphor-icons/react/ArrowsVertical'
-import { ArrowUDownLeft } from '@phosphor-icons/react/ArrowUDownLeft'
-import { ArrowUDownRight } from '@phosphor-icons/react/ArrowUDownRight'
-import { ArrowULeftDown } from '@phosphor-icons/react/ArrowULeftDown'
-import { ArrowULeftUp } from '@phosphor-icons/react/ArrowULeftUp'
-import { ArrowUp } from '@phosphor-icons/react/ArrowUp'
-import { ArrowUpLeft } from '@phosphor-icons/react/ArrowUpLeft'
-import { ArrowUpRight } from '@phosphor-icons/react/ArrowUpRight'
-import { ArrowURightDown } from '@phosphor-icons/react/ArrowURightDown'
-import { ArrowURightUp } from '@phosphor-icons/react/ArrowURightUp'
-import { ArrowUUpLeft } from '@phosphor-icons/react/ArrowUUpLeft'
-import { ArrowUUpRight } from '@phosphor-icons/react/ArrowUUpRight'
-import { Article } from '@phosphor-icons/react/Article'
-import { ArticleMedium } from '@phosphor-icons/react/ArticleMedium'
-import { ArticleNyTimes } from '@phosphor-icons/react/ArticleNyTimes'
-import { Asclepius } from '@phosphor-icons/react/Asclepius'
-import { Asterisk } from '@phosphor-icons/react/Asterisk'
-import { AsteriskSimple } from '@phosphor-icons/react/AsteriskSimple'
-import { At } from '@phosphor-icons/react/At'
-import { Atom } from '@phosphor-icons/react/Atom'
-import { Avocado } from '@phosphor-icons/react/Avocado'
-import { Axe } from '@phosphor-icons/react/Axe'
-import { Baby } from '@phosphor-icons/react/Baby'
-import { BabyCarriage } from '@phosphor-icons/react/BabyCarriage'
-import { Backpack } from '@phosphor-icons/react/Backpack'
-import { Backspace } from '@phosphor-icons/react/Backspace'
-import { Bag } from '@phosphor-icons/react/Bag'
-import { BagSimple } from '@phosphor-icons/react/BagSimple'
-import { Balloon } from '@phosphor-icons/react/Balloon'
-import { Bandaids } from '@phosphor-icons/react/Bandaids'
-import { Bank } from '@phosphor-icons/react/Bank'
-import { Barbell } from '@phosphor-icons/react/Barbell'
-import { Barcode } from '@phosphor-icons/react/Barcode'
-import { Barn } from '@phosphor-icons/react/Barn'
-import { Barricade } from '@phosphor-icons/react/Barricade'
-import { Baseball } from '@phosphor-icons/react/Baseball'
-import { BaseballCap } from '@phosphor-icons/react/BaseballCap'
-import { BaseballHelmet } from '@phosphor-icons/react/BaseballHelmet'
-import { Basket } from '@phosphor-icons/react/Basket'
-import { Basketball } from '@phosphor-icons/react/Basketball'
-import { Bathtub } from '@phosphor-icons/react/Bathtub'
-import { BatteryCharging } from '@phosphor-icons/react/BatteryCharging'
-import { BatteryChargingVertical } from '@phosphor-icons/react/BatteryChargingVertical'
-import { BatteryEmpty } from '@phosphor-icons/react/BatteryEmpty'
-import { BatteryFull } from '@phosphor-icons/react/BatteryFull'
-import { BatteryHigh } from '@phosphor-icons/react/BatteryHigh'
-import { BatteryLow } from '@phosphor-icons/react/BatteryLow'
-import { BatteryMedium } from '@phosphor-icons/react/BatteryMedium'
-import { BatteryPlus } from '@phosphor-icons/react/BatteryPlus'
-import { BatteryPlusVertical } from '@phosphor-icons/react/BatteryPlusVertical'
-import { BatteryVerticalEmpty } from '@phosphor-icons/react/BatteryVerticalEmpty'
-import { BatteryVerticalFull } from '@phosphor-icons/react/BatteryVerticalFull'
-import { BatteryVerticalHigh } from '@phosphor-icons/react/BatteryVerticalHigh'
-import { BatteryVerticalLow } from '@phosphor-icons/react/BatteryVerticalLow'
-import { BatteryVerticalMedium } from '@phosphor-icons/react/BatteryVerticalMedium'
-import { BatteryWarning } from '@phosphor-icons/react/BatteryWarning'
-import { BatteryWarningVertical } from '@phosphor-icons/react/BatteryWarningVertical'
-import { BeachBall } from '@phosphor-icons/react/BeachBall'
-import { Beanie } from '@phosphor-icons/react/Beanie'
-import { Bed } from '@phosphor-icons/react/Bed'
-import { BeerBottle } from '@phosphor-icons/react/BeerBottle'
-import { BeerStein } from '@phosphor-icons/react/BeerStein'
-import { BehanceLogo } from '@phosphor-icons/react/BehanceLogo'
-import { Bell } from '@phosphor-icons/react/Bell'
-import { BellRinging } from '@phosphor-icons/react/BellRinging'
-import { BellSimple } from '@phosphor-icons/react/BellSimple'
-import { BellSimpleRinging } from '@phosphor-icons/react/BellSimpleRinging'
-import { BellSimpleSlash } from '@phosphor-icons/react/BellSimpleSlash'
-import { BellSimpleZ } from '@phosphor-icons/react/BellSimpleZ'
-import { BellSlash } from '@phosphor-icons/react/BellSlash'
-import { BellZ } from '@phosphor-icons/react/BellZ'
-import { Belt } from '@phosphor-icons/react/Belt'
-import { BezierCurve } from '@phosphor-icons/react/BezierCurve'
-import { Bicycle } from '@phosphor-icons/react/Bicycle'
-import { Binary } from '@phosphor-icons/react/Binary'
-import { Binoculars } from '@phosphor-icons/react/Binoculars'
-import { Biohazard } from '@phosphor-icons/react/Biohazard'
-import { Bird } from '@phosphor-icons/react/Bird'
-import { Blueprint } from '@phosphor-icons/react/Blueprint'
-import { Bluetooth } from '@phosphor-icons/react/Bluetooth'
-import { BluetoothConnected } from '@phosphor-icons/react/BluetoothConnected'
-import { BluetoothSlash } from '@phosphor-icons/react/BluetoothSlash'
-import { BluetoothX } from '@phosphor-icons/react/BluetoothX'
-import { Boat } from '@phosphor-icons/react/Boat'
-import { Bomb } from '@phosphor-icons/react/Bomb'
-import { Bone } from '@phosphor-icons/react/Bone'
-import { Book } from '@phosphor-icons/react/Book'
-import { BookBookmark } from '@phosphor-icons/react/BookBookmark'
-import { Bookmark } from '@phosphor-icons/react/Bookmark'
-import { Bookmarks } from '@phosphor-icons/react/Bookmarks'
-import { BookmarkSimple } from '@phosphor-icons/react/BookmarkSimple'
-import { BookmarksSimple } from '@phosphor-icons/react/BookmarksSimple'
-import { BookOpen } from '@phosphor-icons/react/BookOpen'
-import { BookOpenText } from '@phosphor-icons/react/BookOpenText'
-import { BookOpenUser } from '@phosphor-icons/react/BookOpenUser'
-import { Books } from '@phosphor-icons/react/Books'
-import { Boot } from '@phosphor-icons/react/Boot'
-import { Boules } from '@phosphor-icons/react/Boules'
-import { BoundingBox } from '@phosphor-icons/react/BoundingBox'
-import { BowlFood } from '@phosphor-icons/react/BowlFood'
-import { BowlingBall } from '@phosphor-icons/react/BowlingBall'
-import { BowlSteam } from '@phosphor-icons/react/BowlSteam'
-import { BoxArrowDown } from '@phosphor-icons/react/BoxArrowDown'
-import { BoxArrowUp } from '@phosphor-icons/react/BoxArrowUp'
-import { BoxingGlove } from '@phosphor-icons/react/BoxingGlove'
-import { BracketsAngle } from '@phosphor-icons/react/BracketsAngle'
-import { BracketsCurly } from '@phosphor-icons/react/BracketsCurly'
-import { BracketsRound } from '@phosphor-icons/react/BracketsRound'
-import { BracketsSquare } from '@phosphor-icons/react/BracketsSquare'
-import { Brain } from '@phosphor-icons/react/Brain'
-import { Brandy } from '@phosphor-icons/react/Brandy'
-import { Bread } from '@phosphor-icons/react/Bread'
-import { Bridge } from '@phosphor-icons/react/Bridge'
-import { Briefcase } from '@phosphor-icons/react/Briefcase'
-import { BriefcaseMetal } from '@phosphor-icons/react/BriefcaseMetal'
-import { Broadcast } from '@phosphor-icons/react/Broadcast'
-import { Broom } from '@phosphor-icons/react/Broom'
-import { Browser } from '@phosphor-icons/react/Browser'
-import { Browsers } from '@phosphor-icons/react/Browsers'
-import { Bug } from '@phosphor-icons/react/Bug'
-import { BugBeetle } from '@phosphor-icons/react/BugBeetle'
-import { BugDroid } from '@phosphor-icons/react/BugDroid'
-import { Building } from '@phosphor-icons/react/Building'
-import { BuildingApartment } from '@phosphor-icons/react/BuildingApartment'
-import { BuildingOffice } from '@phosphor-icons/react/BuildingOffice'
-import { Buildings } from '@phosphor-icons/react/Buildings'
-import { Bulldozer } from '@phosphor-icons/react/Bulldozer'
-import { Bus } from '@phosphor-icons/react/Bus'
-import { Butterfly } from '@phosphor-icons/react/Butterfly'
-import { CableCar } from '@phosphor-icons/react/CableCar'
-import { Cactus } from '@phosphor-icons/react/Cactus'
-import { Cake } from '@phosphor-icons/react/Cake'
-import { Calculator } from '@phosphor-icons/react/Calculator'
-import { Calendar } from '@phosphor-icons/react/Calendar'
-import { CalendarBlank } from '@phosphor-icons/react/CalendarBlank'
-import { CalendarCheck } from '@phosphor-icons/react/CalendarCheck'
-import { CalendarDot } from '@phosphor-icons/react/CalendarDot'
-import { CalendarDots } from '@phosphor-icons/react/CalendarDots'
-import { CalendarHeart } from '@phosphor-icons/react/CalendarHeart'
-import { CalendarMinus } from '@phosphor-icons/react/CalendarMinus'
-import { CalendarPlus } from '@phosphor-icons/react/CalendarPlus'
-import { CalendarSlash } from '@phosphor-icons/react/CalendarSlash'
-import { CalendarStar } from '@phosphor-icons/react/CalendarStar'
-import { CalendarX } from '@phosphor-icons/react/CalendarX'
-import { CallBell } from '@phosphor-icons/react/CallBell'
-import { Camera } from '@phosphor-icons/react/Camera'
-import { CameraPlus } from '@phosphor-icons/react/CameraPlus'
-import { CameraRotate } from '@phosphor-icons/react/CameraRotate'
-import { CameraSlash } from '@phosphor-icons/react/CameraSlash'
-import { Campfire } from '@phosphor-icons/react/Campfire'
-import { Car } from '@phosphor-icons/react/Car'
-import { CarBattery } from '@phosphor-icons/react/CarBattery'
-import { Cardholder } from '@phosphor-icons/react/Cardholder'
-import { Cards } from '@phosphor-icons/react/Cards'
-import { CardsThree } from '@phosphor-icons/react/CardsThree'
-import { CaretCircleDoubleDown } from '@phosphor-icons/react/CaretCircleDoubleDown'
-import { CaretCircleDoubleLeft } from '@phosphor-icons/react/CaretCircleDoubleLeft'
-import { CaretCircleDoubleRight } from '@phosphor-icons/react/CaretCircleDoubleRight'
-import { CaretCircleDoubleUp } from '@phosphor-icons/react/CaretCircleDoubleUp'
-import { CaretCircleDown } from '@phosphor-icons/react/CaretCircleDown'
-import { CaretCircleLeft } from '@phosphor-icons/react/CaretCircleLeft'
-import { CaretCircleRight } from '@phosphor-icons/react/CaretCircleRight'
-import { CaretCircleUp } from '@phosphor-icons/react/CaretCircleUp'
-import { CaretCircleUpDown } from '@phosphor-icons/react/CaretCircleUpDown'
-import { CaretDoubleDown } from '@phosphor-icons/react/CaretDoubleDown'
-import { CaretDoubleLeft } from '@phosphor-icons/react/CaretDoubleLeft'
-import { CaretDoubleRight } from '@phosphor-icons/react/CaretDoubleRight'
-import { CaretDoubleUp } from '@phosphor-icons/react/CaretDoubleUp'
-import { CaretDown } from '@phosphor-icons/react/CaretDown'
-import { CaretLeft } from '@phosphor-icons/react/CaretLeft'
-import { CaretLineDown } from '@phosphor-icons/react/CaretLineDown'
-import { CaretLineLeft } from '@phosphor-icons/react/CaretLineLeft'
-import { CaretLineRight } from '@phosphor-icons/react/CaretLineRight'
-import { CaretLineUp } from '@phosphor-icons/react/CaretLineUp'
-import { CaretRight } from '@phosphor-icons/react/CaretRight'
-import { CaretUp } from '@phosphor-icons/react/CaretUp'
-import { CaretUpDown } from '@phosphor-icons/react/CaretUpDown'
-import { CarProfile } from '@phosphor-icons/react/CarProfile'
-import { Carrot } from '@phosphor-icons/react/Carrot'
-import { CarSimple } from '@phosphor-icons/react/CarSimple'
-import { CashRegister } from '@phosphor-icons/react/CashRegister'
-import { CassetteTape } from '@phosphor-icons/react/CassetteTape'
-import { CastleTurret } from '@phosphor-icons/react/CastleTurret'
-import { Cat } from '@phosphor-icons/react/Cat'
-import { CellSignalFull } from '@phosphor-icons/react/CellSignalFull'
-import { CellSignalHigh } from '@phosphor-icons/react/CellSignalHigh'
-import { CellSignalLow } from '@phosphor-icons/react/CellSignalLow'
-import { CellSignalMedium } from '@phosphor-icons/react/CellSignalMedium'
-import { CellSignalNone } from '@phosphor-icons/react/CellSignalNone'
-import { CellSignalSlash } from '@phosphor-icons/react/CellSignalSlash'
-import { CellSignalX } from '@phosphor-icons/react/CellSignalX'
-import { CellTower } from '@phosphor-icons/react/CellTower'
-import { Certificate } from '@phosphor-icons/react/Certificate'
-import { Chair } from '@phosphor-icons/react/Chair'
-import { Chalkboard } from '@phosphor-icons/react/Chalkboard'
-import { ChalkboardSimple } from '@phosphor-icons/react/ChalkboardSimple'
-import { ChalkboardTeacher } from '@phosphor-icons/react/ChalkboardTeacher'
-import { Champagne } from '@phosphor-icons/react/Champagne'
-import { ChargingStation } from '@phosphor-icons/react/ChargingStation'
-import { ChartBar } from '@phosphor-icons/react/ChartBar'
-import { ChartBarHorizontal } from '@phosphor-icons/react/ChartBarHorizontal'
-import { ChartDonut } from '@phosphor-icons/react/ChartDonut'
-import { ChartLine } from '@phosphor-icons/react/ChartLine'
-import { ChartLineDown } from '@phosphor-icons/react/ChartLineDown'
-import { ChartLineUp } from '@phosphor-icons/react/ChartLineUp'
-import { ChartPie } from '@phosphor-icons/react/ChartPie'
-import { ChartPieSlice } from '@phosphor-icons/react/ChartPieSlice'
-import { ChartPolar } from '@phosphor-icons/react/ChartPolar'
-import { ChartScatter } from '@phosphor-icons/react/ChartScatter'
-import { Chat } from '@phosphor-icons/react/Chat'
-import { ChatCentered } from '@phosphor-icons/react/ChatCentered'
-import { ChatCenteredDots } from '@phosphor-icons/react/ChatCenteredDots'
-import { ChatCenteredSlash } from '@phosphor-icons/react/ChatCenteredSlash'
-import { ChatCenteredText } from '@phosphor-icons/react/ChatCenteredText'
-import { ChatCircle } from '@phosphor-icons/react/ChatCircle'
-import { ChatCircleDots } from '@phosphor-icons/react/ChatCircleDots'
-import { ChatCircleSlash } from '@phosphor-icons/react/ChatCircleSlash'
-import { ChatCircleText } from '@phosphor-icons/react/ChatCircleText'
-import { ChatDots } from '@phosphor-icons/react/ChatDots'
-import { Chats } from '@phosphor-icons/react/Chats'
-import { ChatsCircle } from '@phosphor-icons/react/ChatsCircle'
-import { ChatSlash } from '@phosphor-icons/react/ChatSlash'
-import { ChatsTeardrop } from '@phosphor-icons/react/ChatsTeardrop'
-import { ChatTeardrop } from '@phosphor-icons/react/ChatTeardrop'
-import { ChatTeardropDots } from '@phosphor-icons/react/ChatTeardropDots'
-import { ChatTeardropSlash } from '@phosphor-icons/react/ChatTeardropSlash'
-import { ChatTeardropText } from '@phosphor-icons/react/ChatTeardropText'
-import { ChatText } from '@phosphor-icons/react/ChatText'
-import { Check } from '@phosphor-icons/react/Check'
-import { CheckCircle } from '@phosphor-icons/react/CheckCircle'
-import { Checkerboard } from '@phosphor-icons/react/Checkerboard'
-import { CheckFat } from '@phosphor-icons/react/CheckFat'
-import { Checks } from '@phosphor-icons/react/Checks'
-import { CheckSquare } from '@phosphor-icons/react/CheckSquare'
-import { CheckSquareOffset } from '@phosphor-icons/react/CheckSquareOffset'
-import { Cheers } from '@phosphor-icons/react/Cheers'
-import { Cheese } from '@phosphor-icons/react/Cheese'
-import { ChefHat } from '@phosphor-icons/react/ChefHat'
-import { Cherries } from '@phosphor-icons/react/Cherries'
-import { Church } from '@phosphor-icons/react/Church'
-import { Cigarette } from '@phosphor-icons/react/Cigarette'
-import { CigaretteSlash } from '@phosphor-icons/react/CigaretteSlash'
-import { Circle } from '@phosphor-icons/react/Circle'
-import { CircleDashed } from '@phosphor-icons/react/CircleDashed'
-import { CircleHalf } from '@phosphor-icons/react/CircleHalf'
-import { CircleHalfTilt } from '@phosphor-icons/react/CircleHalfTilt'
-import { CircleNotch } from '@phosphor-icons/react/CircleNotch'
-import { CirclesFour } from '@phosphor-icons/react/CirclesFour'
-import { CirclesThree } from '@phosphor-icons/react/CirclesThree'
-import { CirclesThreePlus } from '@phosphor-icons/react/CirclesThreePlus'
-import { Circuitry } from '@phosphor-icons/react/Circuitry'
-import { City } from '@phosphor-icons/react/City'
-import { Clipboard } from '@phosphor-icons/react/Clipboard'
-import { ClipboardText } from '@phosphor-icons/react/ClipboardText'
-import { Clock } from '@phosphor-icons/react/Clock'
-import { ClockAfternoon } from '@phosphor-icons/react/ClockAfternoon'
-import { ClockClockwise } from '@phosphor-icons/react/ClockClockwise'
-import { ClockCountdown } from '@phosphor-icons/react/ClockCountdown'
-import { ClockCounterClockwise } from '@phosphor-icons/react/ClockCounterClockwise'
-import { ClockUser } from '@phosphor-icons/react/ClockUser'
-import { ClosedCaptioning } from '@phosphor-icons/react/ClosedCaptioning'
-import { Cloud } from '@phosphor-icons/react/Cloud'
-import { CloudArrowDown } from '@phosphor-icons/react/CloudArrowDown'
-import { CloudArrowUp } from '@phosphor-icons/react/CloudArrowUp'
-import { CloudCheck } from '@phosphor-icons/react/CloudCheck'
-import { CloudFog } from '@phosphor-icons/react/CloudFog'
-import { CloudLightning } from '@phosphor-icons/react/CloudLightning'
-import { CloudMoon } from '@phosphor-icons/react/CloudMoon'
-import { CloudRain } from '@phosphor-icons/react/CloudRain'
-import { CloudSlash } from '@phosphor-icons/react/CloudSlash'
-import { CloudSnow } from '@phosphor-icons/react/CloudSnow'
-import { CloudSun } from '@phosphor-icons/react/CloudSun'
-import { CloudWarning } from '@phosphor-icons/react/CloudWarning'
-import { CloudX } from '@phosphor-icons/react/CloudX'
-import { Clover } from '@phosphor-icons/react/Clover'
-import { Club } from '@phosphor-icons/react/Club'
-import { CoatHanger } from '@phosphor-icons/react/CoatHanger'
-import { CodaLogo } from '@phosphor-icons/react/CodaLogo'
-import { Code } from '@phosphor-icons/react/Code'
-import { CodeBlock } from '@phosphor-icons/react/CodeBlock'
-import { CodepenLogo } from '@phosphor-icons/react/CodepenLogo'
-import { CodesandboxLogo } from '@phosphor-icons/react/CodesandboxLogo'
-import { CodeSimple } from '@phosphor-icons/react/CodeSimple'
-import { Coffee } from '@phosphor-icons/react/Coffee'
-import { CoffeeBean } from '@phosphor-icons/react/CoffeeBean'
-import { Coin } from '@phosphor-icons/react/Coin'
-import { Coins } from '@phosphor-icons/react/Coins'
-import { CoinVertical } from '@phosphor-icons/react/CoinVertical'
-import { Columns } from '@phosphor-icons/react/Columns'
-import { ColumnsPlusLeft } from '@phosphor-icons/react/ColumnsPlusLeft'
-import { ColumnsPlusRight } from '@phosphor-icons/react/ColumnsPlusRight'
-import { Command } from '@phosphor-icons/react/Command'
-import { Compass } from '@phosphor-icons/react/Compass'
-import { CompassRose } from '@phosphor-icons/react/CompassRose'
-import { CompassTool } from '@phosphor-icons/react/CompassTool'
-import { ComputerTower } from '@phosphor-icons/react/ComputerTower'
-import { Confetti } from '@phosphor-icons/react/Confetti'
-import { ContactlessPayment } from '@phosphor-icons/react/ContactlessPayment'
-import { Control } from '@phosphor-icons/react/Control'
-import { Cookie } from '@phosphor-icons/react/Cookie'
-import { CookingPot } from '@phosphor-icons/react/CookingPot'
-import { Copy } from '@phosphor-icons/react/Copy'
-import { Copyleft } from '@phosphor-icons/react/Copyleft'
-import { Copyright } from '@phosphor-icons/react/Copyright'
-import { CopySimple } from '@phosphor-icons/react/CopySimple'
-import { CornersIn } from '@phosphor-icons/react/CornersIn'
-import { CornersOut } from '@phosphor-icons/react/CornersOut'
-import { Couch } from '@phosphor-icons/react/Couch'
-import { CourtBasketball } from '@phosphor-icons/react/CourtBasketball'
-import { Cow } from '@phosphor-icons/react/Cow'
-import { CowboyHat } from '@phosphor-icons/react/CowboyHat'
-import { Cpu } from '@phosphor-icons/react/Cpu'
-import { Crane } from '@phosphor-icons/react/Crane'
-import { CraneTower } from '@phosphor-icons/react/CraneTower'
-import { CreditCard } from '@phosphor-icons/react/CreditCard'
-import { Cricket } from '@phosphor-icons/react/Cricket'
-import { Crop } from '@phosphor-icons/react/Crop'
-import { Cross } from '@phosphor-icons/react/Cross'
-import { Crosshair } from '@phosphor-icons/react/Crosshair'
-import { CrosshairSimple } from '@phosphor-icons/react/CrosshairSimple'
-import { Crown } from '@phosphor-icons/react/Crown'
-import { CrownCross } from '@phosphor-icons/react/CrownCross'
-import { CrownSimple } from '@phosphor-icons/react/CrownSimple'
-import { Cube } from '@phosphor-icons/react/Cube'
-import { CubeFocus } from '@phosphor-icons/react/CubeFocus'
-import { CubeTransparent } from '@phosphor-icons/react/CubeTransparent'
-import { CurrencyBtc } from '@phosphor-icons/react/CurrencyBtc'
-import { CurrencyCircleDollar } from '@phosphor-icons/react/CurrencyCircleDollar'
-import { CurrencyCny } from '@phosphor-icons/react/CurrencyCny'
-import { CurrencyDollar } from '@phosphor-icons/react/CurrencyDollar'
-import { CurrencyDollarSimple } from '@phosphor-icons/react/CurrencyDollarSimple'
-import { CurrencyEth } from '@phosphor-icons/react/CurrencyEth'
-import { CurrencyEur } from '@phosphor-icons/react/CurrencyEur'
-import { CurrencyGbp } from '@phosphor-icons/react/CurrencyGbp'
-import { CurrencyInr } from '@phosphor-icons/react/CurrencyInr'
-import { CurrencyJpy } from '@phosphor-icons/react/CurrencyJpy'
-import { CurrencyKrw } from '@phosphor-icons/react/CurrencyKrw'
-import { CurrencyKzt } from '@phosphor-icons/react/CurrencyKzt'
-import { CurrencyNgn } from '@phosphor-icons/react/CurrencyNgn'
-import { CurrencyRub } from '@phosphor-icons/react/CurrencyRub'
-import { Cursor } from '@phosphor-icons/react/Cursor'
-import { CursorClick } from '@phosphor-icons/react/CursorClick'
-import { CursorText } from '@phosphor-icons/react/CursorText'
-import { Cylinder } from '@phosphor-icons/react/Cylinder'
-import { Database } from '@phosphor-icons/react/Database'
-import { Desk } from '@phosphor-icons/react/Desk'
-import { Desktop } from '@phosphor-icons/react/Desktop'
-import { DesktopTower } from '@phosphor-icons/react/DesktopTower'
-import { Detective } from '@phosphor-icons/react/Detective'
-import { DeviceMobile } from '@phosphor-icons/react/DeviceMobile'
-import { DeviceMobileCamera } from '@phosphor-icons/react/DeviceMobileCamera'
-import { DeviceMobileSlash } from '@phosphor-icons/react/DeviceMobileSlash'
-import { DeviceMobileSpeaker } from '@phosphor-icons/react/DeviceMobileSpeaker'
-import { DeviceRotate } from '@phosphor-icons/react/DeviceRotate'
-import { Devices } from '@phosphor-icons/react/Devices'
-import { DeviceTablet } from '@phosphor-icons/react/DeviceTablet'
-import { DeviceTabletCamera } from '@phosphor-icons/react/DeviceTabletCamera'
-import { DeviceTabletSpeaker } from '@phosphor-icons/react/DeviceTabletSpeaker'
-import { DevToLogo } from '@phosphor-icons/react/DevToLogo'
-import { Diamond } from '@phosphor-icons/react/Diamond'
-import { DiamondsFour } from '@phosphor-icons/react/DiamondsFour'
-import { DiceFive } from '@phosphor-icons/react/DiceFive'
-import { DiceFour } from '@phosphor-icons/react/DiceFour'
-import { DiceOne } from '@phosphor-icons/react/DiceOne'
-import { DiceSix } from '@phosphor-icons/react/DiceSix'
-import { DiceThree } from '@phosphor-icons/react/DiceThree'
-import { DiceTwo } from '@phosphor-icons/react/DiceTwo'
-import { Disc } from '@phosphor-icons/react/Disc'
-import { DiscoBall } from '@phosphor-icons/react/DiscoBall'
-import { DiscordLogo } from '@phosphor-icons/react/DiscordLogo'
-import { Divide } from '@phosphor-icons/react/Divide'
-import { Dna } from '@phosphor-icons/react/Dna'
-import { Dog } from '@phosphor-icons/react/Dog'
-import { Door } from '@phosphor-icons/react/Door'
-import { DoorOpen } from '@phosphor-icons/react/DoorOpen'
-import { Dot } from '@phosphor-icons/react/Dot'
-import { DotOutline } from '@phosphor-icons/react/DotOutline'
-import { DotsNine } from '@phosphor-icons/react/DotsNine'
-import { DotsSix } from '@phosphor-icons/react/DotsSix'
-import { DotsSixVertical } from '@phosphor-icons/react/DotsSixVertical'
-import { DotsThree } from '@phosphor-icons/react/DotsThree'
-import { DotsThreeCircle } from '@phosphor-icons/react/DotsThreeCircle'
-import { DotsThreeCircleVertical } from '@phosphor-icons/react/DotsThreeCircleVertical'
-import { DotsThreeOutline } from '@phosphor-icons/react/DotsThreeOutline'
-import { DotsThreeOutlineVertical } from '@phosphor-icons/react/DotsThreeOutlineVertical'
-import { DotsThreeVertical } from '@phosphor-icons/react/DotsThreeVertical'
-import { Download } from '@phosphor-icons/react/Download'
-import { DownloadSimple } from '@phosphor-icons/react/DownloadSimple'
-import { Dress } from '@phosphor-icons/react/Dress'
-import { Dresser } from '@phosphor-icons/react/Dresser'
-import { DribbbleLogo } from '@phosphor-icons/react/DribbbleLogo'
-import { Drone } from '@phosphor-icons/react/Drone'
-import { Drop } from '@phosphor-icons/react/Drop'
-import { DropboxLogo } from '@phosphor-icons/react/DropboxLogo'
-import { DropHalf } from '@phosphor-icons/react/DropHalf'
-import { DropHalfBottom } from '@phosphor-icons/react/DropHalfBottom'
-import { DropSimple } from '@phosphor-icons/react/DropSimple'
-import { DropSlash } from '@phosphor-icons/react/DropSlash'
-import { Ear } from '@phosphor-icons/react/Ear'
-import { EarSlash } from '@phosphor-icons/react/EarSlash'
-import { Egg } from '@phosphor-icons/react/Egg'
-import { EggCrack } from '@phosphor-icons/react/EggCrack'
-import { Eject } from '@phosphor-icons/react/Eject'
-import { EjectSimple } from '@phosphor-icons/react/EjectSimple'
-import { Elevator } from '@phosphor-icons/react/Elevator'
-import { Empty } from '@phosphor-icons/react/Empty'
-import { Engine } from '@phosphor-icons/react/Engine'
-import { Envelope } from '@phosphor-icons/react/Envelope'
-import { EnvelopeOpen } from '@phosphor-icons/react/EnvelopeOpen'
-import { EnvelopeSimple } from '@phosphor-icons/react/EnvelopeSimple'
-import { EnvelopeSimpleOpen } from '@phosphor-icons/react/EnvelopeSimpleOpen'
-import { Equalizer } from '@phosphor-icons/react/Equalizer'
-import { Equals } from '@phosphor-icons/react/Equals'
-import { Eraser } from '@phosphor-icons/react/Eraser'
-import { EscalatorDown } from '@phosphor-icons/react/EscalatorDown'
-import { EscalatorUp } from '@phosphor-icons/react/EscalatorUp'
-import { Exam } from '@phosphor-icons/react/Exam'
-import { ExclamationMark } from '@phosphor-icons/react/ExclamationMark'
-import { Exclude } from '@phosphor-icons/react/Exclude'
-import { ExcludeSquare } from '@phosphor-icons/react/ExcludeSquare'
-import { Export } from '@phosphor-icons/react/Export'
-import { Eye } from '@phosphor-icons/react/Eye'
-import { EyeClosed } from '@phosphor-icons/react/EyeClosed'
-import { Eyedropper } from '@phosphor-icons/react/Eyedropper'
-import { EyedropperSample } from '@phosphor-icons/react/EyedropperSample'
-import { Eyeglasses } from '@phosphor-icons/react/Eyeglasses'
-import { Eyes } from '@phosphor-icons/react/Eyes'
-import { EyeSlash } from '@phosphor-icons/react/EyeSlash'
-import { FacebookLogo } from '@phosphor-icons/react/FacebookLogo'
-import { FaceMask } from '@phosphor-icons/react/FaceMask'
-import { Factory } from '@phosphor-icons/react/Factory'
-import { Faders } from '@phosphor-icons/react/Faders'
-import { FadersHorizontal } from '@phosphor-icons/react/FadersHorizontal'
-import { FalloutShelter } from '@phosphor-icons/react/FalloutShelter'
-import { Fan } from '@phosphor-icons/react/Fan'
-import { Farm } from '@phosphor-icons/react/Farm'
-import { FastForward } from '@phosphor-icons/react/FastForward'
-import { FastForwardCircle } from '@phosphor-icons/react/FastForwardCircle'
-import { Feather } from '@phosphor-icons/react/Feather'
-import { FediverseLogo } from '@phosphor-icons/react/FediverseLogo'
-import { FigmaLogo } from '@phosphor-icons/react/FigmaLogo'
-import { File } from '@phosphor-icons/react/File'
-import { FileArchive } from '@phosphor-icons/react/FileArchive'
-import { FileArrowDown } from '@phosphor-icons/react/FileArrowDown'
-import { FileArrowUp } from '@phosphor-icons/react/FileArrowUp'
-import { FileAudio } from '@phosphor-icons/react/FileAudio'
-import { FileC } from '@phosphor-icons/react/FileC'
-import { FileCloud } from '@phosphor-icons/react/FileCloud'
-import { FileCode } from '@phosphor-icons/react/FileCode'
-import { FileCpp } from '@phosphor-icons/react/FileCpp'
-import { FileCSharp } from '@phosphor-icons/react/FileCSharp'
-import { FileCss } from '@phosphor-icons/react/FileCss'
-import { FileCsv } from '@phosphor-icons/react/FileCsv'
-import { FileDashed } from '@phosphor-icons/react/FileDashed'
-import { FileDoc } from '@phosphor-icons/react/FileDoc'
-import { FileHtml } from '@phosphor-icons/react/FileHtml'
-import { FileImage } from '@phosphor-icons/react/FileImage'
-import { FileIni } from '@phosphor-icons/react/FileIni'
-import { FileJpg } from '@phosphor-icons/react/FileJpg'
-import { FileJs } from '@phosphor-icons/react/FileJs'
-import { FileJsx } from '@phosphor-icons/react/FileJsx'
-import { FileLock } from '@phosphor-icons/react/FileLock'
-import { FileMagnifyingGlass } from '@phosphor-icons/react/FileMagnifyingGlass'
-import { FileMd } from '@phosphor-icons/react/FileMd'
-import { FileMinus } from '@phosphor-icons/react/FileMinus'
-import { FilePdf } from '@phosphor-icons/react/FilePdf'
-import { FilePlus } from '@phosphor-icons/react/FilePlus'
-import { FilePng } from '@phosphor-icons/react/FilePng'
-import { FilePpt } from '@phosphor-icons/react/FilePpt'
-import { FilePy } from '@phosphor-icons/react/FilePy'
-import { FileRs } from '@phosphor-icons/react/FileRs'
-import { Files } from '@phosphor-icons/react/Files'
-import { FileSql } from '@phosphor-icons/react/FileSql'
-import { FileSvg } from '@phosphor-icons/react/FileSvg'
-import { FileText } from '@phosphor-icons/react/FileText'
-import { FileTs } from '@phosphor-icons/react/FileTs'
-import { FileTsx } from '@phosphor-icons/react/FileTsx'
-import { FileTxt } from '@phosphor-icons/react/FileTxt'
-import { FileVideo } from '@phosphor-icons/react/FileVideo'
-import { FileVue } from '@phosphor-icons/react/FileVue'
-import { FileX } from '@phosphor-icons/react/FileX'
-import { FileXls } from '@phosphor-icons/react/FileXls'
-import { FileZip } from '@phosphor-icons/react/FileZip'
-import { FilmReel } from '@phosphor-icons/react/FilmReel'
-import { FilmScript } from '@phosphor-icons/react/FilmScript'
-import { FilmSlate } from '@phosphor-icons/react/FilmSlate'
-import { FilmStrip } from '@phosphor-icons/react/FilmStrip'
-import { Fingerprint } from '@phosphor-icons/react/Fingerprint'
-import { FingerprintSimple } from '@phosphor-icons/react/FingerprintSimple'
-import { FinnTheHuman } from '@phosphor-icons/react/FinnTheHuman'
-import { Fire } from '@phosphor-icons/react/Fire'
-import { FireExtinguisher } from '@phosphor-icons/react/FireExtinguisher'
-import { FireSimple } from '@phosphor-icons/react/FireSimple'
-import { FireTruck } from '@phosphor-icons/react/FireTruck'
-import { FirstAid } from '@phosphor-icons/react/FirstAid'
-import { FirstAidKit } from '@phosphor-icons/react/FirstAidKit'
-import { Fish } from '@phosphor-icons/react/Fish'
-import { FishSimple } from '@phosphor-icons/react/FishSimple'
-import { Flag } from '@phosphor-icons/react/Flag'
-import { FlagBanner } from '@phosphor-icons/react/FlagBanner'
-import { FlagBannerFold } from '@phosphor-icons/react/FlagBannerFold'
-import { FlagCheckered } from '@phosphor-icons/react/FlagCheckered'
-import { FlagPennant } from '@phosphor-icons/react/FlagPennant'
-import { Flame } from '@phosphor-icons/react/Flame'
-import { Flashlight } from '@phosphor-icons/react/Flashlight'
-import { Flask } from '@phosphor-icons/react/Flask'
-import { FlipHorizontal } from '@phosphor-icons/react/FlipHorizontal'
-import { FlipVertical } from '@phosphor-icons/react/FlipVertical'
-import { FloppyDisk } from '@phosphor-icons/react/FloppyDisk'
-import { FloppyDiskBack } from '@phosphor-icons/react/FloppyDiskBack'
-import { FlowArrow } from '@phosphor-icons/react/FlowArrow'
-import { Flower } from '@phosphor-icons/react/Flower'
-import { FlowerLotus } from '@phosphor-icons/react/FlowerLotus'
-import { FlowerTulip } from '@phosphor-icons/react/FlowerTulip'
-import { FlyingSaucer } from '@phosphor-icons/react/FlyingSaucer'
-import { Folder } from '@phosphor-icons/react/Folder'
-import { FolderDashed } from '@phosphor-icons/react/FolderDashed'
-import { FolderLock } from '@phosphor-icons/react/FolderLock'
-import { FolderMinus } from '@phosphor-icons/react/FolderMinus'
-import { FolderOpen } from '@phosphor-icons/react/FolderOpen'
-import { FolderPlus } from '@phosphor-icons/react/FolderPlus'
-import { Folders } from '@phosphor-icons/react/Folders'
-import { FolderSimple } from '@phosphor-icons/react/FolderSimple'
-import { FolderSimpleDashed } from '@phosphor-icons/react/FolderSimpleDashed'
-import { FolderSimpleLock } from '@phosphor-icons/react/FolderSimpleLock'
-import { FolderSimpleMinus } from '@phosphor-icons/react/FolderSimpleMinus'
-import { FolderSimplePlus } from '@phosphor-icons/react/FolderSimplePlus'
-import { FolderSimpleStar } from '@phosphor-icons/react/FolderSimpleStar'
-import { FolderSimpleUser } from '@phosphor-icons/react/FolderSimpleUser'
-import { FolderStar } from '@phosphor-icons/react/FolderStar'
-import { FolderUser } from '@phosphor-icons/react/FolderUser'
-import { Football } from '@phosphor-icons/react/Football'
-import { FootballHelmet } from '@phosphor-icons/react/FootballHelmet'
-import { Footprints } from '@phosphor-icons/react/Footprints'
-import { ForkKnife } from '@phosphor-icons/react/ForkKnife'
-import { FourK } from '@phosphor-icons/react/FourK'
-import { FrameCorners } from '@phosphor-icons/react/FrameCorners'
-import { FramerLogo } from '@phosphor-icons/react/FramerLogo'
-import { Function } from '@phosphor-icons/react/Function'
-import { Funnel } from '@phosphor-icons/react/Funnel'
-import { FunnelSimple } from '@phosphor-icons/react/FunnelSimple'
-import { FunnelSimpleX } from '@phosphor-icons/react/FunnelSimpleX'
-import { FunnelX } from '@phosphor-icons/react/FunnelX'
-import { GameController } from '@phosphor-icons/react/GameController'
-import { Garage } from '@phosphor-icons/react/Garage'
-import { GasCan } from '@phosphor-icons/react/GasCan'
-import { GasPump } from '@phosphor-icons/react/GasPump'
-import { Gauge } from '@phosphor-icons/react/Gauge'
-import { Gavel } from '@phosphor-icons/react/Gavel'
-import { Gear } from '@phosphor-icons/react/Gear'
-import { GearFine } from '@phosphor-icons/react/GearFine'
-import { GearSix } from '@phosphor-icons/react/GearSix'
-import { GenderFemale } from '@phosphor-icons/react/GenderFemale'
-import { GenderIntersex } from '@phosphor-icons/react/GenderIntersex'
-import { GenderMale } from '@phosphor-icons/react/GenderMale'
-import { GenderNeuter } from '@phosphor-icons/react/GenderNeuter'
-import { GenderNonbinary } from '@phosphor-icons/react/GenderNonbinary'
-import { GenderTransgender } from '@phosphor-icons/react/GenderTransgender'
-import { Ghost } from '@phosphor-icons/react/Ghost'
-import { Gif } from '@phosphor-icons/react/Gif'
-import { Gift } from '@phosphor-icons/react/Gift'
-import { GitBranch } from '@phosphor-icons/react/GitBranch'
-import { GitCommit } from '@phosphor-icons/react/GitCommit'
-import { GitDiff } from '@phosphor-icons/react/GitDiff'
-import { GitFork } from '@phosphor-icons/react/GitFork'
-import { GithubLogo } from '@phosphor-icons/react/GithubLogo'
-import { GitlabLogo } from '@phosphor-icons/react/GitlabLogo'
-import { GitlabLogoSimple } from '@phosphor-icons/react/GitlabLogoSimple'
-import { GitMerge } from '@phosphor-icons/react/GitMerge'
-import { GitPullRequest } from '@phosphor-icons/react/GitPullRequest'
-import { Globe } from '@phosphor-icons/react/Globe'
-import { GlobeHemisphereEast } from '@phosphor-icons/react/GlobeHemisphereEast'
-import { GlobeHemisphereWest } from '@phosphor-icons/react/GlobeHemisphereWest'
-import { GlobeSimple } from '@phosphor-icons/react/GlobeSimple'
-import { GlobeSimpleX } from '@phosphor-icons/react/GlobeSimpleX'
-import { GlobeStand } from '@phosphor-icons/react/GlobeStand'
-import { GlobeX } from '@phosphor-icons/react/GlobeX'
-import { Goggles } from '@phosphor-icons/react/Goggles'
-import { Golf } from '@phosphor-icons/react/Golf'
-import { GoodreadsLogo } from '@phosphor-icons/react/GoodreadsLogo'
-import { GoogleCardboardLogo } from '@phosphor-icons/react/GoogleCardboardLogo'
-import { GoogleChromeLogo } from '@phosphor-icons/react/GoogleChromeLogo'
-import { GoogleDriveLogo } from '@phosphor-icons/react/GoogleDriveLogo'
-import { GoogleLogo } from '@phosphor-icons/react/GoogleLogo'
-import { GooglePhotosLogo } from '@phosphor-icons/react/GooglePhotosLogo'
-import { GooglePlayLogo } from '@phosphor-icons/react/GooglePlayLogo'
-import { GooglePodcastsLogo } from '@phosphor-icons/react/GooglePodcastsLogo'
-import { Gps } from '@phosphor-icons/react/Gps'
-import { GpsFix } from '@phosphor-icons/react/GpsFix'
-import { GpsSlash } from '@phosphor-icons/react/GpsSlash'
-import { Gradient } from '@phosphor-icons/react/Gradient'
-import { GraduationCap } from '@phosphor-icons/react/GraduationCap'
-import { Grains } from '@phosphor-icons/react/Grains'
-import { GrainsSlash } from '@phosphor-icons/react/GrainsSlash'
-import { Graph } from '@phosphor-icons/react/Graph'
-import { GraphicsCard } from '@phosphor-icons/react/GraphicsCard'
-import { GreaterThan } from '@phosphor-icons/react/GreaterThan'
-import { GreaterThanOrEqual } from '@phosphor-icons/react/GreaterThanOrEqual'
-import { GridFour } from '@phosphor-icons/react/GridFour'
-import { GridNine } from '@phosphor-icons/react/GridNine'
-import { Guitar } from '@phosphor-icons/react/Guitar'
-import { HairDryer } from '@phosphor-icons/react/HairDryer'
-import { Hamburger } from '@phosphor-icons/react/Hamburger'
-import { Hammer } from '@phosphor-icons/react/Hammer'
-import { Hand } from '@phosphor-icons/react/Hand'
-import { HandArrowDown } from '@phosphor-icons/react/HandArrowDown'
-import { HandArrowUp } from '@phosphor-icons/react/HandArrowUp'
-import { Handbag } from '@phosphor-icons/react/Handbag'
-import { HandbagSimple } from '@phosphor-icons/react/HandbagSimple'
-import { HandCoins } from '@phosphor-icons/react/HandCoins'
-import { HandDeposit } from '@phosphor-icons/react/HandDeposit'
-import { HandEye } from '@phosphor-icons/react/HandEye'
-import { HandFist } from '@phosphor-icons/react/HandFist'
-import { HandGrabbing } from '@phosphor-icons/react/HandGrabbing'
-import { HandHeart } from '@phosphor-icons/react/HandHeart'
-import { HandPalm } from '@phosphor-icons/react/HandPalm'
-import { HandPeace } from '@phosphor-icons/react/HandPeace'
-import { HandPointing } from '@phosphor-icons/react/HandPointing'
-import { HandsClapping } from '@phosphor-icons/react/HandsClapping'
-import { Handshake } from '@phosphor-icons/react/Handshake'
-import { HandSoap } from '@phosphor-icons/react/HandSoap'
-import { HandsPraying } from '@phosphor-icons/react/HandsPraying'
-import { HandSwipeLeft } from '@phosphor-icons/react/HandSwipeLeft'
-import { HandSwipeRight } from '@phosphor-icons/react/HandSwipeRight'
-import { HandTap } from '@phosphor-icons/react/HandTap'
-import { HandWaving } from '@phosphor-icons/react/HandWaving'
-import { HandWithdraw } from '@phosphor-icons/react/HandWithdraw'
-import { HardDrive } from '@phosphor-icons/react/HardDrive'
-import { HardDrives } from '@phosphor-icons/react/HardDrives'
-import { HardHat } from '@phosphor-icons/react/HardHat'
-import { Hash } from '@phosphor-icons/react/Hash'
-import { HashStraight } from '@phosphor-icons/react/HashStraight'
-import { HeadCircuit } from '@phosphor-icons/react/HeadCircuit'
-import { Headlights } from '@phosphor-icons/react/Headlights'
-import { Headphones } from '@phosphor-icons/react/Headphones'
-import { Headset } from '@phosphor-icons/react/Headset'
-import { Heart } from '@phosphor-icons/react/Heart'
-import { Heartbeat } from '@phosphor-icons/react/Heartbeat'
-import { HeartBreak } from '@phosphor-icons/react/HeartBreak'
-import { HeartHalf } from '@phosphor-icons/react/HeartHalf'
-import { HeartStraight } from '@phosphor-icons/react/HeartStraight'
-import { HeartStraightBreak } from '@phosphor-icons/react/HeartStraightBreak'
-import { Hexagon } from '@phosphor-icons/react/Hexagon'
-import { HighDefinition } from '@phosphor-icons/react/HighDefinition'
-import { HighHeel } from '@phosphor-icons/react/HighHeel'
-import { Highlighter } from '@phosphor-icons/react/Highlighter'
-import { HighlighterCircle } from '@phosphor-icons/react/HighlighterCircle'
-import { Hockey } from '@phosphor-icons/react/Hockey'
-import { Hoodie } from '@phosphor-icons/react/Hoodie'
-import { Horse } from '@phosphor-icons/react/Horse'
-import { Hospital } from '@phosphor-icons/react/Hospital'
-import { Hourglass } from '@phosphor-icons/react/Hourglass'
-import { HourglassHigh } from '@phosphor-icons/react/HourglassHigh'
-import { HourglassLow } from '@phosphor-icons/react/HourglassLow'
-import { HourglassMedium } from '@phosphor-icons/react/HourglassMedium'
-import { HourglassSimple } from '@phosphor-icons/react/HourglassSimple'
-import { HourglassSimpleHigh } from '@phosphor-icons/react/HourglassSimpleHigh'
-import { HourglassSimpleLow } from '@phosphor-icons/react/HourglassSimpleLow'
-import { HourglassSimpleMedium } from '@phosphor-icons/react/HourglassSimpleMedium'
-import { House } from '@phosphor-icons/react/House'
-import { HouseLine } from '@phosphor-icons/react/HouseLine'
-import { HouseSimple } from '@phosphor-icons/react/HouseSimple'
-import { Hurricane } from '@phosphor-icons/react/Hurricane'
-import { IceCream } from '@phosphor-icons/react/IceCream'
-import { IdentificationBadge } from '@phosphor-icons/react/IdentificationBadge'
-import { IdentificationCard } from '@phosphor-icons/react/IdentificationCard'
-import { Image } from '@phosphor-icons/react/Image'
-import { ImageBroken } from '@phosphor-icons/react/ImageBroken'
-import { Images } from '@phosphor-icons/react/Images'
-import { ImageSquare } from '@phosphor-icons/react/ImageSquare'
-import { ImagesSquare } from '@phosphor-icons/react/ImagesSquare'
-import { Infinity as InfinityIcon } from '@phosphor-icons/react/Infinity'
-import { Info } from '@phosphor-icons/react/Info'
-import { InstagramLogo } from '@phosphor-icons/react/InstagramLogo'
-import { Intersect } from '@phosphor-icons/react/Intersect'
-import { Intersection } from '@phosphor-icons/react/Intersection'
-import { IntersectSquare } from '@phosphor-icons/react/IntersectSquare'
-import { IntersectThree } from '@phosphor-icons/react/IntersectThree'
-import { Invoice } from '@phosphor-icons/react/Invoice'
-import { Island } from '@phosphor-icons/react/Island'
-import { Jar } from '@phosphor-icons/react/Jar'
-import { JarLabel } from '@phosphor-icons/react/JarLabel'
-import { Jeep } from '@phosphor-icons/react/Jeep'
-import { Joystick } from '@phosphor-icons/react/Joystick'
-import { Kanban } from '@phosphor-icons/react/Kanban'
-import { Key } from '@phosphor-icons/react/Key'
-import { Keyboard } from '@phosphor-icons/react/Keyboard'
-import { Keyhole } from '@phosphor-icons/react/Keyhole'
-import { KeyReturn } from '@phosphor-icons/react/KeyReturn'
-import { Knife } from '@phosphor-icons/react/Knife'
-import { Ladder } from '@phosphor-icons/react/Ladder'
-import { LadderSimple } from '@phosphor-icons/react/LadderSimple'
-import { Lamp } from '@phosphor-icons/react/Lamp'
-import { LampPendant } from '@phosphor-icons/react/LampPendant'
-import { Laptop } from '@phosphor-icons/react/Laptop'
-import { Lasso } from '@phosphor-icons/react/Lasso'
-import { LastfmLogo } from '@phosphor-icons/react/LastfmLogo'
-import { Layout } from '@phosphor-icons/react/Layout'
-import { Leaf } from '@phosphor-icons/react/Leaf'
-import { Lectern } from '@phosphor-icons/react/Lectern'
-import { Lego } from '@phosphor-icons/react/Lego'
-import { LegoSmiley } from '@phosphor-icons/react/LegoSmiley'
-import { LessThan } from '@phosphor-icons/react/LessThan'
-import { LessThanOrEqual } from '@phosphor-icons/react/LessThanOrEqual'
-import { LetterCircleH } from '@phosphor-icons/react/LetterCircleH'
-import { LetterCircleP } from '@phosphor-icons/react/LetterCircleP'
-import { LetterCircleV } from '@phosphor-icons/react/LetterCircleV'
-import { Lifebuoy } from '@phosphor-icons/react/Lifebuoy'
-import { Lightbulb } from '@phosphor-icons/react/Lightbulb'
-import { LightbulbFilament } from '@phosphor-icons/react/LightbulbFilament'
-import { Lighthouse } from '@phosphor-icons/react/Lighthouse'
-import { Lightning } from '@phosphor-icons/react/Lightning'
-import { LightningA } from '@phosphor-icons/react/LightningA'
-import { LightningSlash } from '@phosphor-icons/react/LightningSlash'
-import { LineSegment } from '@phosphor-icons/react/LineSegment'
-import { LineSegments } from '@phosphor-icons/react/LineSegments'
-import { LineVertical } from '@phosphor-icons/react/LineVertical'
-import { Link } from '@phosphor-icons/react/Link'
-import { LinkBreak } from '@phosphor-icons/react/LinkBreak'
-import { LinkedinLogo } from '@phosphor-icons/react/LinkedinLogo'
-import { LinkSimple } from '@phosphor-icons/react/LinkSimple'
-import { LinkSimpleBreak } from '@phosphor-icons/react/LinkSimpleBreak'
-import { LinkSimpleHorizontal } from '@phosphor-icons/react/LinkSimpleHorizontal'
-import { LinkSimpleHorizontalBreak } from '@phosphor-icons/react/LinkSimpleHorizontalBreak'
-import { LinktreeLogo } from '@phosphor-icons/react/LinktreeLogo'
-import { LinuxLogo } from '@phosphor-icons/react/LinuxLogo'
-import { List } from '@phosphor-icons/react/List'
-import { ListBullets } from '@phosphor-icons/react/ListBullets'
-import { ListChecks } from '@phosphor-icons/react/ListChecks'
-import { ListDashes } from '@phosphor-icons/react/ListDashes'
-import { ListHeart } from '@phosphor-icons/react/ListHeart'
-import { ListMagnifyingGlass } from '@phosphor-icons/react/ListMagnifyingGlass'
-import { ListNumbers } from '@phosphor-icons/react/ListNumbers'
-import { ListPlus } from '@phosphor-icons/react/ListPlus'
-import { ListStar } from '@phosphor-icons/react/ListStar'
-import { Lock } from '@phosphor-icons/react/Lock'
-import { Lockers } from '@phosphor-icons/react/Lockers'
-import { LockKey } from '@phosphor-icons/react/LockKey'
-import { LockKeyOpen } from '@phosphor-icons/react/LockKeyOpen'
-import { LockLaminated } from '@phosphor-icons/react/LockLaminated'
-import { LockLaminatedOpen } from '@phosphor-icons/react/LockLaminatedOpen'
-import { LockOpen } from '@phosphor-icons/react/LockOpen'
-import { LockSimple } from '@phosphor-icons/react/LockSimple'
-import { LockSimpleOpen } from '@phosphor-icons/react/LockSimpleOpen'
-import { Log } from '@phosphor-icons/react/Log'
-import { MagicWand } from '@phosphor-icons/react/MagicWand'
-import { Magnet } from '@phosphor-icons/react/Magnet'
-import { MagnetStraight } from '@phosphor-icons/react/MagnetStraight'
-import { MagnifyingGlass } from '@phosphor-icons/react/MagnifyingGlass'
-import { MagnifyingGlassMinus } from '@phosphor-icons/react/MagnifyingGlassMinus'
-import { MagnifyingGlassPlus } from '@phosphor-icons/react/MagnifyingGlassPlus'
-import { Mailbox } from '@phosphor-icons/react/Mailbox'
-import { MapPin } from '@phosphor-icons/react/MapPin'
-import { MapPinArea } from '@phosphor-icons/react/MapPinArea'
-import { MapPinLine } from '@phosphor-icons/react/MapPinLine'
-import { MapPinPlus } from '@phosphor-icons/react/MapPinPlus'
-import { MapPinSimple } from '@phosphor-icons/react/MapPinSimple'
-import { MapPinSimpleArea } from '@phosphor-icons/react/MapPinSimpleArea'
-import { MapPinSimpleLine } from '@phosphor-icons/react/MapPinSimpleLine'
-import { MapTrifold } from '@phosphor-icons/react/MapTrifold'
-import { MarkdownLogo } from '@phosphor-icons/react/MarkdownLogo'
-import { MarkerCircle } from '@phosphor-icons/react/MarkerCircle'
-import { Martini } from '@phosphor-icons/react/Martini'
-import { MaskHappy } from '@phosphor-icons/react/MaskHappy'
-import { MaskSad } from '@phosphor-icons/react/MaskSad'
-import { MastodonLogo } from '@phosphor-icons/react/MastodonLogo'
-import { MathOperations } from '@phosphor-icons/react/MathOperations'
-import { MatrixLogo } from '@phosphor-icons/react/MatrixLogo'
-import { Medal } from '@phosphor-icons/react/Medal'
-import { MedalMilitary } from '@phosphor-icons/react/MedalMilitary'
-import { MediumLogo } from '@phosphor-icons/react/MediumLogo'
-import { Megaphone } from '@phosphor-icons/react/Megaphone'
-import { MegaphoneSimple } from '@phosphor-icons/react/MegaphoneSimple'
-import { MemberOf } from '@phosphor-icons/react/MemberOf'
-import { Memory } from '@phosphor-icons/react/Memory'
-import { MessengerLogo } from '@phosphor-icons/react/MessengerLogo'
-import { MetaLogo } from '@phosphor-icons/react/MetaLogo'
-import { Meteor } from '@phosphor-icons/react/Meteor'
-import { Metronome } from '@phosphor-icons/react/Metronome'
-import { Microphone } from '@phosphor-icons/react/Microphone'
-import { MicrophoneSlash } from '@phosphor-icons/react/MicrophoneSlash'
-import { MicrophoneStage } from '@phosphor-icons/react/MicrophoneStage'
-import { Microscope } from '@phosphor-icons/react/Microscope'
-import { MicrosoftExcelLogo } from '@phosphor-icons/react/MicrosoftExcelLogo'
-import { MicrosoftOutlookLogo } from '@phosphor-icons/react/MicrosoftOutlookLogo'
-import { MicrosoftPowerpointLogo } from '@phosphor-icons/react/MicrosoftPowerpointLogo'
-import { MicrosoftTeamsLogo } from '@phosphor-icons/react/MicrosoftTeamsLogo'
-import { MicrosoftWordLogo } from '@phosphor-icons/react/MicrosoftWordLogo'
-import { Minus } from '@phosphor-icons/react/Minus'
-import { MinusCircle } from '@phosphor-icons/react/MinusCircle'
-import { MinusSquare } from '@phosphor-icons/react/MinusSquare'
-import { Money } from '@phosphor-icons/react/Money'
-import { MoneyWavy } from '@phosphor-icons/react/MoneyWavy'
-import { Monitor } from '@phosphor-icons/react/Monitor'
-import { MonitorArrowUp } from '@phosphor-icons/react/MonitorArrowUp'
-import { MonitorPlay } from '@phosphor-icons/react/MonitorPlay'
-import { Moon } from '@phosphor-icons/react/Moon'
-import { MoonStars } from '@phosphor-icons/react/MoonStars'
-import { Moped } from '@phosphor-icons/react/Moped'
-import { MopedFront } from '@phosphor-icons/react/MopedFront'
-import { Mosque } from '@phosphor-icons/react/Mosque'
-import { Motorcycle } from '@phosphor-icons/react/Motorcycle'
-import { Mountains } from '@phosphor-icons/react/Mountains'
-import { Mouse } from '@phosphor-icons/react/Mouse'
-import { MouseLeftClick } from '@phosphor-icons/react/MouseLeftClick'
-import { MouseMiddleClick } from '@phosphor-icons/react/MouseMiddleClick'
-import { MouseRightClick } from '@phosphor-icons/react/MouseRightClick'
-import { MouseScroll } from '@phosphor-icons/react/MouseScroll'
-import { MouseSimple } from '@phosphor-icons/react/MouseSimple'
-import { MusicNote } from '@phosphor-icons/react/MusicNote'
-import { MusicNotes } from '@phosphor-icons/react/MusicNotes'
-import { MusicNoteSimple } from '@phosphor-icons/react/MusicNoteSimple'
-import { MusicNotesMinus } from '@phosphor-icons/react/MusicNotesMinus'
-import { MusicNotesPlus } from '@phosphor-icons/react/MusicNotesPlus'
-import { MusicNotesSimple } from '@phosphor-icons/react/MusicNotesSimple'
-import { NavigationArrow } from '@phosphor-icons/react/NavigationArrow'
-import { Needle } from '@phosphor-icons/react/Needle'
-import { Network } from '@phosphor-icons/react/Network'
-import { NetworkSlash } from '@phosphor-icons/react/NetworkSlash'
-import { NetworkX } from '@phosphor-icons/react/NetworkX'
-import { Newspaper } from '@phosphor-icons/react/Newspaper'
-import { NewspaperClipping } from '@phosphor-icons/react/NewspaperClipping'
-import { Notches } from '@phosphor-icons/react/Notches'
-import { Note } from '@phosphor-icons/react/Note'
-import { NoteBlank } from '@phosphor-icons/react/NoteBlank'
-import { Notebook } from '@phosphor-icons/react/Notebook'
-import { Notepad } from '@phosphor-icons/react/Notepad'
-import { NotePencil } from '@phosphor-icons/react/NotePencil'
-import { NotEquals } from '@phosphor-icons/react/NotEquals'
-import { Notification } from '@phosphor-icons/react/Notification'
-import { NotionLogo } from '@phosphor-icons/react/NotionLogo'
-import { NotMemberOf } from '@phosphor-icons/react/NotMemberOf'
-import { NotSubsetOf } from '@phosphor-icons/react/NotSubsetOf'
-import { NotSupersetOf } from '@phosphor-icons/react/NotSupersetOf'
-import { NuclearPlant } from '@phosphor-icons/react/NuclearPlant'
-import { NumberCircleEight } from '@phosphor-icons/react/NumberCircleEight'
-import { NumberCircleFive } from '@phosphor-icons/react/NumberCircleFive'
-import { NumberCircleFour } from '@phosphor-icons/react/NumberCircleFour'
-import { NumberCircleNine } from '@phosphor-icons/react/NumberCircleNine'
-import { NumberCircleOne } from '@phosphor-icons/react/NumberCircleOne'
-import { NumberCircleSeven } from '@phosphor-icons/react/NumberCircleSeven'
-import { NumberCircleSix } from '@phosphor-icons/react/NumberCircleSix'
-import { NumberCircleThree } from '@phosphor-icons/react/NumberCircleThree'
-import { NumberCircleTwo } from '@phosphor-icons/react/NumberCircleTwo'
-import { NumberCircleZero } from '@phosphor-icons/react/NumberCircleZero'
-import { NumberEight } from '@phosphor-icons/react/NumberEight'
-import { NumberFive } from '@phosphor-icons/react/NumberFive'
-import { NumberFour } from '@phosphor-icons/react/NumberFour'
-import { NumberNine } from '@phosphor-icons/react/NumberNine'
-import { NumberOne } from '@phosphor-icons/react/NumberOne'
-import { NumberSeven } from '@phosphor-icons/react/NumberSeven'
-import { NumberSix } from '@phosphor-icons/react/NumberSix'
-import { NumberSquareEight } from '@phosphor-icons/react/NumberSquareEight'
-import { NumberSquareFive } from '@phosphor-icons/react/NumberSquareFive'
-import { NumberSquareFour } from '@phosphor-icons/react/NumberSquareFour'
-import { NumberSquareNine } from '@phosphor-icons/react/NumberSquareNine'
-import { NumberSquareOne } from '@phosphor-icons/react/NumberSquareOne'
-import { NumberSquareSeven } from '@phosphor-icons/react/NumberSquareSeven'
-import { NumberSquareSix } from '@phosphor-icons/react/NumberSquareSix'
-import { NumberSquareThree } from '@phosphor-icons/react/NumberSquareThree'
-import { NumberSquareTwo } from '@phosphor-icons/react/NumberSquareTwo'
-import { NumberSquareZero } from '@phosphor-icons/react/NumberSquareZero'
-import { NumberThree } from '@phosphor-icons/react/NumberThree'
-import { NumberTwo } from '@phosphor-icons/react/NumberTwo'
-import { NumberZero } from '@phosphor-icons/react/NumberZero'
-import { Numpad } from '@phosphor-icons/react/Numpad'
-import { Nut } from '@phosphor-icons/react/Nut'
-import { NyTimesLogo } from '@phosphor-icons/react/NyTimesLogo'
-import { Octagon } from '@phosphor-icons/react/Octagon'
-import { OfficeChair } from '@phosphor-icons/react/OfficeChair'
-import { Onigiri } from '@phosphor-icons/react/Onigiri'
-import { OpenAiLogo } from '@phosphor-icons/react/OpenAiLogo'
-import { Option } from '@phosphor-icons/react/Option'
-import { Orange } from '@phosphor-icons/react/Orange'
-import { OrangeSlice } from '@phosphor-icons/react/OrangeSlice'
-import { Oven } from '@phosphor-icons/react/Oven'
-import { Package } from '@phosphor-icons/react/Package'
-import { PaintBrush } from '@phosphor-icons/react/PaintBrush'
-import { PaintBrushBroad } from '@phosphor-icons/react/PaintBrushBroad'
-import { PaintBrushHousehold } from '@phosphor-icons/react/PaintBrushHousehold'
-import { PaintBucket } from '@phosphor-icons/react/PaintBucket'
-import { PaintRoller } from '@phosphor-icons/react/PaintRoller'
-import { Palette } from '@phosphor-icons/react/Palette'
-import { Panorama } from '@phosphor-icons/react/Panorama'
-import { Pants } from '@phosphor-icons/react/Pants'
-import { Paperclip } from '@phosphor-icons/react/Paperclip'
-import { PaperclipHorizontal } from '@phosphor-icons/react/PaperclipHorizontal'
-import { PaperPlane } from '@phosphor-icons/react/PaperPlane'
-import { PaperPlaneRight } from '@phosphor-icons/react/PaperPlaneRight'
-import { PaperPlaneTilt } from '@phosphor-icons/react/PaperPlaneTilt'
-import { Parachute } from '@phosphor-icons/react/Parachute'
-import { Paragraph } from '@phosphor-icons/react/Paragraph'
-import { Parallelogram } from '@phosphor-icons/react/Parallelogram'
-import { Park } from '@phosphor-icons/react/Park'
-import { Password } from '@phosphor-icons/react/Password'
-import { Path } from '@phosphor-icons/react/Path'
-import { PatreonLogo } from '@phosphor-icons/react/PatreonLogo'
-import { Pause } from '@phosphor-icons/react/Pause'
-import { PauseCircle } from '@phosphor-icons/react/PauseCircle'
-import { PawPrint } from '@phosphor-icons/react/PawPrint'
-import { PaypalLogo } from '@phosphor-icons/react/PaypalLogo'
-import { Peace } from '@phosphor-icons/react/Peace'
-import { Pen } from '@phosphor-icons/react/Pen'
-import { Pencil } from '@phosphor-icons/react/Pencil'
-import { PencilCircle } from '@phosphor-icons/react/PencilCircle'
-import { PencilLine } from '@phosphor-icons/react/PencilLine'
-import { PencilRuler } from '@phosphor-icons/react/PencilRuler'
-import { PencilSimple } from '@phosphor-icons/react/PencilSimple'
-import { PencilSimpleLine } from '@phosphor-icons/react/PencilSimpleLine'
-import { PencilSimpleSlash } from '@phosphor-icons/react/PencilSimpleSlash'
-import { PencilSlash } from '@phosphor-icons/react/PencilSlash'
-import { PenNib } from '@phosphor-icons/react/PenNib'
-import { PenNibStraight } from '@phosphor-icons/react/PenNibStraight'
-import { Pentagon } from '@phosphor-icons/react/Pentagon'
-import { Pentagram } from '@phosphor-icons/react/Pentagram'
-import { Pepper } from '@phosphor-icons/react/Pepper'
-import { Percent } from '@phosphor-icons/react/Percent'
-import { Person } from '@phosphor-icons/react/Person'
-import { PersonArmsSpread } from '@phosphor-icons/react/PersonArmsSpread'
-import { PersonSimple } from '@phosphor-icons/react/PersonSimple'
-import { PersonSimpleBike } from '@phosphor-icons/react/PersonSimpleBike'
-import { PersonSimpleCircle } from '@phosphor-icons/react/PersonSimpleCircle'
-import { PersonSimpleHike } from '@phosphor-icons/react/PersonSimpleHike'
-import { PersonSimpleRun } from '@phosphor-icons/react/PersonSimpleRun'
-import { PersonSimpleSki } from '@phosphor-icons/react/PersonSimpleSki'
-import { PersonSimpleSnowboard } from '@phosphor-icons/react/PersonSimpleSnowboard'
-import { PersonSimpleSwim } from '@phosphor-icons/react/PersonSimpleSwim'
-import { PersonSimpleTaiChi } from '@phosphor-icons/react/PersonSimpleTaiChi'
-import { PersonSimpleThrow } from '@phosphor-icons/react/PersonSimpleThrow'
-import { PersonSimpleWalk } from '@phosphor-icons/react/PersonSimpleWalk'
-import { Perspective } from '@phosphor-icons/react/Perspective'
-import { Phone } from '@phosphor-icons/react/Phone'
-import { PhoneCall } from '@phosphor-icons/react/PhoneCall'
-import { PhoneDisconnect } from '@phosphor-icons/react/PhoneDisconnect'
-import { PhoneIncoming } from '@phosphor-icons/react/PhoneIncoming'
-import { PhoneList } from '@phosphor-icons/react/PhoneList'
-import { PhoneOutgoing } from '@phosphor-icons/react/PhoneOutgoing'
-import { PhonePause } from '@phosphor-icons/react/PhonePause'
-import { PhonePlus } from '@phosphor-icons/react/PhonePlus'
-import { PhoneSlash } from '@phosphor-icons/react/PhoneSlash'
-import { PhoneTransfer } from '@phosphor-icons/react/PhoneTransfer'
-import { PhoneX } from '@phosphor-icons/react/PhoneX'
-import { PhosphorLogo } from '@phosphor-icons/react/PhosphorLogo'
-import { Pi } from '@phosphor-icons/react/Pi'
-import { PianoKeys } from '@phosphor-icons/react/PianoKeys'
-import { PicnicTable } from '@phosphor-icons/react/PicnicTable'
-import { PictureInPicture } from '@phosphor-icons/react/PictureInPicture'
-import { PiggyBank } from '@phosphor-icons/react/PiggyBank'
-import { Pill } from '@phosphor-icons/react/Pill'
-import { PingPong } from '@phosphor-icons/react/PingPong'
-import { PinterestLogo } from '@phosphor-icons/react/PinterestLogo'
-import { PintGlass } from '@phosphor-icons/react/PintGlass'
-import { Pinwheel } from '@phosphor-icons/react/Pinwheel'
-import { Pipe } from '@phosphor-icons/react/Pipe'
-import { PipeWrench } from '@phosphor-icons/react/PipeWrench'
-import { PixLogo } from '@phosphor-icons/react/PixLogo'
-import { Pizza } from '@phosphor-icons/react/Pizza'
-import { Placeholder } from '@phosphor-icons/react/Placeholder'
-import { Planet } from '@phosphor-icons/react/Planet'
-import { Plant } from '@phosphor-icons/react/Plant'
-import { Play } from '@phosphor-icons/react/Play'
-import { PlayCircle } from '@phosphor-icons/react/PlayCircle'
-import { Playlist } from '@phosphor-icons/react/Playlist'
-import { PlayPause } from '@phosphor-icons/react/PlayPause'
-import { Plug } from '@phosphor-icons/react/Plug'
-import { PlugCharging } from '@phosphor-icons/react/PlugCharging'
-import { Plugs } from '@phosphor-icons/react/Plugs'
-import { PlugsConnected } from '@phosphor-icons/react/PlugsConnected'
-import { Plus } from '@phosphor-icons/react/Plus'
-import { PlusCircle } from '@phosphor-icons/react/PlusCircle'
-import { PlusMinus } from '@phosphor-icons/react/PlusMinus'
-import { PlusSquare } from '@phosphor-icons/react/PlusSquare'
-import { PokerChip } from '@phosphor-icons/react/PokerChip'
-import { PoliceCar } from '@phosphor-icons/react/PoliceCar'
-import { Polygon } from '@phosphor-icons/react/Polygon'
-import { Popcorn } from '@phosphor-icons/react/Popcorn'
-import { Popsicle } from '@phosphor-icons/react/Popsicle'
-import { PottedPlant } from '@phosphor-icons/react/PottedPlant'
-import { Power } from '@phosphor-icons/react/Power'
-import { Prescription } from '@phosphor-icons/react/Prescription'
-import { Presentation } from '@phosphor-icons/react/Presentation'
-import { PresentationChart } from '@phosphor-icons/react/PresentationChart'
-import { Printer } from '@phosphor-icons/react/Printer'
-import { Prohibit } from '@phosphor-icons/react/Prohibit'
-import { ProhibitInset } from '@phosphor-icons/react/ProhibitInset'
-import { ProjectorScreen } from '@phosphor-icons/react/ProjectorScreen'
-import { ProjectorScreenChart } from '@phosphor-icons/react/ProjectorScreenChart'
-import { Pulse } from '@phosphor-icons/react/Pulse'
-import { PushPin } from '@phosphor-icons/react/PushPin'
-import { PushPinSimple } from '@phosphor-icons/react/PushPinSimple'
-import { PushPinSimpleSlash } from '@phosphor-icons/react/PushPinSimpleSlash'
-import { PushPinSlash } from '@phosphor-icons/react/PushPinSlash'
-import { PuzzlePiece } from '@phosphor-icons/react/PuzzlePiece'
-import { QrCode } from '@phosphor-icons/react/QrCode'
-import { Question } from '@phosphor-icons/react/Question'
-import { QuestionMark } from '@phosphor-icons/react/QuestionMark'
-import { Queue } from '@phosphor-icons/react/Queue'
-import { Quotes } from '@phosphor-icons/react/Quotes'
-import { Rabbit } from '@phosphor-icons/react/Rabbit'
-import { Racquet } from '@phosphor-icons/react/Racquet'
-import { Radical } from '@phosphor-icons/react/Radical'
-import { Radio } from '@phosphor-icons/react/Radio'
-import { Radioactive } from '@phosphor-icons/react/Radioactive'
-import { RadioButton } from '@phosphor-icons/react/RadioButton'
-import { Rainbow } from '@phosphor-icons/react/Rainbow'
-import { RainbowCloud } from '@phosphor-icons/react/RainbowCloud'
-import { Ranking } from '@phosphor-icons/react/Ranking'
-import { ReadCvLogo } from '@phosphor-icons/react/ReadCvLogo'
-import { Receipt } from '@phosphor-icons/react/Receipt'
-import { ReceiptX } from '@phosphor-icons/react/ReceiptX'
-import { Record } from '@phosphor-icons/react/Record'
-import { Rectangle } from '@phosphor-icons/react/Rectangle'
-import { RectangleDashed } from '@phosphor-icons/react/RectangleDashed'
-import { Recycle } from '@phosphor-icons/react/Recycle'
-import { RedditLogo } from '@phosphor-icons/react/RedditLogo'
-import { Repeat } from '@phosphor-icons/react/Repeat'
-import { RepeatOnce } from '@phosphor-icons/react/RepeatOnce'
-import { ReplitLogo } from '@phosphor-icons/react/ReplitLogo'
-import { Resize } from '@phosphor-icons/react/Resize'
-import { Rewind } from '@phosphor-icons/react/Rewind'
-import { RewindCircle } from '@phosphor-icons/react/RewindCircle'
-import { RoadHorizon } from '@phosphor-icons/react/RoadHorizon'
-import { Robot } from '@phosphor-icons/react/Robot'
-import { Rocket } from '@phosphor-icons/react/Rocket'
-import { RocketLaunch } from '@phosphor-icons/react/RocketLaunch'
-import { Rows } from '@phosphor-icons/react/Rows'
-import { RowsPlusBottom } from '@phosphor-icons/react/RowsPlusBottom'
-import { RowsPlusTop } from '@phosphor-icons/react/RowsPlusTop'
-import { Rss } from '@phosphor-icons/react/Rss'
-import { RssSimple } from '@phosphor-icons/react/RssSimple'
-import { Rug } from '@phosphor-icons/react/Rug'
-import { Ruler } from '@phosphor-icons/react/Ruler'
-import { Sailboat } from '@phosphor-icons/react/Sailboat'
-import { Scales } from '@phosphor-icons/react/Scales'
-import { Scan } from '@phosphor-icons/react/Scan'
-import { ScanSmiley } from '@phosphor-icons/react/ScanSmiley'
-import { Scissors } from '@phosphor-icons/react/Scissors'
-import { Scooter } from '@phosphor-icons/react/Scooter'
-import { Screencast } from '@phosphor-icons/react/Screencast'
-import { Screwdriver } from '@phosphor-icons/react/Screwdriver'
-import { Scribble } from '@phosphor-icons/react/Scribble'
-import { ScribbleLoop } from '@phosphor-icons/react/ScribbleLoop'
-import { Scroll } from '@phosphor-icons/react/Scroll'
-import { Seal } from '@phosphor-icons/react/Seal'
-import { SealCheck } from '@phosphor-icons/react/SealCheck'
-import { SealPercent } from '@phosphor-icons/react/SealPercent'
-import { SealQuestion } from '@phosphor-icons/react/SealQuestion'
-import { SealWarning } from '@phosphor-icons/react/SealWarning'
-import { Seat } from '@phosphor-icons/react/Seat'
-import { Seatbelt } from '@phosphor-icons/react/Seatbelt'
-import { SecurityCamera } from '@phosphor-icons/react/SecurityCamera'
-import { Selection } from '@phosphor-icons/react/Selection'
-import { SelectionAll } from '@phosphor-icons/react/SelectionAll'
-import { SelectionBackground } from '@phosphor-icons/react/SelectionBackground'
-import { SelectionForeground } from '@phosphor-icons/react/SelectionForeground'
-import { SelectionInverse } from '@phosphor-icons/react/SelectionInverse'
-import { SelectionPlus } from '@phosphor-icons/react/SelectionPlus'
-import { SelectionSlash } from '@phosphor-icons/react/SelectionSlash'
-import { Shapes } from '@phosphor-icons/react/Shapes'
-import { Share } from '@phosphor-icons/react/Share'
-import { ShareFat } from '@phosphor-icons/react/ShareFat'
-import { ShareNetwork } from '@phosphor-icons/react/ShareNetwork'
-import { Shield } from '@phosphor-icons/react/Shield'
-import { ShieldCheck } from '@phosphor-icons/react/ShieldCheck'
-import { ShieldCheckered } from '@phosphor-icons/react/ShieldCheckered'
-import { ShieldChevron } from '@phosphor-icons/react/ShieldChevron'
-import { ShieldPlus } from '@phosphor-icons/react/ShieldPlus'
-import { ShieldSlash } from '@phosphor-icons/react/ShieldSlash'
-import { ShieldStar } from '@phosphor-icons/react/ShieldStar'
-import { ShieldWarning } from '@phosphor-icons/react/ShieldWarning'
-import { ShippingContainer } from '@phosphor-icons/react/ShippingContainer'
-import { ShirtFolded } from '@phosphor-icons/react/ShirtFolded'
-import { ShootingStar } from '@phosphor-icons/react/ShootingStar'
-import { ShoppingBag } from '@phosphor-icons/react/ShoppingBag'
-import { ShoppingBagOpen } from '@phosphor-icons/react/ShoppingBagOpen'
-import { ShoppingCart } from '@phosphor-icons/react/ShoppingCart'
-import { ShoppingCartSimple } from '@phosphor-icons/react/ShoppingCartSimple'
-import { Shovel } from '@phosphor-icons/react/Shovel'
-import { Shower } from '@phosphor-icons/react/Shower'
-import { Shrimp } from '@phosphor-icons/react/Shrimp'
-import { Shuffle } from '@phosphor-icons/react/Shuffle'
-import { ShuffleAngular } from '@phosphor-icons/react/ShuffleAngular'
-import { ShuffleSimple } from '@phosphor-icons/react/ShuffleSimple'
-import { Sidebar } from '@phosphor-icons/react/Sidebar'
-import { SidebarSimple } from '@phosphor-icons/react/SidebarSimple'
-import { Sigma } from '@phosphor-icons/react/Sigma'
-import { Signature } from '@phosphor-icons/react/Signature'
-import { SignIn } from '@phosphor-icons/react/SignIn'
-import { SignOut } from '@phosphor-icons/react/SignOut'
-import { Signpost } from '@phosphor-icons/react/Signpost'
-import { SimCard } from '@phosphor-icons/react/SimCard'
-import { Siren } from '@phosphor-icons/react/Siren'
-import { SketchLogo } from '@phosphor-icons/react/SketchLogo'
-import { SkipBack } from '@phosphor-icons/react/SkipBack'
-import { SkipBackCircle } from '@phosphor-icons/react/SkipBackCircle'
-import { SkipForward } from '@phosphor-icons/react/SkipForward'
-import { SkipForwardCircle } from '@phosphor-icons/react/SkipForwardCircle'
-import { Skull } from '@phosphor-icons/react/Skull'
-import { SkypeLogo } from '@phosphor-icons/react/SkypeLogo'
-import { SlackLogo } from '@phosphor-icons/react/SlackLogo'
-import { Sliders } from '@phosphor-icons/react/Sliders'
-import { SlidersHorizontal } from '@phosphor-icons/react/SlidersHorizontal'
-import { Slideshow } from '@phosphor-icons/react/Slideshow'
-import { Smiley } from '@phosphor-icons/react/Smiley'
-import { SmileyAngry } from '@phosphor-icons/react/SmileyAngry'
-import { SmileyBlank } from '@phosphor-icons/react/SmileyBlank'
-import { SmileyMeh } from '@phosphor-icons/react/SmileyMeh'
-import { SmileyMelting } from '@phosphor-icons/react/SmileyMelting'
-import { SmileyNervous } from '@phosphor-icons/react/SmileyNervous'
-import { SmileySad } from '@phosphor-icons/react/SmileySad'
-import { SmileySticker } from '@phosphor-icons/react/SmileySticker'
-import { SmileyWink } from '@phosphor-icons/react/SmileyWink'
-import { SmileyXEyes } from '@phosphor-icons/react/SmileyXEyes'
-import { SnapchatLogo } from '@phosphor-icons/react/SnapchatLogo'
-import { Sneaker } from '@phosphor-icons/react/Sneaker'
-import { SneakerMove } from '@phosphor-icons/react/SneakerMove'
-import { Snowflake } from '@phosphor-icons/react/Snowflake'
-import { SoccerBall } from '@phosphor-icons/react/SoccerBall'
-import { Sock } from '@phosphor-icons/react/Sock'
-import { SolarPanel } from '@phosphor-icons/react/SolarPanel'
-import { SolarRoof } from '@phosphor-icons/react/SolarRoof'
-import { SortAscending } from '@phosphor-icons/react/SortAscending'
-import { SortDescending } from '@phosphor-icons/react/SortDescending'
-import { SoundcloudLogo } from '@phosphor-icons/react/SoundcloudLogo'
-import { Spade } from '@phosphor-icons/react/Spade'
-import { Sparkle } from '@phosphor-icons/react/Sparkle'
-import { SpeakerHifi } from '@phosphor-icons/react/SpeakerHifi'
-import { SpeakerHigh } from '@phosphor-icons/react/SpeakerHigh'
-import { SpeakerLow } from '@phosphor-icons/react/SpeakerLow'
-import { SpeakerNone } from '@phosphor-icons/react/SpeakerNone'
-import { SpeakerSimpleHigh } from '@phosphor-icons/react/SpeakerSimpleHigh'
-import { SpeakerSimpleLow } from '@phosphor-icons/react/SpeakerSimpleLow'
-import { SpeakerSimpleNone } from '@phosphor-icons/react/SpeakerSimpleNone'
-import { SpeakerSimpleSlash } from '@phosphor-icons/react/SpeakerSimpleSlash'
-import { SpeakerSimpleX } from '@phosphor-icons/react/SpeakerSimpleX'
-import { SpeakerSlash } from '@phosphor-icons/react/SpeakerSlash'
-import { SpeakerX } from '@phosphor-icons/react/SpeakerX'
-import { Speedometer } from '@phosphor-icons/react/Speedometer'
-import { Sphere } from '@phosphor-icons/react/Sphere'
-import { Spinner } from '@phosphor-icons/react/Spinner'
-import { SpinnerBall } from '@phosphor-icons/react/SpinnerBall'
-import { SpinnerGap } from '@phosphor-icons/react/SpinnerGap'
-import { Spiral } from '@phosphor-icons/react/Spiral'
-import { SplitHorizontal } from '@phosphor-icons/react/SplitHorizontal'
-import { SplitVertical } from '@phosphor-icons/react/SplitVertical'
-import { SpotifyLogo } from '@phosphor-icons/react/SpotifyLogo'
-import { SprayBottle } from '@phosphor-icons/react/SprayBottle'
-import { Square } from '@phosphor-icons/react/Square'
-import { SquareHalf } from '@phosphor-icons/react/SquareHalf'
-import { SquareHalfBottom } from '@phosphor-icons/react/SquareHalfBottom'
-import { SquareLogo } from '@phosphor-icons/react/SquareLogo'
-import { SquaresFour } from '@phosphor-icons/react/SquaresFour'
-import { SquareSplitHorizontal } from '@phosphor-icons/react/SquareSplitHorizontal'
-import { SquareSplitVertical } from '@phosphor-icons/react/SquareSplitVertical'
-import { Stack } from '@phosphor-icons/react/Stack'
-import { StackMinus } from '@phosphor-icons/react/StackMinus'
-import { StackOverflowLogo } from '@phosphor-icons/react/StackOverflowLogo'
-import { StackPlus } from '@phosphor-icons/react/StackPlus'
-import { StackSimple } from '@phosphor-icons/react/StackSimple'
-import { Stairs } from '@phosphor-icons/react/Stairs'
-import { Stamp } from '@phosphor-icons/react/Stamp'
-import { StandardDefinition } from '@phosphor-icons/react/StandardDefinition'
-import { Star } from '@phosphor-icons/react/Star'
-import { StarAndCrescent } from '@phosphor-icons/react/StarAndCrescent'
-import { StarFour } from '@phosphor-icons/react/StarFour'
-import { StarHalf } from '@phosphor-icons/react/StarHalf'
-import { StarOfDavid } from '@phosphor-icons/react/StarOfDavid'
-import { SteamLogo } from '@phosphor-icons/react/SteamLogo'
-import { SteeringWheel } from '@phosphor-icons/react/SteeringWheel'
-import { Steps } from '@phosphor-icons/react/Steps'
-import { Stethoscope } from '@phosphor-icons/react/Stethoscope'
-import { Sticker } from '@phosphor-icons/react/Sticker'
-import { Stool } from '@phosphor-icons/react/Stool'
-import { Stop } from '@phosphor-icons/react/Stop'
-import { StopCircle } from '@phosphor-icons/react/StopCircle'
-import { Storefront } from '@phosphor-icons/react/Storefront'
-import { Strategy } from '@phosphor-icons/react/Strategy'
-import { StripeLogo } from '@phosphor-icons/react/StripeLogo'
-import { Student } from '@phosphor-icons/react/Student'
-import { SubsetOf } from '@phosphor-icons/react/SubsetOf'
-import { SubsetProperOf } from '@phosphor-icons/react/SubsetProperOf'
-import { Subtitles } from '@phosphor-icons/react/Subtitles'
-import { SubtitlesSlash } from '@phosphor-icons/react/SubtitlesSlash'
-import { Subtract } from '@phosphor-icons/react/Subtract'
-import { SubtractSquare } from '@phosphor-icons/react/SubtractSquare'
-import { Subway } from '@phosphor-icons/react/Subway'
-import { Suitcase } from '@phosphor-icons/react/Suitcase'
-import { SuitcaseRolling } from '@phosphor-icons/react/SuitcaseRolling'
-import { SuitcaseSimple } from '@phosphor-icons/react/SuitcaseSimple'
-import { Sun } from '@phosphor-icons/react/Sun'
-import { SunDim } from '@phosphor-icons/react/SunDim'
-import { Sunglasses } from '@phosphor-icons/react/Sunglasses'
-import { SunHorizon } from '@phosphor-icons/react/SunHorizon'
-import { SupersetOf } from '@phosphor-icons/react/SupersetOf'
-import { SupersetProperOf } from '@phosphor-icons/react/SupersetProperOf'
-import { Swap } from '@phosphor-icons/react/Swap'
-import { Swatches } from '@phosphor-icons/react/Swatches'
-import { SwimmingPool } from '@phosphor-icons/react/SwimmingPool'
-import { Sword } from '@phosphor-icons/react/Sword'
-import { Synagogue } from '@phosphor-icons/react/Synagogue'
-import { Syringe } from '@phosphor-icons/react/Syringe'
-import { Table } from '@phosphor-icons/react/Table'
-import { Tabs } from '@phosphor-icons/react/Tabs'
-import { Tag } from '@phosphor-icons/react/Tag'
-import { TagChevron } from '@phosphor-icons/react/TagChevron'
-import { TagSimple } from '@phosphor-icons/react/TagSimple'
-import { Target } from '@phosphor-icons/react/Target'
-import { Taxi } from '@phosphor-icons/react/Taxi'
-import { TeaBag } from '@phosphor-icons/react/TeaBag'
-import { TelegramLogo } from '@phosphor-icons/react/TelegramLogo'
-import { Television } from '@phosphor-icons/react/Television'
-import { TelevisionSimple } from '@phosphor-icons/react/TelevisionSimple'
-import { TennisBall } from '@phosphor-icons/react/TennisBall'
-import { Tent } from '@phosphor-icons/react/Tent'
-import { Terminal } from '@phosphor-icons/react/Terminal'
-import { TerminalWindow } from '@phosphor-icons/react/TerminalWindow'
-import { TestTube } from '@phosphor-icons/react/TestTube'
-import { TextAa } from '@phosphor-icons/react/TextAa'
-import { TextAlignCenter } from '@phosphor-icons/react/TextAlignCenter'
-import { TextAlignJustify } from '@phosphor-icons/react/TextAlignJustify'
-import { TextAlignLeft } from '@phosphor-icons/react/TextAlignLeft'
-import { TextAlignRight } from '@phosphor-icons/react/TextAlignRight'
-import { TextAUnderline } from '@phosphor-icons/react/TextAUnderline'
-import { TextB } from '@phosphor-icons/react/TextB'
-import { Textbox } from '@phosphor-icons/react/Textbox'
-import { TextColumns } from '@phosphor-icons/react/TextColumns'
-import { TextH } from '@phosphor-icons/react/TextH'
-import { TextHFive } from '@phosphor-icons/react/TextHFive'
-import { TextHFour } from '@phosphor-icons/react/TextHFour'
-import { TextHOne } from '@phosphor-icons/react/TextHOne'
-import { TextHSix } from '@phosphor-icons/react/TextHSix'
-import { TextHThree } from '@phosphor-icons/react/TextHThree'
-import { TextHTwo } from '@phosphor-icons/react/TextHTwo'
-import { TextIndent } from '@phosphor-icons/react/TextIndent'
-import { TextItalic } from '@phosphor-icons/react/TextItalic'
-import { TextOutdent } from '@phosphor-icons/react/TextOutdent'
-import { TextStrikethrough } from '@phosphor-icons/react/TextStrikethrough'
-import { TextSubscript } from '@phosphor-icons/react/TextSubscript'
-import { TextSuperscript } from '@phosphor-icons/react/TextSuperscript'
-import { TextT } from '@phosphor-icons/react/TextT'
-import { TextTSlash } from '@phosphor-icons/react/TextTSlash'
-import { TextUnderline } from '@phosphor-icons/react/TextUnderline'
-import { Thermometer } from '@phosphor-icons/react/Thermometer'
-import { ThermometerCold } from '@phosphor-icons/react/ThermometerCold'
-import { ThermometerHot } from '@phosphor-icons/react/ThermometerHot'
-import { ThermometerSimple } from '@phosphor-icons/react/ThermometerSimple'
-import { ThreadsLogo } from '@phosphor-icons/react/ThreadsLogo'
-import { ThreeD } from '@phosphor-icons/react/ThreeD'
-import { ThumbsDown } from '@phosphor-icons/react/ThumbsDown'
-import { ThumbsUp } from '@phosphor-icons/react/ThumbsUp'
-import { Ticket } from '@phosphor-icons/react/Ticket'
-import { TidalLogo } from '@phosphor-icons/react/TidalLogo'
-import { TiktokLogo } from '@phosphor-icons/react/TiktokLogo'
-import { Tilde } from '@phosphor-icons/react/Tilde'
-import { Timer } from '@phosphor-icons/react/Timer'
-import { Tipi } from '@phosphor-icons/react/Tipi'
-import { TipJar } from '@phosphor-icons/react/TipJar'
-import { Tire } from '@phosphor-icons/react/Tire'
-import { ToggleLeft } from '@phosphor-icons/react/ToggleLeft'
-import { ToggleRight } from '@phosphor-icons/react/ToggleRight'
-import { Toilet } from '@phosphor-icons/react/Toilet'
-import { ToiletPaper } from '@phosphor-icons/react/ToiletPaper'
-import { Toolbox } from '@phosphor-icons/react/Toolbox'
-import { Tooth } from '@phosphor-icons/react/Tooth'
-import { Tornado } from '@phosphor-icons/react/Tornado'
-import { Tote } from '@phosphor-icons/react/Tote'
-import { ToteSimple } from '@phosphor-icons/react/ToteSimple'
-import { Towel } from '@phosphor-icons/react/Towel'
-import { Tractor } from '@phosphor-icons/react/Tractor'
-import { Trademark } from '@phosphor-icons/react/Trademark'
-import { TrademarkRegistered } from '@phosphor-icons/react/TrademarkRegistered'
-import { TrafficCone } from '@phosphor-icons/react/TrafficCone'
-import { TrafficSign } from '@phosphor-icons/react/TrafficSign'
-import { TrafficSignal } from '@phosphor-icons/react/TrafficSignal'
-import { Train } from '@phosphor-icons/react/Train'
-import { TrainRegional } from '@phosphor-icons/react/TrainRegional'
-import { TrainSimple } from '@phosphor-icons/react/TrainSimple'
-import { Tram } from '@phosphor-icons/react/Tram'
-import { Translate } from '@phosphor-icons/react/Translate'
-import { Trash } from '@phosphor-icons/react/Trash'
-import { TrashSimple } from '@phosphor-icons/react/TrashSimple'
-import { Tray } from '@phosphor-icons/react/Tray'
-import { TrayArrowDown } from '@phosphor-icons/react/TrayArrowDown'
-import { TrayArrowUp } from '@phosphor-icons/react/TrayArrowUp'
-import { TreasureChest } from '@phosphor-icons/react/TreasureChest'
-import { Tree } from '@phosphor-icons/react/Tree'
-import { TreeEvergreen } from '@phosphor-icons/react/TreeEvergreen'
-import { TreePalm } from '@phosphor-icons/react/TreePalm'
-import { TreeStructure } from '@phosphor-icons/react/TreeStructure'
-import { TreeView } from '@phosphor-icons/react/TreeView'
-import { TrendDown } from '@phosphor-icons/react/TrendDown'
-import { TrendUp } from '@phosphor-icons/react/TrendUp'
-import { Triangle } from '@phosphor-icons/react/Triangle'
-import { TriangleDashed } from '@phosphor-icons/react/TriangleDashed'
-import { Trolley } from '@phosphor-icons/react/Trolley'
-import { TrolleySuitcase } from '@phosphor-icons/react/TrolleySuitcase'
-import { Trophy } from '@phosphor-icons/react/Trophy'
-import { Truck } from '@phosphor-icons/react/Truck'
-import { TruckTrailer } from '@phosphor-icons/react/TruckTrailer'
-import { TShirt } from '@phosphor-icons/react/TShirt'
-import { TumblrLogo } from '@phosphor-icons/react/TumblrLogo'
-import { TwitchLogo } from '@phosphor-icons/react/TwitchLogo'
-import { TwitterLogo } from '@phosphor-icons/react/TwitterLogo'
-import { Umbrella } from '@phosphor-icons/react/Umbrella'
-import { UmbrellaSimple } from '@phosphor-icons/react/UmbrellaSimple'
-import { Union } from '@phosphor-icons/react/Union'
-import { Unite } from '@phosphor-icons/react/Unite'
-import { UniteSquare } from '@phosphor-icons/react/UniteSquare'
-import { Upload } from '@phosphor-icons/react/Upload'
-import { UploadSimple } from '@phosphor-icons/react/UploadSimple'
-import { Usb } from '@phosphor-icons/react/Usb'
-import { User } from '@phosphor-icons/react/User'
-import { UserCheck } from '@phosphor-icons/react/UserCheck'
-import { UserCircle } from '@phosphor-icons/react/UserCircle'
-import { UserCircleCheck } from '@phosphor-icons/react/UserCircleCheck'
-import { UserCircleDashed } from '@phosphor-icons/react/UserCircleDashed'
-import { UserCircleGear } from '@phosphor-icons/react/UserCircleGear'
-import { UserCircleMinus } from '@phosphor-icons/react/UserCircleMinus'
-import { UserCirclePlus } from '@phosphor-icons/react/UserCirclePlus'
-import { UserFocus } from '@phosphor-icons/react/UserFocus'
-import { UserGear } from '@phosphor-icons/react/UserGear'
-import { UserList } from '@phosphor-icons/react/UserList'
-import { UserMinus } from '@phosphor-icons/react/UserMinus'
-import { UserPlus } from '@phosphor-icons/react/UserPlus'
-import { UserRectangle } from '@phosphor-icons/react/UserRectangle'
-import { Users } from '@phosphor-icons/react/Users'
-import { UsersFour } from '@phosphor-icons/react/UsersFour'
-import { UserSound } from '@phosphor-icons/react/UserSound'
-import { UserSquare } from '@phosphor-icons/react/UserSquare'
-import { UsersThree } from '@phosphor-icons/react/UsersThree'
-import { UserSwitch } from '@phosphor-icons/react/UserSwitch'
-import { Van } from '@phosphor-icons/react/Van'
-import { Vault } from '@phosphor-icons/react/Vault'
-import { VectorThree } from '@phosphor-icons/react/VectorThree'
-import { VectorTwo } from '@phosphor-icons/react/VectorTwo'
-import { Vibrate } from '@phosphor-icons/react/Vibrate'
-import { Video } from '@phosphor-icons/react/Video'
-import { VideoCamera } from '@phosphor-icons/react/VideoCamera'
-import { VideoCameraSlash } from '@phosphor-icons/react/VideoCameraSlash'
-import { VideoConference } from '@phosphor-icons/react/VideoConference'
-import { Vignette } from '@phosphor-icons/react/Vignette'
-import { VinylRecord } from '@phosphor-icons/react/VinylRecord'
-import { VirtualReality } from '@phosphor-icons/react/VirtualReality'
-import { Virus } from '@phosphor-icons/react/Virus'
-import { Visor } from '@phosphor-icons/react/Visor'
-import { Voicemail } from '@phosphor-icons/react/Voicemail'
-import { Volleyball } from '@phosphor-icons/react/Volleyball'
-import { Wall } from '@phosphor-icons/react/Wall'
-import { Wallet } from '@phosphor-icons/react/Wallet'
-import { Warehouse } from '@phosphor-icons/react/Warehouse'
-import { Warning } from '@phosphor-icons/react/Warning'
-import { WarningCircle } from '@phosphor-icons/react/WarningCircle'
-import { WarningDiamond } from '@phosphor-icons/react/WarningDiamond'
-import { WarningOctagon } from '@phosphor-icons/react/WarningOctagon'
-import { WashingMachine } from '@phosphor-icons/react/WashingMachine'
-import { Watch } from '@phosphor-icons/react/Watch'
-import { Waveform } from '@phosphor-icons/react/Waveform'
-import { WaveformSlash } from '@phosphor-icons/react/WaveformSlash'
-import { Waves } from '@phosphor-icons/react/Waves'
-import { WaveSawtooth } from '@phosphor-icons/react/WaveSawtooth'
-import { WaveSine } from '@phosphor-icons/react/WaveSine'
-import { WaveSquare } from '@phosphor-icons/react/WaveSquare'
-import { WaveTriangle } from '@phosphor-icons/react/WaveTriangle'
-import { Webcam } from '@phosphor-icons/react/Webcam'
-import { WebcamSlash } from '@phosphor-icons/react/WebcamSlash'
-import { WebhooksLogo } from '@phosphor-icons/react/WebhooksLogo'
-import { WechatLogo } from '@phosphor-icons/react/WechatLogo'
-import { WhatsappLogo } from '@phosphor-icons/react/WhatsappLogo'
-import { Wheelchair } from '@phosphor-icons/react/Wheelchair'
-import { WheelchairMotion } from '@phosphor-icons/react/WheelchairMotion'
-import { WifiHigh } from '@phosphor-icons/react/WifiHigh'
-import { WifiLow } from '@phosphor-icons/react/WifiLow'
-import { WifiMedium } from '@phosphor-icons/react/WifiMedium'
-import { WifiNone } from '@phosphor-icons/react/WifiNone'
-import { WifiSlash } from '@phosphor-icons/react/WifiSlash'
-import { WifiX } from '@phosphor-icons/react/WifiX'
-import { Wind } from '@phosphor-icons/react/Wind'
-import { Windmill } from '@phosphor-icons/react/Windmill'
-import { WindowsLogo } from '@phosphor-icons/react/WindowsLogo'
-import { Wine } from '@phosphor-icons/react/Wine'
-import { Wrench } from '@phosphor-icons/react/Wrench'
-import { X } from '@phosphor-icons/react/X'
-import { XCircle } from '@phosphor-icons/react/XCircle'
-import { XLogo } from '@phosphor-icons/react/XLogo'
-import { XSquare } from '@phosphor-icons/react/XSquare'
-import { Yarn } from '@phosphor-icons/react/Yarn'
-import { YinYang } from '@phosphor-icons/react/YinYang'
-import { YoutubeLogo } from '@phosphor-icons/react/YoutubeLogo'
+import { AcornIcon } from '@phosphor-icons/react/Acorn'
+import { AddressBookIcon } from '@phosphor-icons/react/AddressBook'
+import { AddressBookTabsIcon } from '@phosphor-icons/react/AddressBookTabs'
+import { AirplaneIcon } from '@phosphor-icons/react/Airplane'
+import { AirplaneInFlightIcon } from '@phosphor-icons/react/AirplaneInFlight'
+import { AirplaneLandingIcon } from '@phosphor-icons/react/AirplaneLanding'
+import { AirplaneTakeoffIcon } from '@phosphor-icons/react/AirplaneTakeoff'
+import { AirplaneTaxiingIcon } from '@phosphor-icons/react/AirplaneTaxiing'
+import { AirplaneTiltIcon } from '@phosphor-icons/react/AirplaneTilt'
+import { AirplayIcon } from '@phosphor-icons/react/Airplay'
+import { AirTrafficControlIcon } from '@phosphor-icons/react/AirTrafficControl'
+import { AlarmIcon } from '@phosphor-icons/react/Alarm'
+import { AlienIcon } from '@phosphor-icons/react/Alien'
+import { AlignBottomIcon } from '@phosphor-icons/react/AlignBottom'
+import { AlignBottomSimpleIcon } from '@phosphor-icons/react/AlignBottomSimple'
+import { AlignCenterHorizontalIcon } from '@phosphor-icons/react/AlignCenterHorizontal'
+import { AlignCenterHorizontalSimpleIcon } from '@phosphor-icons/react/AlignCenterHorizontalSimple'
+import { AlignCenterVerticalIcon } from '@phosphor-icons/react/AlignCenterVertical'
+import { AlignCenterVerticalSimpleIcon } from '@phosphor-icons/react/AlignCenterVerticalSimple'
+import { AlignLeftIcon } from '@phosphor-icons/react/AlignLeft'
+import { AlignLeftSimpleIcon } from '@phosphor-icons/react/AlignLeftSimple'
+import { AlignRightIcon } from '@phosphor-icons/react/AlignRight'
+import { AlignRightSimpleIcon } from '@phosphor-icons/react/AlignRightSimple'
+import { AlignTopIcon } from '@phosphor-icons/react/AlignTop'
+import { AlignTopSimpleIcon } from '@phosphor-icons/react/AlignTopSimple'
+import { AmazonLogoIcon } from '@phosphor-icons/react/AmazonLogo'
+import { AmbulanceIcon } from '@phosphor-icons/react/Ambulance'
+import { AnchorIcon } from '@phosphor-icons/react/Anchor'
+import { AnchorSimpleIcon } from '@phosphor-icons/react/AnchorSimple'
+import { AndroidLogoIcon } from '@phosphor-icons/react/AndroidLogo'
+import { AngleIcon } from '@phosphor-icons/react/Angle'
+import { AngularLogoIcon } from '@phosphor-icons/react/AngularLogo'
+import { ApertureIcon } from '@phosphor-icons/react/Aperture'
+import { AppleLogoIcon } from '@phosphor-icons/react/AppleLogo'
+import { ApplePodcastsLogoIcon } from '@phosphor-icons/react/ApplePodcastsLogo'
+import { ApproximateEqualsIcon } from '@phosphor-icons/react/ApproximateEquals'
+import { AppStoreLogoIcon } from '@phosphor-icons/react/AppStoreLogo'
+import { AppWindowIcon } from '@phosphor-icons/react/AppWindow'
+import { ArchiveIcon } from '@phosphor-icons/react/Archive'
+import { ArmchairIcon } from '@phosphor-icons/react/Armchair'
+import { ArrowArcLeftIcon } from '@phosphor-icons/react/ArrowArcLeft'
+import { ArrowArcRightIcon } from '@phosphor-icons/react/ArrowArcRight'
+import { ArrowBendDoubleUpLeftIcon } from '@phosphor-icons/react/ArrowBendDoubleUpLeft'
+import { ArrowBendDoubleUpRightIcon } from '@phosphor-icons/react/ArrowBendDoubleUpRight'
+import { ArrowBendDownLeftIcon } from '@phosphor-icons/react/ArrowBendDownLeft'
+import { ArrowBendDownRightIcon } from '@phosphor-icons/react/ArrowBendDownRight'
+import { ArrowBendLeftDownIcon } from '@phosphor-icons/react/ArrowBendLeftDown'
+import { ArrowBendLeftUpIcon } from '@phosphor-icons/react/ArrowBendLeftUp'
+import { ArrowBendRightDownIcon } from '@phosphor-icons/react/ArrowBendRightDown'
+import { ArrowBendRightUpIcon } from '@phosphor-icons/react/ArrowBendRightUp'
+import { ArrowBendUpLeftIcon } from '@phosphor-icons/react/ArrowBendUpLeft'
+import { ArrowBendUpRightIcon } from '@phosphor-icons/react/ArrowBendUpRight'
+import { ArrowCircleDownIcon } from '@phosphor-icons/react/ArrowCircleDown'
+import { ArrowCircleDownLeftIcon } from '@phosphor-icons/react/ArrowCircleDownLeft'
+import { ArrowCircleDownRightIcon } from '@phosphor-icons/react/ArrowCircleDownRight'
+import { ArrowCircleLeftIcon } from '@phosphor-icons/react/ArrowCircleLeft'
+import { ArrowCircleRightIcon } from '@phosphor-icons/react/ArrowCircleRight'
+import { ArrowCircleUpIcon } from '@phosphor-icons/react/ArrowCircleUp'
+import { ArrowCircleUpLeftIcon } from '@phosphor-icons/react/ArrowCircleUpLeft'
+import { ArrowCircleUpRightIcon } from '@phosphor-icons/react/ArrowCircleUpRight'
+import { ArrowClockwiseIcon } from '@phosphor-icons/react/ArrowClockwise'
+import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react/ArrowCounterClockwise'
+import { ArrowDownIcon } from '@phosphor-icons/react/ArrowDown'
+import { ArrowDownLeftIcon } from '@phosphor-icons/react/ArrowDownLeft'
+import { ArrowDownRightIcon } from '@phosphor-icons/react/ArrowDownRight'
+import { ArrowElbowDownLeftIcon } from '@phosphor-icons/react/ArrowElbowDownLeft'
+import { ArrowElbowDownRightIcon } from '@phosphor-icons/react/ArrowElbowDownRight'
+import { ArrowElbowLeftIcon } from '@phosphor-icons/react/ArrowElbowLeft'
+import { ArrowElbowLeftDownIcon } from '@phosphor-icons/react/ArrowElbowLeftDown'
+import { ArrowElbowLeftUpIcon } from '@phosphor-icons/react/ArrowElbowLeftUp'
+import { ArrowElbowRightIcon } from '@phosphor-icons/react/ArrowElbowRight'
+import { ArrowElbowRightDownIcon } from '@phosphor-icons/react/ArrowElbowRightDown'
+import { ArrowElbowRightUpIcon } from '@phosphor-icons/react/ArrowElbowRightUp'
+import { ArrowElbowUpLeftIcon } from '@phosphor-icons/react/ArrowElbowUpLeft'
+import { ArrowElbowUpRightIcon } from '@phosphor-icons/react/ArrowElbowUpRight'
+import { ArrowFatDownIcon } from '@phosphor-icons/react/ArrowFatDown'
+import { ArrowFatLeftIcon } from '@phosphor-icons/react/ArrowFatLeft'
+import { ArrowFatLineDownIcon } from '@phosphor-icons/react/ArrowFatLineDown'
+import { ArrowFatLineLeftIcon } from '@phosphor-icons/react/ArrowFatLineLeft'
+import { ArrowFatLineRightIcon } from '@phosphor-icons/react/ArrowFatLineRight'
+import { ArrowFatLinesDownIcon } from '@phosphor-icons/react/ArrowFatLinesDown'
+import { ArrowFatLinesLeftIcon } from '@phosphor-icons/react/ArrowFatLinesLeft'
+import { ArrowFatLinesRightIcon } from '@phosphor-icons/react/ArrowFatLinesRight'
+import { ArrowFatLinesUpIcon } from '@phosphor-icons/react/ArrowFatLinesUp'
+import { ArrowFatLineUpIcon } from '@phosphor-icons/react/ArrowFatLineUp'
+import { ArrowFatRightIcon } from '@phosphor-icons/react/ArrowFatRight'
+import { ArrowFatUpIcon } from '@phosphor-icons/react/ArrowFatUp'
+import { ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
+import { ArrowLineDownIcon } from '@phosphor-icons/react/ArrowLineDown'
+import { ArrowLineDownLeftIcon } from '@phosphor-icons/react/ArrowLineDownLeft'
+import { ArrowLineDownRightIcon } from '@phosphor-icons/react/ArrowLineDownRight'
+import { ArrowLineLeftIcon } from '@phosphor-icons/react/ArrowLineLeft'
+import { ArrowLineRightIcon } from '@phosphor-icons/react/ArrowLineRight'
+import { ArrowLineUpIcon } from '@phosphor-icons/react/ArrowLineUp'
+import { ArrowLineUpLeftIcon } from '@phosphor-icons/react/ArrowLineUpLeft'
+import { ArrowLineUpRightIcon } from '@phosphor-icons/react/ArrowLineUpRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowsClockwiseIcon } from '@phosphor-icons/react/ArrowsClockwise'
+import { ArrowsCounterClockwiseIcon } from '@phosphor-icons/react/ArrowsCounterClockwise'
+import { ArrowsDownUpIcon } from '@phosphor-icons/react/ArrowsDownUp'
+import { ArrowsHorizontalIcon } from '@phosphor-icons/react/ArrowsHorizontal'
+import { ArrowsInIcon } from '@phosphor-icons/react/ArrowsIn'
+import { ArrowsInCardinalIcon } from '@phosphor-icons/react/ArrowsInCardinal'
+import { ArrowsInLineHorizontalIcon } from '@phosphor-icons/react/ArrowsInLineHorizontal'
+import { ArrowsInLineVerticalIcon } from '@phosphor-icons/react/ArrowsInLineVertical'
+import { ArrowsInSimpleIcon } from '@phosphor-icons/react/ArrowsInSimple'
+import { ArrowsLeftRightIcon } from '@phosphor-icons/react/ArrowsLeftRight'
+import { ArrowsMergeIcon } from '@phosphor-icons/react/ArrowsMerge'
+import { ArrowsOutIcon } from '@phosphor-icons/react/ArrowsOut'
+import { ArrowsOutCardinalIcon } from '@phosphor-icons/react/ArrowsOutCardinal'
+import { ArrowsOutLineHorizontalIcon } from '@phosphor-icons/react/ArrowsOutLineHorizontal'
+import { ArrowsOutLineVerticalIcon } from '@phosphor-icons/react/ArrowsOutLineVertical'
+import { ArrowsOutSimpleIcon } from '@phosphor-icons/react/ArrowsOutSimple'
+import { ArrowSquareDownIcon } from '@phosphor-icons/react/ArrowSquareDown'
+import { ArrowSquareDownLeftIcon } from '@phosphor-icons/react/ArrowSquareDownLeft'
+import { ArrowSquareDownRightIcon } from '@phosphor-icons/react/ArrowSquareDownRight'
+import { ArrowSquareInIcon } from '@phosphor-icons/react/ArrowSquareIn'
+import { ArrowSquareLeftIcon } from '@phosphor-icons/react/ArrowSquareLeft'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
+import { ArrowSquareRightIcon } from '@phosphor-icons/react/ArrowSquareRight'
+import { ArrowSquareUpIcon } from '@phosphor-icons/react/ArrowSquareUp'
+import { ArrowSquareUpLeftIcon } from '@phosphor-icons/react/ArrowSquareUpLeft'
+import { ArrowSquareUpRightIcon } from '@phosphor-icons/react/ArrowSquareUpRight'
+import { ArrowsSplitIcon } from '@phosphor-icons/react/ArrowsSplit'
+import { ArrowsVerticalIcon } from '@phosphor-icons/react/ArrowsVertical'
+import { ArrowUDownLeftIcon } from '@phosphor-icons/react/ArrowUDownLeft'
+import { ArrowUDownRightIcon } from '@phosphor-icons/react/ArrowUDownRight'
+import { ArrowULeftDownIcon } from '@phosphor-icons/react/ArrowULeftDown'
+import { ArrowULeftUpIcon } from '@phosphor-icons/react/ArrowULeftUp'
+import { ArrowUpIcon } from '@phosphor-icons/react/ArrowUp'
+import { ArrowUpLeftIcon } from '@phosphor-icons/react/ArrowUpLeft'
+import { ArrowUpRightIcon } from '@phosphor-icons/react/ArrowUpRight'
+import { ArrowURightDownIcon } from '@phosphor-icons/react/ArrowURightDown'
+import { ArrowURightUpIcon } from '@phosphor-icons/react/ArrowURightUp'
+import { ArrowUUpLeftIcon } from '@phosphor-icons/react/ArrowUUpLeft'
+import { ArrowUUpRightIcon } from '@phosphor-icons/react/ArrowUUpRight'
+import { ArticleIcon } from '@phosphor-icons/react/Article'
+import { ArticleMediumIcon } from '@phosphor-icons/react/ArticleMedium'
+import { ArticleNyTimesIcon } from '@phosphor-icons/react/ArticleNyTimes'
+import { AsclepiusIcon } from '@phosphor-icons/react/Asclepius'
+import { AsteriskIcon } from '@phosphor-icons/react/Asterisk'
+import { AsteriskSimpleIcon } from '@phosphor-icons/react/AsteriskSimple'
+import { AtIcon } from '@phosphor-icons/react/At'
+import { AtomIcon } from '@phosphor-icons/react/Atom'
+import { AvocadoIcon } from '@phosphor-icons/react/Avocado'
+import { AxeIcon } from '@phosphor-icons/react/Axe'
+import { BabyIcon } from '@phosphor-icons/react/Baby'
+import { BabyCarriageIcon } from '@phosphor-icons/react/BabyCarriage'
+import { BackpackIcon } from '@phosphor-icons/react/Backpack'
+import { BackspaceIcon } from '@phosphor-icons/react/Backspace'
+import { BagIcon } from '@phosphor-icons/react/Bag'
+import { BagSimpleIcon } from '@phosphor-icons/react/BagSimple'
+import { BalloonIcon } from '@phosphor-icons/react/Balloon'
+import { BandaidsIcon } from '@phosphor-icons/react/Bandaids'
+import { BankIcon } from '@phosphor-icons/react/Bank'
+import { BarbellIcon } from '@phosphor-icons/react/Barbell'
+import { BarcodeIcon } from '@phosphor-icons/react/Barcode'
+import { BarnIcon } from '@phosphor-icons/react/Barn'
+import { BarricadeIcon } from '@phosphor-icons/react/Barricade'
+import { BaseballIcon } from '@phosphor-icons/react/Baseball'
+import { BaseballCapIcon } from '@phosphor-icons/react/BaseballCap'
+import { BaseballHelmetIcon } from '@phosphor-icons/react/BaseballHelmet'
+import { BasketIcon } from '@phosphor-icons/react/Basket'
+import { BasketballIcon } from '@phosphor-icons/react/Basketball'
+import { BathtubIcon } from '@phosphor-icons/react/Bathtub'
+import { BatteryChargingIcon } from '@phosphor-icons/react/BatteryCharging'
+import { BatteryChargingVerticalIcon } from '@phosphor-icons/react/BatteryChargingVertical'
+import { BatteryEmptyIcon } from '@phosphor-icons/react/BatteryEmpty'
+import { BatteryFullIcon } from '@phosphor-icons/react/BatteryFull'
+import { BatteryHighIcon } from '@phosphor-icons/react/BatteryHigh'
+import { BatteryLowIcon } from '@phosphor-icons/react/BatteryLow'
+import { BatteryMediumIcon } from '@phosphor-icons/react/BatteryMedium'
+import { BatteryPlusIcon } from '@phosphor-icons/react/BatteryPlus'
+import { BatteryPlusVerticalIcon } from '@phosphor-icons/react/BatteryPlusVertical'
+import { BatteryVerticalEmptyIcon } from '@phosphor-icons/react/BatteryVerticalEmpty'
+import { BatteryVerticalFullIcon } from '@phosphor-icons/react/BatteryVerticalFull'
+import { BatteryVerticalHighIcon } from '@phosphor-icons/react/BatteryVerticalHigh'
+import { BatteryVerticalLowIcon } from '@phosphor-icons/react/BatteryVerticalLow'
+import { BatteryVerticalMediumIcon } from '@phosphor-icons/react/BatteryVerticalMedium'
+import { BatteryWarningIcon } from '@phosphor-icons/react/BatteryWarning'
+import { BatteryWarningVerticalIcon } from '@phosphor-icons/react/BatteryWarningVertical'
+import { BeachBallIcon } from '@phosphor-icons/react/BeachBall'
+import { BeanieIcon } from '@phosphor-icons/react/Beanie'
+import { BedIcon } from '@phosphor-icons/react/Bed'
+import { BeerBottleIcon } from '@phosphor-icons/react/BeerBottle'
+import { BeerSteinIcon } from '@phosphor-icons/react/BeerStein'
+import { BehanceLogoIcon } from '@phosphor-icons/react/BehanceLogo'
+import { BellIcon } from '@phosphor-icons/react/Bell'
+import { BellRingingIcon } from '@phosphor-icons/react/BellRinging'
+import { BellSimpleIcon } from '@phosphor-icons/react/BellSimple'
+import { BellSimpleRingingIcon } from '@phosphor-icons/react/BellSimpleRinging'
+import { BellSimpleSlashIcon } from '@phosphor-icons/react/BellSimpleSlash'
+import { BellSimpleZIcon } from '@phosphor-icons/react/BellSimpleZ'
+import { BellSlashIcon } from '@phosphor-icons/react/BellSlash'
+import { BellZIcon } from '@phosphor-icons/react/BellZ'
+import { BeltIcon } from '@phosphor-icons/react/Belt'
+import { BezierCurveIcon } from '@phosphor-icons/react/BezierCurve'
+import { BicycleIcon } from '@phosphor-icons/react/Bicycle'
+import { BinaryIcon } from '@phosphor-icons/react/Binary'
+import { BinocularsIcon } from '@phosphor-icons/react/Binoculars'
+import { BiohazardIcon } from '@phosphor-icons/react/Biohazard'
+import { BirdIcon } from '@phosphor-icons/react/Bird'
+import { BlueprintIcon } from '@phosphor-icons/react/Blueprint'
+import { BluetoothIcon } from '@phosphor-icons/react/Bluetooth'
+import { BluetoothConnectedIcon } from '@phosphor-icons/react/BluetoothConnected'
+import { BluetoothSlashIcon } from '@phosphor-icons/react/BluetoothSlash'
+import { BluetoothXIcon } from '@phosphor-icons/react/BluetoothX'
+import { BoatIcon } from '@phosphor-icons/react/Boat'
+import { BombIcon } from '@phosphor-icons/react/Bomb'
+import { BoneIcon } from '@phosphor-icons/react/Bone'
+import { BookIcon } from '@phosphor-icons/react/Book'
+import { BookBookmarkIcon } from '@phosphor-icons/react/BookBookmark'
+import { BookmarkIcon } from '@phosphor-icons/react/Bookmark'
+import { BookmarksIcon } from '@phosphor-icons/react/Bookmarks'
+import { BookmarkSimpleIcon } from '@phosphor-icons/react/BookmarkSimple'
+import { BookmarksSimpleIcon } from '@phosphor-icons/react/BookmarksSimple'
+import { BookOpenIcon } from '@phosphor-icons/react/BookOpen'
+import { BookOpenTextIcon } from '@phosphor-icons/react/BookOpenText'
+import { BookOpenUserIcon } from '@phosphor-icons/react/BookOpenUser'
+import { BooksIcon } from '@phosphor-icons/react/Books'
+import { BootIcon } from '@phosphor-icons/react/Boot'
+import { BoulesIcon } from '@phosphor-icons/react/Boules'
+import { BoundingBoxIcon } from '@phosphor-icons/react/BoundingBox'
+import { BowlFoodIcon } from '@phosphor-icons/react/BowlFood'
+import { BowlingBallIcon } from '@phosphor-icons/react/BowlingBall'
+import { BowlSteamIcon } from '@phosphor-icons/react/BowlSteam'
+import { BoxArrowDownIcon } from '@phosphor-icons/react/BoxArrowDown'
+import { BoxArrowUpIcon } from '@phosphor-icons/react/BoxArrowUp'
+import { BoxingGloveIcon } from '@phosphor-icons/react/BoxingGlove'
+import { BracketsAngleIcon } from '@phosphor-icons/react/BracketsAngle'
+import { BracketsCurlyIcon } from '@phosphor-icons/react/BracketsCurly'
+import { BracketsRoundIcon } from '@phosphor-icons/react/BracketsRound'
+import { BracketsSquareIcon } from '@phosphor-icons/react/BracketsSquare'
+import { BrainIcon } from '@phosphor-icons/react/Brain'
+import { BrandyIcon } from '@phosphor-icons/react/Brandy'
+import { BreadIcon } from '@phosphor-icons/react/Bread'
+import { BridgeIcon } from '@phosphor-icons/react/Bridge'
+import { BriefcaseIcon } from '@phosphor-icons/react/Briefcase'
+import { BriefcaseMetalIcon } from '@phosphor-icons/react/BriefcaseMetal'
+import { BroadcastIcon } from '@phosphor-icons/react/Broadcast'
+import { BroomIcon } from '@phosphor-icons/react/Broom'
+import { BrowserIcon } from '@phosphor-icons/react/Browser'
+import { BrowsersIcon } from '@phosphor-icons/react/Browsers'
+import { BugIcon } from '@phosphor-icons/react/Bug'
+import { BugBeetleIcon } from '@phosphor-icons/react/BugBeetle'
+import { BugDroidIcon } from '@phosphor-icons/react/BugDroid'
+import { BuildingIcon } from '@phosphor-icons/react/Building'
+import { BuildingApartmentIcon } from '@phosphor-icons/react/BuildingApartment'
+import { BuildingOfficeIcon } from '@phosphor-icons/react/BuildingOffice'
+import { BuildingsIcon } from '@phosphor-icons/react/Buildings'
+import { BulldozerIcon } from '@phosphor-icons/react/Bulldozer'
+import { BusIcon } from '@phosphor-icons/react/Bus'
+import { ButterflyIcon } from '@phosphor-icons/react/Butterfly'
+import { CableCarIcon } from '@phosphor-icons/react/CableCar'
+import { CactusIcon } from '@phosphor-icons/react/Cactus'
+import { CakeIcon } from '@phosphor-icons/react/Cake'
+import { CalculatorIcon } from '@phosphor-icons/react/Calculator'
+import { CalendarIcon } from '@phosphor-icons/react/Calendar'
+import { CalendarBlankIcon } from '@phosphor-icons/react/CalendarBlank'
+import { CalendarCheckIcon } from '@phosphor-icons/react/CalendarCheck'
+import { CalendarDotIcon } from '@phosphor-icons/react/CalendarDot'
+import { CalendarDotsIcon } from '@phosphor-icons/react/CalendarDots'
+import { CalendarHeartIcon } from '@phosphor-icons/react/CalendarHeart'
+import { CalendarMinusIcon } from '@phosphor-icons/react/CalendarMinus'
+import { CalendarPlusIcon } from '@phosphor-icons/react/CalendarPlus'
+import { CalendarSlashIcon } from '@phosphor-icons/react/CalendarSlash'
+import { CalendarStarIcon } from '@phosphor-icons/react/CalendarStar'
+import { CalendarXIcon } from '@phosphor-icons/react/CalendarX'
+import { CallBellIcon } from '@phosphor-icons/react/CallBell'
+import { CameraIcon } from '@phosphor-icons/react/Camera'
+import { CameraPlusIcon } from '@phosphor-icons/react/CameraPlus'
+import { CameraRotateIcon } from '@phosphor-icons/react/CameraRotate'
+import { CameraSlashIcon } from '@phosphor-icons/react/CameraSlash'
+import { CampfireIcon } from '@phosphor-icons/react/Campfire'
+import { CarIcon } from '@phosphor-icons/react/Car'
+import { CarBatteryIcon } from '@phosphor-icons/react/CarBattery'
+import { CardholderIcon } from '@phosphor-icons/react/Cardholder'
+import { CardsIcon } from '@phosphor-icons/react/Cards'
+import { CardsThreeIcon } from '@phosphor-icons/react/CardsThree'
+import { CaretCircleDoubleDownIcon } from '@phosphor-icons/react/CaretCircleDoubleDown'
+import { CaretCircleDoubleLeftIcon } from '@phosphor-icons/react/CaretCircleDoubleLeft'
+import { CaretCircleDoubleRightIcon } from '@phosphor-icons/react/CaretCircleDoubleRight'
+import { CaretCircleDoubleUpIcon } from '@phosphor-icons/react/CaretCircleDoubleUp'
+import { CaretCircleDownIcon } from '@phosphor-icons/react/CaretCircleDown'
+import { CaretCircleLeftIcon } from '@phosphor-icons/react/CaretCircleLeft'
+import { CaretCircleRightIcon } from '@phosphor-icons/react/CaretCircleRight'
+import { CaretCircleUpIcon } from '@phosphor-icons/react/CaretCircleUp'
+import { CaretCircleUpDownIcon } from '@phosphor-icons/react/CaretCircleUpDown'
+import { CaretDoubleDownIcon } from '@phosphor-icons/react/CaretDoubleDown'
+import { CaretDoubleLeftIcon } from '@phosphor-icons/react/CaretDoubleLeft'
+import { CaretDoubleRightIcon } from '@phosphor-icons/react/CaretDoubleRight'
+import { CaretDoubleUpIcon } from '@phosphor-icons/react/CaretDoubleUp'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
+import { CaretLeftIcon } from '@phosphor-icons/react/CaretLeft'
+import { CaretLineDownIcon } from '@phosphor-icons/react/CaretLineDown'
+import { CaretLineLeftIcon } from '@phosphor-icons/react/CaretLineLeft'
+import { CaretLineRightIcon } from '@phosphor-icons/react/CaretLineRight'
+import { CaretLineUpIcon } from '@phosphor-icons/react/CaretLineUp'
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight'
+import { CaretUpIcon } from '@phosphor-icons/react/CaretUp'
+import { CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
+import { CarProfileIcon } from '@phosphor-icons/react/CarProfile'
+import { CarrotIcon } from '@phosphor-icons/react/Carrot'
+import { CarSimpleIcon } from '@phosphor-icons/react/CarSimple'
+import { CashRegisterIcon } from '@phosphor-icons/react/CashRegister'
+import { CassetteTapeIcon } from '@phosphor-icons/react/CassetteTape'
+import { CastleTurretIcon } from '@phosphor-icons/react/CastleTurret'
+import { CatIcon } from '@phosphor-icons/react/Cat'
+import { CellSignalFullIcon } from '@phosphor-icons/react/CellSignalFull'
+import { CellSignalHighIcon } from '@phosphor-icons/react/CellSignalHigh'
+import { CellSignalLowIcon } from '@phosphor-icons/react/CellSignalLow'
+import { CellSignalMediumIcon } from '@phosphor-icons/react/CellSignalMedium'
+import { CellSignalNoneIcon } from '@phosphor-icons/react/CellSignalNone'
+import { CellSignalSlashIcon } from '@phosphor-icons/react/CellSignalSlash'
+import { CellSignalXIcon } from '@phosphor-icons/react/CellSignalX'
+import { CellTowerIcon } from '@phosphor-icons/react/CellTower'
+import { CertificateIcon } from '@phosphor-icons/react/Certificate'
+import { ChairIcon } from '@phosphor-icons/react/Chair'
+import { ChalkboardIcon } from '@phosphor-icons/react/Chalkboard'
+import { ChalkboardSimpleIcon } from '@phosphor-icons/react/ChalkboardSimple'
+import { ChalkboardTeacherIcon } from '@phosphor-icons/react/ChalkboardTeacher'
+import { ChampagneIcon } from '@phosphor-icons/react/Champagne'
+import { ChargingStationIcon } from '@phosphor-icons/react/ChargingStation'
+import { ChartBarIcon } from '@phosphor-icons/react/ChartBar'
+import { ChartBarHorizontalIcon } from '@phosphor-icons/react/ChartBarHorizontal'
+import { ChartDonutIcon } from '@phosphor-icons/react/ChartDonut'
+import { ChartLineIcon } from '@phosphor-icons/react/ChartLine'
+import { ChartLineDownIcon } from '@phosphor-icons/react/ChartLineDown'
+import { ChartLineUpIcon } from '@phosphor-icons/react/ChartLineUp'
+import { ChartPieIcon } from '@phosphor-icons/react/ChartPie'
+import { ChartPieSliceIcon } from '@phosphor-icons/react/ChartPieSlice'
+import { ChartPolarIcon } from '@phosphor-icons/react/ChartPolar'
+import { ChartScatterIcon } from '@phosphor-icons/react/ChartScatter'
+import { ChatIcon } from '@phosphor-icons/react/Chat'
+import { ChatCenteredIcon } from '@phosphor-icons/react/ChatCentered'
+import { ChatCenteredDotsIcon } from '@phosphor-icons/react/ChatCenteredDots'
+import { ChatCenteredSlashIcon } from '@phosphor-icons/react/ChatCenteredSlash'
+import { ChatCenteredTextIcon } from '@phosphor-icons/react/ChatCenteredText'
+import { ChatCircleIcon } from '@phosphor-icons/react/ChatCircle'
+import { ChatCircleDotsIcon } from '@phosphor-icons/react/ChatCircleDots'
+import { ChatCircleSlashIcon } from '@phosphor-icons/react/ChatCircleSlash'
+import { ChatCircleTextIcon } from '@phosphor-icons/react/ChatCircleText'
+import { ChatDotsIcon } from '@phosphor-icons/react/ChatDots'
+import { ChatsIcon } from '@phosphor-icons/react/Chats'
+import { ChatsCircleIcon } from '@phosphor-icons/react/ChatsCircle'
+import { ChatSlashIcon } from '@phosphor-icons/react/ChatSlash'
+import { ChatsTeardropIcon } from '@phosphor-icons/react/ChatsTeardrop'
+import { ChatTeardropIcon } from '@phosphor-icons/react/ChatTeardrop'
+import { ChatTeardropDotsIcon } from '@phosphor-icons/react/ChatTeardropDots'
+import { ChatTeardropSlashIcon } from '@phosphor-icons/react/ChatTeardropSlash'
+import { ChatTeardropTextIcon } from '@phosphor-icons/react/ChatTeardropText'
+import { ChatTextIcon } from '@phosphor-icons/react/ChatText'
+import { CheckIcon } from '@phosphor-icons/react/Check'
+import { CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
+import { CheckerboardIcon } from '@phosphor-icons/react/Checkerboard'
+import { CheckFatIcon } from '@phosphor-icons/react/CheckFat'
+import { ChecksIcon } from '@phosphor-icons/react/Checks'
+import { CheckSquareIcon } from '@phosphor-icons/react/CheckSquare'
+import { CheckSquareOffsetIcon } from '@phosphor-icons/react/CheckSquareOffset'
+import { CheersIcon } from '@phosphor-icons/react/Cheers'
+import { CheeseIcon } from '@phosphor-icons/react/Cheese'
+import { ChefHatIcon } from '@phosphor-icons/react/ChefHat'
+import { CherriesIcon } from '@phosphor-icons/react/Cherries'
+import { ChurchIcon } from '@phosphor-icons/react/Church'
+import { CigaretteIcon } from '@phosphor-icons/react/Cigarette'
+import { CigaretteSlashIcon } from '@phosphor-icons/react/CigaretteSlash'
+import { CircleIcon } from '@phosphor-icons/react/Circle'
+import { CircleDashedIcon } from '@phosphor-icons/react/CircleDashed'
+import { CircleHalfIcon } from '@phosphor-icons/react/CircleHalf'
+import { CircleHalfTiltIcon } from '@phosphor-icons/react/CircleHalfTilt'
+import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
+import { CirclesFourIcon } from '@phosphor-icons/react/CirclesFour'
+import { CirclesThreeIcon } from '@phosphor-icons/react/CirclesThree'
+import { CirclesThreePlusIcon } from '@phosphor-icons/react/CirclesThreePlus'
+import { CircuitryIcon } from '@phosphor-icons/react/Circuitry'
+import { CityIcon } from '@phosphor-icons/react/City'
+import { ClipboardIcon } from '@phosphor-icons/react/Clipboard'
+import { ClipboardTextIcon } from '@phosphor-icons/react/ClipboardText'
+import { ClockIcon } from '@phosphor-icons/react/Clock'
+import { ClockAfternoonIcon } from '@phosphor-icons/react/ClockAfternoon'
+import { ClockClockwiseIcon } from '@phosphor-icons/react/ClockClockwise'
+import { ClockCountdownIcon } from '@phosphor-icons/react/ClockCountdown'
+import { ClockCounterClockwiseIcon } from '@phosphor-icons/react/ClockCounterClockwise'
+import { ClockUserIcon } from '@phosphor-icons/react/ClockUser'
+import { ClosedCaptioningIcon } from '@phosphor-icons/react/ClosedCaptioning'
+import { CloudIcon } from '@phosphor-icons/react/Cloud'
+import { CloudArrowDownIcon } from '@phosphor-icons/react/CloudArrowDown'
+import { CloudArrowUpIcon } from '@phosphor-icons/react/CloudArrowUp'
+import { CloudCheckIcon } from '@phosphor-icons/react/CloudCheck'
+import { CloudFogIcon } from '@phosphor-icons/react/CloudFog'
+import { CloudLightningIcon } from '@phosphor-icons/react/CloudLightning'
+import { CloudMoonIcon } from '@phosphor-icons/react/CloudMoon'
+import { CloudRainIcon } from '@phosphor-icons/react/CloudRain'
+import { CloudSlashIcon } from '@phosphor-icons/react/CloudSlash'
+import { CloudSnowIcon } from '@phosphor-icons/react/CloudSnow'
+import { CloudSunIcon } from '@phosphor-icons/react/CloudSun'
+import { CloudWarningIcon } from '@phosphor-icons/react/CloudWarning'
+import { CloudXIcon } from '@phosphor-icons/react/CloudX'
+import { CloverIcon } from '@phosphor-icons/react/Clover'
+import { ClubIcon } from '@phosphor-icons/react/Club'
+import { CoatHangerIcon } from '@phosphor-icons/react/CoatHanger'
+import { CodaLogoIcon } from '@phosphor-icons/react/CodaLogo'
+import { CodeIcon } from '@phosphor-icons/react/Code'
+import { CodeBlockIcon } from '@phosphor-icons/react/CodeBlock'
+import { CodepenLogoIcon } from '@phosphor-icons/react/CodepenLogo'
+import { CodesandboxLogoIcon } from '@phosphor-icons/react/CodesandboxLogo'
+import { CodeSimpleIcon } from '@phosphor-icons/react/CodeSimple'
+import { CoffeeIcon } from '@phosphor-icons/react/Coffee'
+import { CoffeeBeanIcon } from '@phosphor-icons/react/CoffeeBean'
+import { CoinIcon } from '@phosphor-icons/react/Coin'
+import { CoinsIcon } from '@phosphor-icons/react/Coins'
+import { CoinVerticalIcon } from '@phosphor-icons/react/CoinVertical'
+import { ColumnsIcon } from '@phosphor-icons/react/Columns'
+import { ColumnsPlusLeftIcon } from '@phosphor-icons/react/ColumnsPlusLeft'
+import { ColumnsPlusRightIcon } from '@phosphor-icons/react/ColumnsPlusRight'
+import { CommandIcon } from '@phosphor-icons/react/Command'
+import { CompassIcon } from '@phosphor-icons/react/Compass'
+import { CompassRoseIcon } from '@phosphor-icons/react/CompassRose'
+import { CompassToolIcon } from '@phosphor-icons/react/CompassTool'
+import { ComputerTowerIcon } from '@phosphor-icons/react/ComputerTower'
+import { ConfettiIcon } from '@phosphor-icons/react/Confetti'
+import { ContactlessPaymentIcon } from '@phosphor-icons/react/ContactlessPayment'
+import { ControlIcon } from '@phosphor-icons/react/Control'
+import { CookieIcon } from '@phosphor-icons/react/Cookie'
+import { CookingPotIcon } from '@phosphor-icons/react/CookingPot'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
+import { CopyleftIcon } from '@phosphor-icons/react/Copyleft'
+import { CopyrightIcon } from '@phosphor-icons/react/Copyright'
+import { CopySimpleIcon } from '@phosphor-icons/react/CopySimple'
+import { CornersInIcon } from '@phosphor-icons/react/CornersIn'
+import { CornersOutIcon } from '@phosphor-icons/react/CornersOut'
+import { CouchIcon } from '@phosphor-icons/react/Couch'
+import { CourtBasketballIcon } from '@phosphor-icons/react/CourtBasketball'
+import { CowIcon } from '@phosphor-icons/react/Cow'
+import { CowboyHatIcon } from '@phosphor-icons/react/CowboyHat'
+import { CpuIcon } from '@phosphor-icons/react/Cpu'
+import { CraneIcon } from '@phosphor-icons/react/Crane'
+import { CraneTowerIcon } from '@phosphor-icons/react/CraneTower'
+import { CreditCardIcon } from '@phosphor-icons/react/CreditCard'
+import { CricketIcon } from '@phosphor-icons/react/Cricket'
+import { CropIcon } from '@phosphor-icons/react/Crop'
+import { CrossIcon } from '@phosphor-icons/react/Cross'
+import { CrosshairIcon } from '@phosphor-icons/react/Crosshair'
+import { CrosshairSimpleIcon } from '@phosphor-icons/react/CrosshairSimple'
+import { CrownIcon } from '@phosphor-icons/react/Crown'
+import { CrownCrossIcon } from '@phosphor-icons/react/CrownCross'
+import { CrownSimpleIcon } from '@phosphor-icons/react/CrownSimple'
+import { CubeIcon } from '@phosphor-icons/react/Cube'
+import { CubeFocusIcon } from '@phosphor-icons/react/CubeFocus'
+import { CubeTransparentIcon } from '@phosphor-icons/react/CubeTransparent'
+import { CurrencyBtcIcon } from '@phosphor-icons/react/CurrencyBtc'
+import { CurrencyCircleDollarIcon } from '@phosphor-icons/react/CurrencyCircleDollar'
+import { CurrencyCnyIcon } from '@phosphor-icons/react/CurrencyCny'
+import { CurrencyDollarIcon } from '@phosphor-icons/react/CurrencyDollar'
+import { CurrencyDollarSimpleIcon } from '@phosphor-icons/react/CurrencyDollarSimple'
+import { CurrencyEthIcon } from '@phosphor-icons/react/CurrencyEth'
+import { CurrencyEurIcon } from '@phosphor-icons/react/CurrencyEur'
+import { CurrencyGbpIcon } from '@phosphor-icons/react/CurrencyGbp'
+import { CurrencyInrIcon } from '@phosphor-icons/react/CurrencyInr'
+import { CurrencyJpyIcon } from '@phosphor-icons/react/CurrencyJpy'
+import { CurrencyKrwIcon } from '@phosphor-icons/react/CurrencyKrw'
+import { CurrencyKztIcon } from '@phosphor-icons/react/CurrencyKzt'
+import { CurrencyNgnIcon } from '@phosphor-icons/react/CurrencyNgn'
+import { CurrencyRubIcon } from '@phosphor-icons/react/CurrencyRub'
+import { CursorIcon } from '@phosphor-icons/react/Cursor'
+import { CursorClickIcon } from '@phosphor-icons/react/CursorClick'
+import { CursorTextIcon } from '@phosphor-icons/react/CursorText'
+import { CylinderIcon } from '@phosphor-icons/react/Cylinder'
+import { DatabaseIcon } from '@phosphor-icons/react/Database'
+import { DeskIcon } from '@phosphor-icons/react/Desk'
+import { DesktopIcon } from '@phosphor-icons/react/Desktop'
+import { DesktopTowerIcon } from '@phosphor-icons/react/DesktopTower'
+import { DetectiveIcon } from '@phosphor-icons/react/Detective'
+import { DeviceMobileIcon } from '@phosphor-icons/react/DeviceMobile'
+import { DeviceMobileCameraIcon } from '@phosphor-icons/react/DeviceMobileCamera'
+import { DeviceMobileSlashIcon } from '@phosphor-icons/react/DeviceMobileSlash'
+import { DeviceMobileSpeakerIcon } from '@phosphor-icons/react/DeviceMobileSpeaker'
+import { DeviceRotateIcon } from '@phosphor-icons/react/DeviceRotate'
+import { DevicesIcon } from '@phosphor-icons/react/Devices'
+import { DeviceTabletIcon } from '@phosphor-icons/react/DeviceTablet'
+import { DeviceTabletCameraIcon } from '@phosphor-icons/react/DeviceTabletCamera'
+import { DeviceTabletSpeakerIcon } from '@phosphor-icons/react/DeviceTabletSpeaker'
+import { DevToLogoIcon } from '@phosphor-icons/react/DevToLogo'
+import { DiamondIcon } from '@phosphor-icons/react/Diamond'
+import { DiamondsFourIcon } from '@phosphor-icons/react/DiamondsFour'
+import { DiceFiveIcon } from '@phosphor-icons/react/DiceFive'
+import { DiceFourIcon } from '@phosphor-icons/react/DiceFour'
+import { DiceOneIcon } from '@phosphor-icons/react/DiceOne'
+import { DiceSixIcon } from '@phosphor-icons/react/DiceSix'
+import { DiceThreeIcon } from '@phosphor-icons/react/DiceThree'
+import { DiceTwoIcon } from '@phosphor-icons/react/DiceTwo'
+import { DiscIcon } from '@phosphor-icons/react/Disc'
+import { DiscoBallIcon } from '@phosphor-icons/react/DiscoBall'
+import { DiscordLogoIcon } from '@phosphor-icons/react/DiscordLogo'
+import { DivideIcon } from '@phosphor-icons/react/Divide'
+import { DnaIcon } from '@phosphor-icons/react/Dna'
+import { DogIcon } from '@phosphor-icons/react/Dog'
+import { DoorIcon } from '@phosphor-icons/react/Door'
+import { DoorOpenIcon } from '@phosphor-icons/react/DoorOpen'
+import { DotIcon } from '@phosphor-icons/react/Dot'
+import { DotOutlineIcon } from '@phosphor-icons/react/DotOutline'
+import { DotsNineIcon } from '@phosphor-icons/react/DotsNine'
+import { DotsSixIcon } from '@phosphor-icons/react/DotsSix'
+import { DotsSixVerticalIcon } from '@phosphor-icons/react/DotsSixVertical'
+import { DotsThreeIcon } from '@phosphor-icons/react/DotsThree'
+import { DotsThreeCircleIcon } from '@phosphor-icons/react/DotsThreeCircle'
+import { DotsThreeCircleVerticalIcon } from '@phosphor-icons/react/DotsThreeCircleVertical'
+import { DotsThreeOutlineIcon } from '@phosphor-icons/react/DotsThreeOutline'
+import { DotsThreeOutlineVerticalIcon } from '@phosphor-icons/react/DotsThreeOutlineVertical'
+import { DotsThreeVerticalIcon } from '@phosphor-icons/react/DotsThreeVertical'
+import { DownloadIcon } from '@phosphor-icons/react/Download'
+import { DownloadSimpleIcon } from '@phosphor-icons/react/DownloadSimple'
+import { DressIcon } from '@phosphor-icons/react/Dress'
+import { DresserIcon } from '@phosphor-icons/react/Dresser'
+import { DribbbleLogoIcon } from '@phosphor-icons/react/DribbbleLogo'
+import { DroneIcon } from '@phosphor-icons/react/Drone'
+import { DropIcon } from '@phosphor-icons/react/Drop'
+import { DropboxLogoIcon } from '@phosphor-icons/react/DropboxLogo'
+import { DropHalfIcon } from '@phosphor-icons/react/DropHalf'
+import { DropHalfBottomIcon } from '@phosphor-icons/react/DropHalfBottom'
+import { DropSimpleIcon } from '@phosphor-icons/react/DropSimple'
+import { DropSlashIcon } from '@phosphor-icons/react/DropSlash'
+import { EarIcon } from '@phosphor-icons/react/Ear'
+import { EarSlashIcon } from '@phosphor-icons/react/EarSlash'
+import { EggIcon } from '@phosphor-icons/react/Egg'
+import { EggCrackIcon } from '@phosphor-icons/react/EggCrack'
+import { EjectIcon } from '@phosphor-icons/react/Eject'
+import { EjectSimpleIcon } from '@phosphor-icons/react/EjectSimple'
+import { ElevatorIcon } from '@phosphor-icons/react/Elevator'
+import { EmptyIcon } from '@phosphor-icons/react/Empty'
+import { EngineIcon } from '@phosphor-icons/react/Engine'
+import { EnvelopeIcon } from '@phosphor-icons/react/Envelope'
+import { EnvelopeOpenIcon } from '@phosphor-icons/react/EnvelopeOpen'
+import { EnvelopeSimpleIcon } from '@phosphor-icons/react/EnvelopeSimple'
+import { EnvelopeSimpleOpenIcon } from '@phosphor-icons/react/EnvelopeSimpleOpen'
+import { EqualizerIcon } from '@phosphor-icons/react/Equalizer'
+import { EqualsIcon } from '@phosphor-icons/react/Equals'
+import { EraserIcon } from '@phosphor-icons/react/Eraser'
+import { EscalatorDownIcon } from '@phosphor-icons/react/EscalatorDown'
+import { EscalatorUpIcon } from '@phosphor-icons/react/EscalatorUp'
+import { ExamIcon } from '@phosphor-icons/react/Exam'
+import { ExclamationMarkIcon } from '@phosphor-icons/react/ExclamationMark'
+import { ExcludeIcon } from '@phosphor-icons/react/Exclude'
+import { ExcludeSquareIcon } from '@phosphor-icons/react/ExcludeSquare'
+import { ExportIcon } from '@phosphor-icons/react/Export'
+import { EyeIcon } from '@phosphor-icons/react/Eye'
+import { EyeClosedIcon } from '@phosphor-icons/react/EyeClosed'
+import { EyedropperIcon } from '@phosphor-icons/react/Eyedropper'
+import { EyedropperSampleIcon } from '@phosphor-icons/react/EyedropperSample'
+import { EyeglassesIcon } from '@phosphor-icons/react/Eyeglasses'
+import { EyesIcon } from '@phosphor-icons/react/Eyes'
+import { EyeSlashIcon } from '@phosphor-icons/react/EyeSlash'
+import { FacebookLogoIcon } from '@phosphor-icons/react/FacebookLogo'
+import { FaceMaskIcon } from '@phosphor-icons/react/FaceMask'
+import { FactoryIcon } from '@phosphor-icons/react/Factory'
+import { FadersIcon } from '@phosphor-icons/react/Faders'
+import { FadersHorizontalIcon } from '@phosphor-icons/react/FadersHorizontal'
+import { FalloutShelterIcon } from '@phosphor-icons/react/FalloutShelter'
+import { FanIcon } from '@phosphor-icons/react/Fan'
+import { FarmIcon } from '@phosphor-icons/react/Farm'
+import { FastForwardIcon } from '@phosphor-icons/react/FastForward'
+import { FastForwardCircleIcon } from '@phosphor-icons/react/FastForwardCircle'
+import { FeatherIcon } from '@phosphor-icons/react/Feather'
+import { FediverseLogoIcon } from '@phosphor-icons/react/FediverseLogo'
+import { FigmaLogoIcon } from '@phosphor-icons/react/FigmaLogo'
+import { FileIcon } from '@phosphor-icons/react/File'
+import { FileArchiveIcon } from '@phosphor-icons/react/FileArchive'
+import { FileArrowDownIcon } from '@phosphor-icons/react/FileArrowDown'
+import { FileArrowUpIcon } from '@phosphor-icons/react/FileArrowUp'
+import { FileAudioIcon } from '@phosphor-icons/react/FileAudio'
+import { FileCIcon } from '@phosphor-icons/react/FileC'
+import { FileCloudIcon } from '@phosphor-icons/react/FileCloud'
+import { FileCodeIcon } from '@phosphor-icons/react/FileCode'
+import { FileCppIcon } from '@phosphor-icons/react/FileCpp'
+import { FileCSharpIcon } from '@phosphor-icons/react/FileCSharp'
+import { FileCssIcon } from '@phosphor-icons/react/FileCss'
+import { FileCsvIcon } from '@phosphor-icons/react/FileCsv'
+import { FileDashedIcon } from '@phosphor-icons/react/FileDashed'
+import { FileDocIcon } from '@phosphor-icons/react/FileDoc'
+import { FileHtmlIcon } from '@phosphor-icons/react/FileHtml'
+import { FileImageIcon } from '@phosphor-icons/react/FileImage'
+import { FileIniIcon } from '@phosphor-icons/react/FileIni'
+import { FileJpgIcon } from '@phosphor-icons/react/FileJpg'
+import { FileJsIcon } from '@phosphor-icons/react/FileJs'
+import { FileJsxIcon } from '@phosphor-icons/react/FileJsx'
+import { FileLockIcon } from '@phosphor-icons/react/FileLock'
+import { FileMagnifyingGlassIcon } from '@phosphor-icons/react/FileMagnifyingGlass'
+import { FileMdIcon } from '@phosphor-icons/react/FileMd'
+import { FileMinusIcon } from '@phosphor-icons/react/FileMinus'
+import { FilePdfIcon } from '@phosphor-icons/react/FilePdf'
+import { FilePlusIcon } from '@phosphor-icons/react/FilePlus'
+import { FilePngIcon } from '@phosphor-icons/react/FilePng'
+import { FilePptIcon } from '@phosphor-icons/react/FilePpt'
+import { FilePyIcon } from '@phosphor-icons/react/FilePy'
+import { FileRsIcon } from '@phosphor-icons/react/FileRs'
+import { FilesIcon } from '@phosphor-icons/react/Files'
+import { FileSqlIcon } from '@phosphor-icons/react/FileSql'
+import { FileSvgIcon } from '@phosphor-icons/react/FileSvg'
+import { FileTextIcon } from '@phosphor-icons/react/FileText'
+import { FileTsIcon } from '@phosphor-icons/react/FileTs'
+import { FileTsxIcon } from '@phosphor-icons/react/FileTsx'
+import { FileTxtIcon } from '@phosphor-icons/react/FileTxt'
+import { FileVideoIcon } from '@phosphor-icons/react/FileVideo'
+import { FileVueIcon } from '@phosphor-icons/react/FileVue'
+import { FileXIcon } from '@phosphor-icons/react/FileX'
+import { FileXlsIcon } from '@phosphor-icons/react/FileXls'
+import { FileZipIcon } from '@phosphor-icons/react/FileZip'
+import { FilmReelIcon } from '@phosphor-icons/react/FilmReel'
+import { FilmScriptIcon } from '@phosphor-icons/react/FilmScript'
+import { FilmSlateIcon } from '@phosphor-icons/react/FilmSlate'
+import { FilmStripIcon } from '@phosphor-icons/react/FilmStrip'
+import { FingerprintIcon } from '@phosphor-icons/react/Fingerprint'
+import { FingerprintSimpleIcon } from '@phosphor-icons/react/FingerprintSimple'
+import { FinnTheHumanIcon } from '@phosphor-icons/react/FinnTheHuman'
+import { FireIcon } from '@phosphor-icons/react/Fire'
+import { FireExtinguisherIcon } from '@phosphor-icons/react/FireExtinguisher'
+import { FireSimpleIcon } from '@phosphor-icons/react/FireSimple'
+import { FireTruckIcon } from '@phosphor-icons/react/FireTruck'
+import { FirstAidIcon } from '@phosphor-icons/react/FirstAid'
+import { FirstAidKitIcon } from '@phosphor-icons/react/FirstAidKit'
+import { FishIcon } from '@phosphor-icons/react/Fish'
+import { FishSimpleIcon } from '@phosphor-icons/react/FishSimple'
+import { FlagIcon } from '@phosphor-icons/react/Flag'
+import { FlagBannerIcon } from '@phosphor-icons/react/FlagBanner'
+import { FlagBannerFoldIcon } from '@phosphor-icons/react/FlagBannerFold'
+import { FlagCheckeredIcon } from '@phosphor-icons/react/FlagCheckered'
+import { FlagPennantIcon } from '@phosphor-icons/react/FlagPennant'
+import { FlameIcon } from '@phosphor-icons/react/Flame'
+import { FlashlightIcon } from '@phosphor-icons/react/Flashlight'
+import { FlaskIcon } from '@phosphor-icons/react/Flask'
+import { FlipHorizontalIcon } from '@phosphor-icons/react/FlipHorizontal'
+import { FlipVerticalIcon } from '@phosphor-icons/react/FlipVertical'
+import { FloppyDiskIcon } from '@phosphor-icons/react/FloppyDisk'
+import { FloppyDiskBackIcon } from '@phosphor-icons/react/FloppyDiskBack'
+import { FlowArrowIcon } from '@phosphor-icons/react/FlowArrow'
+import { FlowerIcon } from '@phosphor-icons/react/Flower'
+import { FlowerLotusIcon } from '@phosphor-icons/react/FlowerLotus'
+import { FlowerTulipIcon } from '@phosphor-icons/react/FlowerTulip'
+import { FlyingSaucerIcon } from '@phosphor-icons/react/FlyingSaucer'
+import { FolderIcon } from '@phosphor-icons/react/Folder'
+import { FolderDashedIcon } from '@phosphor-icons/react/FolderDashed'
+import { FolderLockIcon } from '@phosphor-icons/react/FolderLock'
+import { FolderMinusIcon } from '@phosphor-icons/react/FolderMinus'
+import { FolderOpenIcon } from '@phosphor-icons/react/FolderOpen'
+import { FolderPlusIcon } from '@phosphor-icons/react/FolderPlus'
+import { FoldersIcon } from '@phosphor-icons/react/Folders'
+import { FolderSimpleIcon } from '@phosphor-icons/react/FolderSimple'
+import { FolderSimpleDashedIcon } from '@phosphor-icons/react/FolderSimpleDashed'
+import { FolderSimpleLockIcon } from '@phosphor-icons/react/FolderSimpleLock'
+import { FolderSimpleMinusIcon } from '@phosphor-icons/react/FolderSimpleMinus'
+import { FolderSimplePlusIcon } from '@phosphor-icons/react/FolderSimplePlus'
+import { FolderSimpleStarIcon } from '@phosphor-icons/react/FolderSimpleStar'
+import { FolderSimpleUserIcon } from '@phosphor-icons/react/FolderSimpleUser'
+import { FolderStarIcon } from '@phosphor-icons/react/FolderStar'
+import { FolderUserIcon } from '@phosphor-icons/react/FolderUser'
+import { FootballIcon } from '@phosphor-icons/react/Football'
+import { FootballHelmetIcon } from '@phosphor-icons/react/FootballHelmet'
+import { FootprintsIcon } from '@phosphor-icons/react/Footprints'
+import { ForkKnifeIcon } from '@phosphor-icons/react/ForkKnife'
+import { FourKIcon } from '@phosphor-icons/react/FourK'
+import { FrameCornersIcon } from '@phosphor-icons/react/FrameCorners'
+import { FramerLogoIcon } from '@phosphor-icons/react/FramerLogo'
+import { FunctionIcon } from '@phosphor-icons/react/Function'
+import { FunnelIcon } from '@phosphor-icons/react/Funnel'
+import { FunnelSimpleIcon } from '@phosphor-icons/react/FunnelSimple'
+import { FunnelSimpleXIcon } from '@phosphor-icons/react/FunnelSimpleX'
+import { FunnelXIcon } from '@phosphor-icons/react/FunnelX'
+import { GameControllerIcon } from '@phosphor-icons/react/GameController'
+import { GarageIcon } from '@phosphor-icons/react/Garage'
+import { GasCanIcon } from '@phosphor-icons/react/GasCan'
+import { GasPumpIcon } from '@phosphor-icons/react/GasPump'
+import { GaugeIcon } from '@phosphor-icons/react/Gauge'
+import { GavelIcon } from '@phosphor-icons/react/Gavel'
+import { GearIcon } from '@phosphor-icons/react/Gear'
+import { GearFineIcon } from '@phosphor-icons/react/GearFine'
+import { GearSixIcon } from '@phosphor-icons/react/GearSix'
+import { GenderFemaleIcon } from '@phosphor-icons/react/GenderFemale'
+import { GenderIntersexIcon } from '@phosphor-icons/react/GenderIntersex'
+import { GenderMaleIcon } from '@phosphor-icons/react/GenderMale'
+import { GenderNeuterIcon } from '@phosphor-icons/react/GenderNeuter'
+import { GenderNonbinaryIcon } from '@phosphor-icons/react/GenderNonbinary'
+import { GenderTransgenderIcon } from '@phosphor-icons/react/GenderTransgender'
+import { GhostIcon } from '@phosphor-icons/react/Ghost'
+import { GifIcon } from '@phosphor-icons/react/Gif'
+import { GiftIcon } from '@phosphor-icons/react/Gift'
+import { GitBranchIcon } from '@phosphor-icons/react/GitBranch'
+import { GitCommitIcon } from '@phosphor-icons/react/GitCommit'
+import { GitDiffIcon } from '@phosphor-icons/react/GitDiff'
+import { GitForkIcon } from '@phosphor-icons/react/GitFork'
+import { GithubLogoIcon } from '@phosphor-icons/react/GithubLogo'
+import { GitlabLogoIcon } from '@phosphor-icons/react/GitlabLogo'
+import { GitlabLogoSimpleIcon } from '@phosphor-icons/react/GitlabLogoSimple'
+import { GitMergeIcon } from '@phosphor-icons/react/GitMerge'
+import { GitPullRequestIcon } from '@phosphor-icons/react/GitPullRequest'
+import { GlobeIcon } from '@phosphor-icons/react/Globe'
+import { GlobeHemisphereEastIcon } from '@phosphor-icons/react/GlobeHemisphereEast'
+import { GlobeHemisphereWestIcon } from '@phosphor-icons/react/GlobeHemisphereWest'
+import { GlobeSimpleIcon } from '@phosphor-icons/react/GlobeSimple'
+import { GlobeSimpleXIcon } from '@phosphor-icons/react/GlobeSimpleX'
+import { GlobeStandIcon } from '@phosphor-icons/react/GlobeStand'
+import { GlobeXIcon } from '@phosphor-icons/react/GlobeX'
+import { GogglesIcon } from '@phosphor-icons/react/Goggles'
+import { GolfIcon } from '@phosphor-icons/react/Golf'
+import { GoodreadsLogoIcon } from '@phosphor-icons/react/GoodreadsLogo'
+import { GoogleCardboardLogoIcon } from '@phosphor-icons/react/GoogleCardboardLogo'
+import { GoogleChromeLogoIcon } from '@phosphor-icons/react/GoogleChromeLogo'
+import { GoogleDriveLogoIcon } from '@phosphor-icons/react/GoogleDriveLogo'
+import { GoogleLogoIcon } from '@phosphor-icons/react/GoogleLogo'
+import { GooglePhotosLogoIcon } from '@phosphor-icons/react/GooglePhotosLogo'
+import { GooglePlayLogoIcon } from '@phosphor-icons/react/GooglePlayLogo'
+import { GooglePodcastsLogoIcon } from '@phosphor-icons/react/GooglePodcastsLogo'
+import { GpsIcon } from '@phosphor-icons/react/Gps'
+import { GpsFixIcon } from '@phosphor-icons/react/GpsFix'
+import { GpsSlashIcon } from '@phosphor-icons/react/GpsSlash'
+import { GradientIcon } from '@phosphor-icons/react/Gradient'
+import { GraduationCapIcon } from '@phosphor-icons/react/GraduationCap'
+import { GrainsIcon } from '@phosphor-icons/react/Grains'
+import { GrainsSlashIcon } from '@phosphor-icons/react/GrainsSlash'
+import { GraphIcon } from '@phosphor-icons/react/Graph'
+import { GraphicsCardIcon } from '@phosphor-icons/react/GraphicsCard'
+import { GreaterThanIcon } from '@phosphor-icons/react/GreaterThan'
+import { GreaterThanOrEqualIcon } from '@phosphor-icons/react/GreaterThanOrEqual'
+import { GridFourIcon } from '@phosphor-icons/react/GridFour'
+import { GridNineIcon } from '@phosphor-icons/react/GridNine'
+import { GuitarIcon } from '@phosphor-icons/react/Guitar'
+import { HairDryerIcon } from '@phosphor-icons/react/HairDryer'
+import { HamburgerIcon } from '@phosphor-icons/react/Hamburger'
+import { HammerIcon } from '@phosphor-icons/react/Hammer'
+import { HandIcon } from '@phosphor-icons/react/Hand'
+import { HandArrowDownIcon } from '@phosphor-icons/react/HandArrowDown'
+import { HandArrowUpIcon } from '@phosphor-icons/react/HandArrowUp'
+import { HandbagIcon } from '@phosphor-icons/react/Handbag'
+import { HandbagSimpleIcon } from '@phosphor-icons/react/HandbagSimple'
+import { HandCoinsIcon } from '@phosphor-icons/react/HandCoins'
+import { HandDepositIcon } from '@phosphor-icons/react/HandDeposit'
+import { HandEyeIcon } from '@phosphor-icons/react/HandEye'
+import { HandFistIcon } from '@phosphor-icons/react/HandFist'
+import { HandGrabbingIcon } from '@phosphor-icons/react/HandGrabbing'
+import { HandHeartIcon } from '@phosphor-icons/react/HandHeart'
+import { HandPalmIcon } from '@phosphor-icons/react/HandPalm'
+import { HandPeaceIcon } from '@phosphor-icons/react/HandPeace'
+import { HandPointingIcon } from '@phosphor-icons/react/HandPointing'
+import { HandsClappingIcon } from '@phosphor-icons/react/HandsClapping'
+import { HandshakeIcon } from '@phosphor-icons/react/Handshake'
+import { HandSoapIcon } from '@phosphor-icons/react/HandSoap'
+import { HandsPrayingIcon } from '@phosphor-icons/react/HandsPraying'
+import { HandSwipeLeftIcon } from '@phosphor-icons/react/HandSwipeLeft'
+import { HandSwipeRightIcon } from '@phosphor-icons/react/HandSwipeRight'
+import { HandTapIcon } from '@phosphor-icons/react/HandTap'
+import { HandWavingIcon } from '@phosphor-icons/react/HandWaving'
+import { HandWithdrawIcon } from '@phosphor-icons/react/HandWithdraw'
+import { HardDriveIcon } from '@phosphor-icons/react/HardDrive'
+import { HardDrivesIcon } from '@phosphor-icons/react/HardDrives'
+import { HardHatIcon } from '@phosphor-icons/react/HardHat'
+import { HashIcon } from '@phosphor-icons/react/Hash'
+import { HashStraightIcon } from '@phosphor-icons/react/HashStraight'
+import { HeadCircuitIcon } from '@phosphor-icons/react/HeadCircuit'
+import { HeadlightsIcon } from '@phosphor-icons/react/Headlights'
+import { HeadphonesIcon } from '@phosphor-icons/react/Headphones'
+import { HeadsetIcon } from '@phosphor-icons/react/Headset'
+import { HeartIcon } from '@phosphor-icons/react/Heart'
+import { HeartbeatIcon } from '@phosphor-icons/react/Heartbeat'
+import { HeartBreakIcon } from '@phosphor-icons/react/HeartBreak'
+import { HeartHalfIcon } from '@phosphor-icons/react/HeartHalf'
+import { HeartStraightIcon } from '@phosphor-icons/react/HeartStraight'
+import { HeartStraightBreakIcon } from '@phosphor-icons/react/HeartStraightBreak'
+import { HexagonIcon } from '@phosphor-icons/react/Hexagon'
+import { HighDefinitionIcon } from '@phosphor-icons/react/HighDefinition'
+import { HighHeelIcon } from '@phosphor-icons/react/HighHeel'
+import { HighlighterIcon } from '@phosphor-icons/react/Highlighter'
+import { HighlighterCircleIcon } from '@phosphor-icons/react/HighlighterCircle'
+import { HockeyIcon } from '@phosphor-icons/react/Hockey'
+import { HoodieIcon } from '@phosphor-icons/react/Hoodie'
+import { HorseIcon } from '@phosphor-icons/react/Horse'
+import { HospitalIcon } from '@phosphor-icons/react/Hospital'
+import { HourglassIcon } from '@phosphor-icons/react/Hourglass'
+import { HourglassHighIcon } from '@phosphor-icons/react/HourglassHigh'
+import { HourglassLowIcon } from '@phosphor-icons/react/HourglassLow'
+import { HourglassMediumIcon } from '@phosphor-icons/react/HourglassMedium'
+import { HourglassSimpleIcon } from '@phosphor-icons/react/HourglassSimple'
+import { HourglassSimpleHighIcon } from '@phosphor-icons/react/HourglassSimpleHigh'
+import { HourglassSimpleLowIcon } from '@phosphor-icons/react/HourglassSimpleLow'
+import { HourglassSimpleMediumIcon } from '@phosphor-icons/react/HourglassSimpleMedium'
+import { HouseIcon } from '@phosphor-icons/react/House'
+import { HouseLineIcon } from '@phosphor-icons/react/HouseLine'
+import { HouseSimpleIcon } from '@phosphor-icons/react/HouseSimple'
+import { HurricaneIcon } from '@phosphor-icons/react/Hurricane'
+import { IceCreamIcon } from '@phosphor-icons/react/IceCream'
+import { IdentificationBadgeIcon } from '@phosphor-icons/react/IdentificationBadge'
+import { IdentificationCardIcon } from '@phosphor-icons/react/IdentificationCard'
+import { ImageIcon } from '@phosphor-icons/react/Image'
+import { ImageBrokenIcon } from '@phosphor-icons/react/ImageBroken'
+import { ImagesIcon } from '@phosphor-icons/react/Images'
+import { ImageSquareIcon } from '@phosphor-icons/react/ImageSquare'
+import { ImagesSquareIcon } from '@phosphor-icons/react/ImagesSquare'
+import { InfinityIcon } from '@phosphor-icons/react/Infinity'
+import { InfoIcon } from '@phosphor-icons/react/Info'
+import { InstagramLogoIcon } from '@phosphor-icons/react/InstagramLogo'
+import { IntersectIcon } from '@phosphor-icons/react/Intersect'
+import { IntersectionIcon } from '@phosphor-icons/react/Intersection'
+import { IntersectSquareIcon } from '@phosphor-icons/react/IntersectSquare'
+import { IntersectThreeIcon } from '@phosphor-icons/react/IntersectThree'
+import { InvoiceIcon } from '@phosphor-icons/react/Invoice'
+import { IslandIcon } from '@phosphor-icons/react/Island'
+import { JarIcon } from '@phosphor-icons/react/Jar'
+import { JarLabelIcon } from '@phosphor-icons/react/JarLabel'
+import { JeepIcon } from '@phosphor-icons/react/Jeep'
+import { JoystickIcon } from '@phosphor-icons/react/Joystick'
+import { KanbanIcon } from '@phosphor-icons/react/Kanban'
+import { KeyIcon } from '@phosphor-icons/react/Key'
+import { KeyboardIcon } from '@phosphor-icons/react/Keyboard'
+import { KeyholeIcon } from '@phosphor-icons/react/Keyhole'
+import { KeyReturnIcon } from '@phosphor-icons/react/KeyReturn'
+import { KnifeIcon } from '@phosphor-icons/react/Knife'
+import { LadderIcon } from '@phosphor-icons/react/Ladder'
+import { LadderSimpleIcon } from '@phosphor-icons/react/LadderSimple'
+import { LampIcon } from '@phosphor-icons/react/Lamp'
+import { LampPendantIcon } from '@phosphor-icons/react/LampPendant'
+import { LaptopIcon } from '@phosphor-icons/react/Laptop'
+import { LassoIcon } from '@phosphor-icons/react/Lasso'
+import { LastfmLogoIcon } from '@phosphor-icons/react/LastfmLogo'
+import { LayoutIcon } from '@phosphor-icons/react/Layout'
+import { LeafIcon } from '@phosphor-icons/react/Leaf'
+import { LecternIcon } from '@phosphor-icons/react/Lectern'
+import { LegoIcon } from '@phosphor-icons/react/Lego'
+import { LegoSmileyIcon } from '@phosphor-icons/react/LegoSmiley'
+import { LessThanIcon } from '@phosphor-icons/react/LessThan'
+import { LessThanOrEqualIcon } from '@phosphor-icons/react/LessThanOrEqual'
+import { LetterCircleHIcon } from '@phosphor-icons/react/LetterCircleH'
+import { LetterCirclePIcon } from '@phosphor-icons/react/LetterCircleP'
+import { LetterCircleVIcon } from '@phosphor-icons/react/LetterCircleV'
+import { LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
+import { LightbulbIcon } from '@phosphor-icons/react/Lightbulb'
+import { LightbulbFilamentIcon } from '@phosphor-icons/react/LightbulbFilament'
+import { LighthouseIcon } from '@phosphor-icons/react/Lighthouse'
+import { LightningIcon } from '@phosphor-icons/react/Lightning'
+import { LightningAIcon } from '@phosphor-icons/react/LightningA'
+import { LightningSlashIcon } from '@phosphor-icons/react/LightningSlash'
+import { LineSegmentIcon } from '@phosphor-icons/react/LineSegment'
+import { LineSegmentsIcon } from '@phosphor-icons/react/LineSegments'
+import { LineVerticalIcon } from '@phosphor-icons/react/LineVertical'
+import { LinkIcon } from '@phosphor-icons/react/Link'
+import { LinkBreakIcon } from '@phosphor-icons/react/LinkBreak'
+import { LinkedinLogoIcon } from '@phosphor-icons/react/LinkedinLogo'
+import { LinkSimpleIcon } from '@phosphor-icons/react/LinkSimple'
+import { LinkSimpleBreakIcon } from '@phosphor-icons/react/LinkSimpleBreak'
+import { LinkSimpleHorizontalIcon } from '@phosphor-icons/react/LinkSimpleHorizontal'
+import { LinkSimpleHorizontalBreakIcon } from '@phosphor-icons/react/LinkSimpleHorizontalBreak'
+import { LinktreeLogoIcon } from '@phosphor-icons/react/LinktreeLogo'
+import { LinuxLogoIcon } from '@phosphor-icons/react/LinuxLogo'
+import { ListIcon } from '@phosphor-icons/react/List'
+import { ListBulletsIcon } from '@phosphor-icons/react/ListBullets'
+import { ListChecksIcon } from '@phosphor-icons/react/ListChecks'
+import { ListDashesIcon } from '@phosphor-icons/react/ListDashes'
+import { ListHeartIcon } from '@phosphor-icons/react/ListHeart'
+import { ListMagnifyingGlassIcon } from '@phosphor-icons/react/ListMagnifyingGlass'
+import { ListNumbersIcon } from '@phosphor-icons/react/ListNumbers'
+import { ListPlusIcon } from '@phosphor-icons/react/ListPlus'
+import { ListStarIcon } from '@phosphor-icons/react/ListStar'
+import { LockIcon } from '@phosphor-icons/react/Lock'
+import { LockersIcon } from '@phosphor-icons/react/Lockers'
+import { LockKeyIcon } from '@phosphor-icons/react/LockKey'
+import { LockKeyOpenIcon } from '@phosphor-icons/react/LockKeyOpen'
+import { LockLaminatedIcon } from '@phosphor-icons/react/LockLaminated'
+import { LockLaminatedOpenIcon } from '@phosphor-icons/react/LockLaminatedOpen'
+import { LockOpenIcon } from '@phosphor-icons/react/LockOpen'
+import { LockSimpleIcon } from '@phosphor-icons/react/LockSimple'
+import { LockSimpleOpenIcon } from '@phosphor-icons/react/LockSimpleOpen'
+import { LogIcon } from '@phosphor-icons/react/Log'
+import { MagicWandIcon } from '@phosphor-icons/react/MagicWand'
+import { MagnetIcon } from '@phosphor-icons/react/Magnet'
+import { MagnetStraightIcon } from '@phosphor-icons/react/MagnetStraight'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { MagnifyingGlassMinusIcon } from '@phosphor-icons/react/MagnifyingGlassMinus'
+import { MagnifyingGlassPlusIcon } from '@phosphor-icons/react/MagnifyingGlassPlus'
+import { MailboxIcon } from '@phosphor-icons/react/Mailbox'
+import { MapPinIcon } from '@phosphor-icons/react/MapPin'
+import { MapPinAreaIcon } from '@phosphor-icons/react/MapPinArea'
+import { MapPinLineIcon } from '@phosphor-icons/react/MapPinLine'
+import { MapPinPlusIcon } from '@phosphor-icons/react/MapPinPlus'
+import { MapPinSimpleIcon } from '@phosphor-icons/react/MapPinSimple'
+import { MapPinSimpleAreaIcon } from '@phosphor-icons/react/MapPinSimpleArea'
+import { MapPinSimpleLineIcon } from '@phosphor-icons/react/MapPinSimpleLine'
+import { MapTrifoldIcon } from '@phosphor-icons/react/MapTrifold'
+import { MarkdownLogoIcon } from '@phosphor-icons/react/MarkdownLogo'
+import { MarkerCircleIcon } from '@phosphor-icons/react/MarkerCircle'
+import { MartiniIcon } from '@phosphor-icons/react/Martini'
+import { MaskHappyIcon } from '@phosphor-icons/react/MaskHappy'
+import { MaskSadIcon } from '@phosphor-icons/react/MaskSad'
+import { MastodonLogoIcon } from '@phosphor-icons/react/MastodonLogo'
+import { MathOperationsIcon } from '@phosphor-icons/react/MathOperations'
+import { MatrixLogoIcon } from '@phosphor-icons/react/MatrixLogo'
+import { MedalIcon } from '@phosphor-icons/react/Medal'
+import { MedalMilitaryIcon } from '@phosphor-icons/react/MedalMilitary'
+import { MediumLogoIcon } from '@phosphor-icons/react/MediumLogo'
+import { MegaphoneIcon } from '@phosphor-icons/react/Megaphone'
+import { MegaphoneSimpleIcon } from '@phosphor-icons/react/MegaphoneSimple'
+import { MemberOfIcon } from '@phosphor-icons/react/MemberOf'
+import { MemoryIcon } from '@phosphor-icons/react/Memory'
+import { MessengerLogoIcon } from '@phosphor-icons/react/MessengerLogo'
+import { MetaLogoIcon } from '@phosphor-icons/react/MetaLogo'
+import { MeteorIcon } from '@phosphor-icons/react/Meteor'
+import { MetronomeIcon } from '@phosphor-icons/react/Metronome'
+import { MicrophoneIcon } from '@phosphor-icons/react/Microphone'
+import { MicrophoneSlashIcon } from '@phosphor-icons/react/MicrophoneSlash'
+import { MicrophoneStageIcon } from '@phosphor-icons/react/MicrophoneStage'
+import { MicroscopeIcon } from '@phosphor-icons/react/Microscope'
+import { MicrosoftExcelLogoIcon } from '@phosphor-icons/react/MicrosoftExcelLogo'
+import { MicrosoftOutlookLogoIcon } from '@phosphor-icons/react/MicrosoftOutlookLogo'
+import { MicrosoftPowerpointLogoIcon } from '@phosphor-icons/react/MicrosoftPowerpointLogo'
+import { MicrosoftTeamsLogoIcon } from '@phosphor-icons/react/MicrosoftTeamsLogo'
+import { MicrosoftWordLogoIcon } from '@phosphor-icons/react/MicrosoftWordLogo'
+import { MinusIcon } from '@phosphor-icons/react/Minus'
+import { MinusCircleIcon } from '@phosphor-icons/react/MinusCircle'
+import { MinusSquareIcon } from '@phosphor-icons/react/MinusSquare'
+import { MoneyIcon } from '@phosphor-icons/react/Money'
+import { MoneyWavyIcon } from '@phosphor-icons/react/MoneyWavy'
+import { MonitorIcon } from '@phosphor-icons/react/Monitor'
+import { MonitorArrowUpIcon } from '@phosphor-icons/react/MonitorArrowUp'
+import { MonitorPlayIcon } from '@phosphor-icons/react/MonitorPlay'
+import { MoonIcon } from '@phosphor-icons/react/Moon'
+import { MoonStarsIcon } from '@phosphor-icons/react/MoonStars'
+import { MopedIcon } from '@phosphor-icons/react/Moped'
+import { MopedFrontIcon } from '@phosphor-icons/react/MopedFront'
+import { MosqueIcon } from '@phosphor-icons/react/Mosque'
+import { MotorcycleIcon } from '@phosphor-icons/react/Motorcycle'
+import { MountainsIcon } from '@phosphor-icons/react/Mountains'
+import { MouseIcon } from '@phosphor-icons/react/Mouse'
+import { MouseLeftClickIcon } from '@phosphor-icons/react/MouseLeftClick'
+import { MouseMiddleClickIcon } from '@phosphor-icons/react/MouseMiddleClick'
+import { MouseRightClickIcon } from '@phosphor-icons/react/MouseRightClick'
+import { MouseScrollIcon } from '@phosphor-icons/react/MouseScroll'
+import { MouseSimpleIcon } from '@phosphor-icons/react/MouseSimple'
+import { MusicNoteIcon } from '@phosphor-icons/react/MusicNote'
+import { MusicNotesIcon } from '@phosphor-icons/react/MusicNotes'
+import { MusicNoteSimpleIcon } from '@phosphor-icons/react/MusicNoteSimple'
+import { MusicNotesMinusIcon } from '@phosphor-icons/react/MusicNotesMinus'
+import { MusicNotesPlusIcon } from '@phosphor-icons/react/MusicNotesPlus'
+import { MusicNotesSimpleIcon } from '@phosphor-icons/react/MusicNotesSimple'
+import { NavigationArrowIcon } from '@phosphor-icons/react/NavigationArrow'
+import { NeedleIcon } from '@phosphor-icons/react/Needle'
+import { NetworkIcon } from '@phosphor-icons/react/Network'
+import { NetworkSlashIcon } from '@phosphor-icons/react/NetworkSlash'
+import { NetworkXIcon } from '@phosphor-icons/react/NetworkX'
+import { NewspaperIcon } from '@phosphor-icons/react/Newspaper'
+import { NewspaperClippingIcon } from '@phosphor-icons/react/NewspaperClipping'
+import { NotchesIcon } from '@phosphor-icons/react/Notches'
+import { NoteIcon } from '@phosphor-icons/react/Note'
+import { NoteBlankIcon } from '@phosphor-icons/react/NoteBlank'
+import { NotebookIcon } from '@phosphor-icons/react/Notebook'
+import { NotepadIcon } from '@phosphor-icons/react/Notepad'
+import { NotePencilIcon } from '@phosphor-icons/react/NotePencil'
+import { NotEqualsIcon } from '@phosphor-icons/react/NotEquals'
+import { NotificationIcon } from '@phosphor-icons/react/Notification'
+import { NotionLogoIcon } from '@phosphor-icons/react/NotionLogo'
+import { NotMemberOfIcon } from '@phosphor-icons/react/NotMemberOf'
+import { NotSubsetOfIcon } from '@phosphor-icons/react/NotSubsetOf'
+import { NotSupersetOfIcon } from '@phosphor-icons/react/NotSupersetOf'
+import { NuclearPlantIcon } from '@phosphor-icons/react/NuclearPlant'
+import { NumberCircleEightIcon } from '@phosphor-icons/react/NumberCircleEight'
+import { NumberCircleFiveIcon } from '@phosphor-icons/react/NumberCircleFive'
+import { NumberCircleFourIcon } from '@phosphor-icons/react/NumberCircleFour'
+import { NumberCircleNineIcon } from '@phosphor-icons/react/NumberCircleNine'
+import { NumberCircleOneIcon } from '@phosphor-icons/react/NumberCircleOne'
+import { NumberCircleSevenIcon } from '@phosphor-icons/react/NumberCircleSeven'
+import { NumberCircleSixIcon } from '@phosphor-icons/react/NumberCircleSix'
+import { NumberCircleThreeIcon } from '@phosphor-icons/react/NumberCircleThree'
+import { NumberCircleTwoIcon } from '@phosphor-icons/react/NumberCircleTwo'
+import { NumberCircleZeroIcon } from '@phosphor-icons/react/NumberCircleZero'
+import { NumberEightIcon } from '@phosphor-icons/react/NumberEight'
+import { NumberFiveIcon } from '@phosphor-icons/react/NumberFive'
+import { NumberFourIcon } from '@phosphor-icons/react/NumberFour'
+import { NumberNineIcon } from '@phosphor-icons/react/NumberNine'
+import { NumberOneIcon } from '@phosphor-icons/react/NumberOne'
+import { NumberSevenIcon } from '@phosphor-icons/react/NumberSeven'
+import { NumberSixIcon } from '@phosphor-icons/react/NumberSix'
+import { NumberSquareEightIcon } from '@phosphor-icons/react/NumberSquareEight'
+import { NumberSquareFiveIcon } from '@phosphor-icons/react/NumberSquareFive'
+import { NumberSquareFourIcon } from '@phosphor-icons/react/NumberSquareFour'
+import { NumberSquareNineIcon } from '@phosphor-icons/react/NumberSquareNine'
+import { NumberSquareOneIcon } from '@phosphor-icons/react/NumberSquareOne'
+import { NumberSquareSevenIcon } from '@phosphor-icons/react/NumberSquareSeven'
+import { NumberSquareSixIcon } from '@phosphor-icons/react/NumberSquareSix'
+import { NumberSquareThreeIcon } from '@phosphor-icons/react/NumberSquareThree'
+import { NumberSquareTwoIcon } from '@phosphor-icons/react/NumberSquareTwo'
+import { NumberSquareZeroIcon } from '@phosphor-icons/react/NumberSquareZero'
+import { NumberThreeIcon } from '@phosphor-icons/react/NumberThree'
+import { NumberTwoIcon } from '@phosphor-icons/react/NumberTwo'
+import { NumberZeroIcon } from '@phosphor-icons/react/NumberZero'
+import { NumpadIcon } from '@phosphor-icons/react/Numpad'
+import { NutIcon } from '@phosphor-icons/react/Nut'
+import { NyTimesLogoIcon } from '@phosphor-icons/react/NyTimesLogo'
+import { OctagonIcon } from '@phosphor-icons/react/Octagon'
+import { OfficeChairIcon } from '@phosphor-icons/react/OfficeChair'
+import { OnigiriIcon } from '@phosphor-icons/react/Onigiri'
+import { OpenAiLogoIcon } from '@phosphor-icons/react/OpenAiLogo'
+import { OptionIcon } from '@phosphor-icons/react/Option'
+import { OrangeIcon } from '@phosphor-icons/react/Orange'
+import { OrangeSliceIcon } from '@phosphor-icons/react/OrangeSlice'
+import { OvenIcon } from '@phosphor-icons/react/Oven'
+import { PackageIcon } from '@phosphor-icons/react/Package'
+import { PaintBrushIcon } from '@phosphor-icons/react/PaintBrush'
+import { PaintBrushBroadIcon } from '@phosphor-icons/react/PaintBrushBroad'
+import { PaintBrushHouseholdIcon } from '@phosphor-icons/react/PaintBrushHousehold'
+import { PaintBucketIcon } from '@phosphor-icons/react/PaintBucket'
+import { PaintRollerIcon } from '@phosphor-icons/react/PaintRoller'
+import { PaletteIcon } from '@phosphor-icons/react/Palette'
+import { PanoramaIcon } from '@phosphor-icons/react/Panorama'
+import { PantsIcon } from '@phosphor-icons/react/Pants'
+import { PaperclipIcon } from '@phosphor-icons/react/Paperclip'
+import { PaperclipHorizontalIcon } from '@phosphor-icons/react/PaperclipHorizontal'
+import { PaperPlaneIcon } from '@phosphor-icons/react/PaperPlane'
+import { PaperPlaneRightIcon } from '@phosphor-icons/react/PaperPlaneRight'
+import { PaperPlaneTiltIcon } from '@phosphor-icons/react/PaperPlaneTilt'
+import { ParachuteIcon } from '@phosphor-icons/react/Parachute'
+import { ParagraphIcon } from '@phosphor-icons/react/Paragraph'
+import { ParallelogramIcon } from '@phosphor-icons/react/Parallelogram'
+import { ParkIcon } from '@phosphor-icons/react/Park'
+import { PasswordIcon } from '@phosphor-icons/react/Password'
+import { PathIcon } from '@phosphor-icons/react/Path'
+import { PatreonLogoIcon } from '@phosphor-icons/react/PatreonLogo'
+import { PauseIcon } from '@phosphor-icons/react/Pause'
+import { PauseCircleIcon } from '@phosphor-icons/react/PauseCircle'
+import { PawPrintIcon } from '@phosphor-icons/react/PawPrint'
+import { PaypalLogoIcon } from '@phosphor-icons/react/PaypalLogo'
+import { PeaceIcon } from '@phosphor-icons/react/Peace'
+import { PenIcon } from '@phosphor-icons/react/Pen'
+import { PencilIcon } from '@phosphor-icons/react/Pencil'
+import { PencilCircleIcon } from '@phosphor-icons/react/PencilCircle'
+import { PencilLineIcon } from '@phosphor-icons/react/PencilLine'
+import { PencilRulerIcon } from '@phosphor-icons/react/PencilRuler'
+import { PencilSimpleIcon } from '@phosphor-icons/react/PencilSimple'
+import { PencilSimpleLineIcon } from '@phosphor-icons/react/PencilSimpleLine'
+import { PencilSimpleSlashIcon } from '@phosphor-icons/react/PencilSimpleSlash'
+import { PencilSlashIcon } from '@phosphor-icons/react/PencilSlash'
+import { PenNibIcon } from '@phosphor-icons/react/PenNib'
+import { PenNibStraightIcon } from '@phosphor-icons/react/PenNibStraight'
+import { PentagonIcon } from '@phosphor-icons/react/Pentagon'
+import { PentagramIcon } from '@phosphor-icons/react/Pentagram'
+import { PepperIcon } from '@phosphor-icons/react/Pepper'
+import { PercentIcon } from '@phosphor-icons/react/Percent'
+import { PersonIcon } from '@phosphor-icons/react/Person'
+import { PersonArmsSpreadIcon } from '@phosphor-icons/react/PersonArmsSpread'
+import { PersonSimpleIcon } from '@phosphor-icons/react/PersonSimple'
+import { PersonSimpleBikeIcon } from '@phosphor-icons/react/PersonSimpleBike'
+import { PersonSimpleCircleIcon } from '@phosphor-icons/react/PersonSimpleCircle'
+import { PersonSimpleHikeIcon } from '@phosphor-icons/react/PersonSimpleHike'
+import { PersonSimpleRunIcon } from '@phosphor-icons/react/PersonSimpleRun'
+import { PersonSimpleSkiIcon } from '@phosphor-icons/react/PersonSimpleSki'
+import { PersonSimpleSnowboardIcon } from '@phosphor-icons/react/PersonSimpleSnowboard'
+import { PersonSimpleSwimIcon } from '@phosphor-icons/react/PersonSimpleSwim'
+import { PersonSimpleTaiChiIcon } from '@phosphor-icons/react/PersonSimpleTaiChi'
+import { PersonSimpleThrowIcon } from '@phosphor-icons/react/PersonSimpleThrow'
+import { PersonSimpleWalkIcon } from '@phosphor-icons/react/PersonSimpleWalk'
+import { PerspectiveIcon } from '@phosphor-icons/react/Perspective'
+import { PhoneIcon } from '@phosphor-icons/react/Phone'
+import { PhoneCallIcon } from '@phosphor-icons/react/PhoneCall'
+import { PhoneDisconnectIcon } from '@phosphor-icons/react/PhoneDisconnect'
+import { PhoneIncomingIcon } from '@phosphor-icons/react/PhoneIncoming'
+import { PhoneListIcon } from '@phosphor-icons/react/PhoneList'
+import { PhoneOutgoingIcon } from '@phosphor-icons/react/PhoneOutgoing'
+import { PhonePauseIcon } from '@phosphor-icons/react/PhonePause'
+import { PhonePlusIcon } from '@phosphor-icons/react/PhonePlus'
+import { PhoneSlashIcon } from '@phosphor-icons/react/PhoneSlash'
+import { PhoneTransferIcon } from '@phosphor-icons/react/PhoneTransfer'
+import { PhoneXIcon } from '@phosphor-icons/react/PhoneX'
+import { PhosphorLogoIcon } from '@phosphor-icons/react/PhosphorLogo'
+import { PiIcon } from '@phosphor-icons/react/Pi'
+import { PianoKeysIcon } from '@phosphor-icons/react/PianoKeys'
+import { PicnicTableIcon } from '@phosphor-icons/react/PicnicTable'
+import { PictureInPictureIcon } from '@phosphor-icons/react/PictureInPicture'
+import { PiggyBankIcon } from '@phosphor-icons/react/PiggyBank'
+import { PillIcon } from '@phosphor-icons/react/Pill'
+import { PingPongIcon } from '@phosphor-icons/react/PingPong'
+import { PinterestLogoIcon } from '@phosphor-icons/react/PinterestLogo'
+import { PintGlassIcon } from '@phosphor-icons/react/PintGlass'
+import { PinwheelIcon } from '@phosphor-icons/react/Pinwheel'
+import { PipeIcon } from '@phosphor-icons/react/Pipe'
+import { PipeWrenchIcon } from '@phosphor-icons/react/PipeWrench'
+import { PixLogoIcon } from '@phosphor-icons/react/PixLogo'
+import { PizzaIcon } from '@phosphor-icons/react/Pizza'
+import { PlaceholderIcon } from '@phosphor-icons/react/Placeholder'
+import { PlanetIcon } from '@phosphor-icons/react/Planet'
+import { PlantIcon } from '@phosphor-icons/react/Plant'
+import { PlayIcon } from '@phosphor-icons/react/Play'
+import { PlayCircleIcon } from '@phosphor-icons/react/PlayCircle'
+import { PlaylistIcon } from '@phosphor-icons/react/Playlist'
+import { PlayPauseIcon } from '@phosphor-icons/react/PlayPause'
+import { PlugIcon } from '@phosphor-icons/react/Plug'
+import { PlugChargingIcon } from '@phosphor-icons/react/PlugCharging'
+import { PlugsIcon } from '@phosphor-icons/react/Plugs'
+import { PlugsConnectedIcon } from '@phosphor-icons/react/PlugsConnected'
+import { PlusIcon } from '@phosphor-icons/react/Plus'
+import { PlusCircleIcon } from '@phosphor-icons/react/PlusCircle'
+import { PlusMinusIcon } from '@phosphor-icons/react/PlusMinus'
+import { PlusSquareIcon } from '@phosphor-icons/react/PlusSquare'
+import { PokerChipIcon } from '@phosphor-icons/react/PokerChip'
+import { PoliceCarIcon } from '@phosphor-icons/react/PoliceCar'
+import { PolygonIcon } from '@phosphor-icons/react/Polygon'
+import { PopcornIcon } from '@phosphor-icons/react/Popcorn'
+import { PopsicleIcon } from '@phosphor-icons/react/Popsicle'
+import { PottedPlantIcon } from '@phosphor-icons/react/PottedPlant'
+import { PowerIcon } from '@phosphor-icons/react/Power'
+import { PrescriptionIcon } from '@phosphor-icons/react/Prescription'
+import { PresentationIcon } from '@phosphor-icons/react/Presentation'
+import { PresentationChartIcon } from '@phosphor-icons/react/PresentationChart'
+import { PrinterIcon } from '@phosphor-icons/react/Printer'
+import { ProhibitIcon } from '@phosphor-icons/react/Prohibit'
+import { ProhibitInsetIcon } from '@phosphor-icons/react/ProhibitInset'
+import { ProjectorScreenIcon } from '@phosphor-icons/react/ProjectorScreen'
+import { ProjectorScreenChartIcon } from '@phosphor-icons/react/ProjectorScreenChart'
+import { PulseIcon } from '@phosphor-icons/react/Pulse'
+import { PushPinIcon } from '@phosphor-icons/react/PushPin'
+import { PushPinSimpleIcon } from '@phosphor-icons/react/PushPinSimple'
+import { PushPinSimpleSlashIcon } from '@phosphor-icons/react/PushPinSimpleSlash'
+import { PushPinSlashIcon } from '@phosphor-icons/react/PushPinSlash'
+import { PuzzlePieceIcon } from '@phosphor-icons/react/PuzzlePiece'
+import { QrCodeIcon } from '@phosphor-icons/react/QrCode'
+import { QuestionIcon } from '@phosphor-icons/react/Question'
+import { QuestionMarkIcon } from '@phosphor-icons/react/QuestionMark'
+import { QueueIcon } from '@phosphor-icons/react/Queue'
+import { QuotesIcon } from '@phosphor-icons/react/Quotes'
+import { RabbitIcon } from '@phosphor-icons/react/Rabbit'
+import { RacquetIcon } from '@phosphor-icons/react/Racquet'
+import { RadicalIcon } from '@phosphor-icons/react/Radical'
+import { RadioIcon } from '@phosphor-icons/react/Radio'
+import { RadioactiveIcon } from '@phosphor-icons/react/Radioactive'
+import { RadioButtonIcon } from '@phosphor-icons/react/RadioButton'
+import { RainbowIcon } from '@phosphor-icons/react/Rainbow'
+import { RainbowCloudIcon } from '@phosphor-icons/react/RainbowCloud'
+import { RankingIcon } from '@phosphor-icons/react/Ranking'
+import { ReadCvLogoIcon } from '@phosphor-icons/react/ReadCvLogo'
+import { ReceiptIcon } from '@phosphor-icons/react/Receipt'
+import { ReceiptXIcon } from '@phosphor-icons/react/ReceiptX'
+import { RecordIcon } from '@phosphor-icons/react/Record'
+import { RectangleIcon } from '@phosphor-icons/react/Rectangle'
+import { RectangleDashedIcon } from '@phosphor-icons/react/RectangleDashed'
+import { RecycleIcon } from '@phosphor-icons/react/Recycle'
+import { RedditLogoIcon } from '@phosphor-icons/react/RedditLogo'
+import { RepeatIcon } from '@phosphor-icons/react/Repeat'
+import { RepeatOnceIcon } from '@phosphor-icons/react/RepeatOnce'
+import { ReplitLogoIcon } from '@phosphor-icons/react/ReplitLogo'
+import { ResizeIcon } from '@phosphor-icons/react/Resize'
+import { RewindIcon } from '@phosphor-icons/react/Rewind'
+import { RewindCircleIcon } from '@phosphor-icons/react/RewindCircle'
+import { RoadHorizonIcon } from '@phosphor-icons/react/RoadHorizon'
+import { RobotIcon } from '@phosphor-icons/react/Robot'
+import { RocketIcon } from '@phosphor-icons/react/Rocket'
+import { RocketLaunchIcon } from '@phosphor-icons/react/RocketLaunch'
+import { RowsIcon } from '@phosphor-icons/react/Rows'
+import { RowsPlusBottomIcon } from '@phosphor-icons/react/RowsPlusBottom'
+import { RowsPlusTopIcon } from '@phosphor-icons/react/RowsPlusTop'
+import { RssIcon } from '@phosphor-icons/react/Rss'
+import { RssSimpleIcon } from '@phosphor-icons/react/RssSimple'
+import { RugIcon } from '@phosphor-icons/react/Rug'
+import { RulerIcon } from '@phosphor-icons/react/Ruler'
+import { SailboatIcon } from '@phosphor-icons/react/Sailboat'
+import { ScalesIcon } from '@phosphor-icons/react/Scales'
+import { ScanIcon } from '@phosphor-icons/react/Scan'
+import { ScanSmileyIcon } from '@phosphor-icons/react/ScanSmiley'
+import { ScissorsIcon } from '@phosphor-icons/react/Scissors'
+import { ScooterIcon } from '@phosphor-icons/react/Scooter'
+import { ScreencastIcon } from '@phosphor-icons/react/Screencast'
+import { ScrewdriverIcon } from '@phosphor-icons/react/Screwdriver'
+import { ScribbleIcon } from '@phosphor-icons/react/Scribble'
+import { ScribbleLoopIcon } from '@phosphor-icons/react/ScribbleLoop'
+import { ScrollIcon } from '@phosphor-icons/react/Scroll'
+import { SealIcon } from '@phosphor-icons/react/Seal'
+import { SealCheckIcon } from '@phosphor-icons/react/SealCheck'
+import { SealPercentIcon } from '@phosphor-icons/react/SealPercent'
+import { SealQuestionIcon } from '@phosphor-icons/react/SealQuestion'
+import { SealWarningIcon } from '@phosphor-icons/react/SealWarning'
+import { SeatIcon } from '@phosphor-icons/react/Seat'
+import { SeatbeltIcon } from '@phosphor-icons/react/Seatbelt'
+import { SecurityCameraIcon } from '@phosphor-icons/react/SecurityCamera'
+import { SelectionIcon } from '@phosphor-icons/react/Selection'
+import { SelectionAllIcon } from '@phosphor-icons/react/SelectionAll'
+import { SelectionBackgroundIcon } from '@phosphor-icons/react/SelectionBackground'
+import { SelectionForegroundIcon } from '@phosphor-icons/react/SelectionForeground'
+import { SelectionInverseIcon } from '@phosphor-icons/react/SelectionInverse'
+import { SelectionPlusIcon } from '@phosphor-icons/react/SelectionPlus'
+import { SelectionSlashIcon } from '@phosphor-icons/react/SelectionSlash'
+import { ShapesIcon } from '@phosphor-icons/react/Shapes'
+import { ShareIcon } from '@phosphor-icons/react/Share'
+import { ShareFatIcon } from '@phosphor-icons/react/ShareFat'
+import { ShareNetworkIcon } from '@phosphor-icons/react/ShareNetwork'
+import { ShieldIcon } from '@phosphor-icons/react/Shield'
+import { ShieldCheckIcon } from '@phosphor-icons/react/ShieldCheck'
+import { ShieldCheckeredIcon } from '@phosphor-icons/react/ShieldCheckered'
+import { ShieldChevronIcon } from '@phosphor-icons/react/ShieldChevron'
+import { ShieldPlusIcon } from '@phosphor-icons/react/ShieldPlus'
+import { ShieldSlashIcon } from '@phosphor-icons/react/ShieldSlash'
+import { ShieldStarIcon } from '@phosphor-icons/react/ShieldStar'
+import { ShieldWarningIcon } from '@phosphor-icons/react/ShieldWarning'
+import { ShippingContainerIcon } from '@phosphor-icons/react/ShippingContainer'
+import { ShirtFoldedIcon } from '@phosphor-icons/react/ShirtFolded'
+import { ShootingStarIcon } from '@phosphor-icons/react/ShootingStar'
+import { ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
+import { ShoppingBagOpenIcon } from '@phosphor-icons/react/ShoppingBagOpen'
+import { ShoppingCartIcon } from '@phosphor-icons/react/ShoppingCart'
+import { ShoppingCartSimpleIcon } from '@phosphor-icons/react/ShoppingCartSimple'
+import { ShovelIcon } from '@phosphor-icons/react/Shovel'
+import { ShowerIcon } from '@phosphor-icons/react/Shower'
+import { ShrimpIcon } from '@phosphor-icons/react/Shrimp'
+import { ShuffleIcon } from '@phosphor-icons/react/Shuffle'
+import { ShuffleAngularIcon } from '@phosphor-icons/react/ShuffleAngular'
+import { ShuffleSimpleIcon } from '@phosphor-icons/react/ShuffleSimple'
+import { SidebarIcon } from '@phosphor-icons/react/Sidebar'
+import { SidebarSimpleIcon } from '@phosphor-icons/react/SidebarSimple'
+import { SigmaIcon } from '@phosphor-icons/react/Sigma'
+import { SignatureIcon } from '@phosphor-icons/react/Signature'
+import { SignInIcon } from '@phosphor-icons/react/SignIn'
+import { SignOutIcon } from '@phosphor-icons/react/SignOut'
+import { SignpostIcon } from '@phosphor-icons/react/Signpost'
+import { SimCardIcon } from '@phosphor-icons/react/SimCard'
+import { SirenIcon } from '@phosphor-icons/react/Siren'
+import { SketchLogoIcon } from '@phosphor-icons/react/SketchLogo'
+import { SkipBackIcon } from '@phosphor-icons/react/SkipBack'
+import { SkipBackCircleIcon } from '@phosphor-icons/react/SkipBackCircle'
+import { SkipForwardIcon } from '@phosphor-icons/react/SkipForward'
+import { SkipForwardCircleIcon } from '@phosphor-icons/react/SkipForwardCircle'
+import { SkullIcon } from '@phosphor-icons/react/Skull'
+import { SkypeLogoIcon } from '@phosphor-icons/react/SkypeLogo'
+import { SlackLogoIcon } from '@phosphor-icons/react/SlackLogo'
+import { SlidersIcon } from '@phosphor-icons/react/Sliders'
+import { SlidersHorizontalIcon } from '@phosphor-icons/react/SlidersHorizontal'
+import { SlideshowIcon } from '@phosphor-icons/react/Slideshow'
+import { SmileyIcon } from '@phosphor-icons/react/Smiley'
+import { SmileyAngryIcon } from '@phosphor-icons/react/SmileyAngry'
+import { SmileyBlankIcon } from '@phosphor-icons/react/SmileyBlank'
+import { SmileyMehIcon } from '@phosphor-icons/react/SmileyMeh'
+import { SmileyMeltingIcon } from '@phosphor-icons/react/SmileyMelting'
+import { SmileyNervousIcon } from '@phosphor-icons/react/SmileyNervous'
+import { SmileySadIcon } from '@phosphor-icons/react/SmileySad'
+import { SmileyStickerIcon } from '@phosphor-icons/react/SmileySticker'
+import { SmileyWinkIcon } from '@phosphor-icons/react/SmileyWink'
+import { SmileyXEyesIcon } from '@phosphor-icons/react/SmileyXEyes'
+import { SnapchatLogoIcon } from '@phosphor-icons/react/SnapchatLogo'
+import { SneakerIcon } from '@phosphor-icons/react/Sneaker'
+import { SneakerMoveIcon } from '@phosphor-icons/react/SneakerMove'
+import { SnowflakeIcon } from '@phosphor-icons/react/Snowflake'
+import { SoccerBallIcon } from '@phosphor-icons/react/SoccerBall'
+import { SockIcon } from '@phosphor-icons/react/Sock'
+import { SolarPanelIcon } from '@phosphor-icons/react/SolarPanel'
+import { SolarRoofIcon } from '@phosphor-icons/react/SolarRoof'
+import { SortAscendingIcon } from '@phosphor-icons/react/SortAscending'
+import { SortDescendingIcon } from '@phosphor-icons/react/SortDescending'
+import { SoundcloudLogoIcon } from '@phosphor-icons/react/SoundcloudLogo'
+import { SpadeIcon } from '@phosphor-icons/react/Spade'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { SpeakerHifiIcon } from '@phosphor-icons/react/SpeakerHifi'
+import { SpeakerHighIcon } from '@phosphor-icons/react/SpeakerHigh'
+import { SpeakerLowIcon } from '@phosphor-icons/react/SpeakerLow'
+import { SpeakerNoneIcon } from '@phosphor-icons/react/SpeakerNone'
+import { SpeakerSimpleHighIcon } from '@phosphor-icons/react/SpeakerSimpleHigh'
+import { SpeakerSimpleLowIcon } from '@phosphor-icons/react/SpeakerSimpleLow'
+import { SpeakerSimpleNoneIcon } from '@phosphor-icons/react/SpeakerSimpleNone'
+import { SpeakerSimpleSlashIcon } from '@phosphor-icons/react/SpeakerSimpleSlash'
+import { SpeakerSimpleXIcon } from '@phosphor-icons/react/SpeakerSimpleX'
+import { SpeakerSlashIcon } from '@phosphor-icons/react/SpeakerSlash'
+import { SpeakerXIcon } from '@phosphor-icons/react/SpeakerX'
+import { SpeedometerIcon } from '@phosphor-icons/react/Speedometer'
+import { SphereIcon } from '@phosphor-icons/react/Sphere'
+import { SpinnerIcon } from '@phosphor-icons/react/Spinner'
+import { SpinnerBallIcon } from '@phosphor-icons/react/SpinnerBall'
+import { SpinnerGapIcon } from '@phosphor-icons/react/SpinnerGap'
+import { SpiralIcon } from '@phosphor-icons/react/Spiral'
+import { SplitHorizontalIcon } from '@phosphor-icons/react/SplitHorizontal'
+import { SplitVerticalIcon } from '@phosphor-icons/react/SplitVertical'
+import { SpotifyLogoIcon } from '@phosphor-icons/react/SpotifyLogo'
+import { SprayBottleIcon } from '@phosphor-icons/react/SprayBottle'
+import { SquareIcon } from '@phosphor-icons/react/Square'
+import { SquareHalfIcon } from '@phosphor-icons/react/SquareHalf'
+import { SquareHalfBottomIcon } from '@phosphor-icons/react/SquareHalfBottom'
+import { SquareLogoIcon } from '@phosphor-icons/react/SquareLogo'
+import { SquaresFourIcon } from '@phosphor-icons/react/SquaresFour'
+import { SquareSplitHorizontalIcon } from '@phosphor-icons/react/SquareSplitHorizontal'
+import { SquareSplitVerticalIcon } from '@phosphor-icons/react/SquareSplitVertical'
+import { StackIcon } from '@phosphor-icons/react/Stack'
+import { StackMinusIcon } from '@phosphor-icons/react/StackMinus'
+import { StackOverflowLogoIcon } from '@phosphor-icons/react/StackOverflowLogo'
+import { StackPlusIcon } from '@phosphor-icons/react/StackPlus'
+import { StackSimpleIcon } from '@phosphor-icons/react/StackSimple'
+import { StairsIcon } from '@phosphor-icons/react/Stairs'
+import { StampIcon } from '@phosphor-icons/react/Stamp'
+import { StandardDefinitionIcon } from '@phosphor-icons/react/StandardDefinition'
+import { StarIcon } from '@phosphor-icons/react/Star'
+import { StarAndCrescentIcon } from '@phosphor-icons/react/StarAndCrescent'
+import { StarFourIcon } from '@phosphor-icons/react/StarFour'
+import { StarHalfIcon } from '@phosphor-icons/react/StarHalf'
+import { StarOfDavidIcon } from '@phosphor-icons/react/StarOfDavid'
+import { SteamLogoIcon } from '@phosphor-icons/react/SteamLogo'
+import { SteeringWheelIcon } from '@phosphor-icons/react/SteeringWheel'
+import { StepsIcon } from '@phosphor-icons/react/Steps'
+import { StethoscopeIcon } from '@phosphor-icons/react/Stethoscope'
+import { StickerIcon } from '@phosphor-icons/react/Sticker'
+import { StoolIcon } from '@phosphor-icons/react/Stool'
+import { StopIcon } from '@phosphor-icons/react/Stop'
+import { StopCircleIcon } from '@phosphor-icons/react/StopCircle'
+import { StorefrontIcon } from '@phosphor-icons/react/Storefront'
+import { StrategyIcon } from '@phosphor-icons/react/Strategy'
+import { StripeLogoIcon } from '@phosphor-icons/react/StripeLogo'
+import { StudentIcon } from '@phosphor-icons/react/Student'
+import { SubsetOfIcon } from '@phosphor-icons/react/SubsetOf'
+import { SubsetProperOfIcon } from '@phosphor-icons/react/SubsetProperOf'
+import { SubtitlesIcon } from '@phosphor-icons/react/Subtitles'
+import { SubtitlesSlashIcon } from '@phosphor-icons/react/SubtitlesSlash'
+import { SubtractIcon } from '@phosphor-icons/react/Subtract'
+import { SubtractSquareIcon } from '@phosphor-icons/react/SubtractSquare'
+import { SubwayIcon } from '@phosphor-icons/react/Subway'
+import { SuitcaseIcon } from '@phosphor-icons/react/Suitcase'
+import { SuitcaseRollingIcon } from '@phosphor-icons/react/SuitcaseRolling'
+import { SuitcaseSimpleIcon } from '@phosphor-icons/react/SuitcaseSimple'
+import { SunIcon } from '@phosphor-icons/react/Sun'
+import { SunDimIcon } from '@phosphor-icons/react/SunDim'
+import { SunglassesIcon } from '@phosphor-icons/react/Sunglasses'
+import { SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
+import { SupersetOfIcon } from '@phosphor-icons/react/SupersetOf'
+import { SupersetProperOfIcon } from '@phosphor-icons/react/SupersetProperOf'
+import { SwapIcon } from '@phosphor-icons/react/Swap'
+import { SwatchesIcon } from '@phosphor-icons/react/Swatches'
+import { SwimmingPoolIcon } from '@phosphor-icons/react/SwimmingPool'
+import { SwordIcon } from '@phosphor-icons/react/Sword'
+import { SynagogueIcon } from '@phosphor-icons/react/Synagogue'
+import { SyringeIcon } from '@phosphor-icons/react/Syringe'
+import { TableIcon } from '@phosphor-icons/react/Table'
+import { TabsIcon } from '@phosphor-icons/react/Tabs'
+import { TagIcon } from '@phosphor-icons/react/Tag'
+import { TagChevronIcon } from '@phosphor-icons/react/TagChevron'
+import { TagSimpleIcon } from '@phosphor-icons/react/TagSimple'
+import { TargetIcon } from '@phosphor-icons/react/Target'
+import { TaxiIcon } from '@phosphor-icons/react/Taxi'
+import { TeaBagIcon } from '@phosphor-icons/react/TeaBag'
+import { TelegramLogoIcon } from '@phosphor-icons/react/TelegramLogo'
+import { TelevisionIcon } from '@phosphor-icons/react/Television'
+import { TelevisionSimpleIcon } from '@phosphor-icons/react/TelevisionSimple'
+import { TennisBallIcon } from '@phosphor-icons/react/TennisBall'
+import { TentIcon } from '@phosphor-icons/react/Tent'
+import { TerminalIcon } from '@phosphor-icons/react/Terminal'
+import { TerminalWindowIcon } from '@phosphor-icons/react/TerminalWindow'
+import { TestTubeIcon } from '@phosphor-icons/react/TestTube'
+import { TextAaIcon } from '@phosphor-icons/react/TextAa'
+import { TextAlignCenterIcon } from '@phosphor-icons/react/TextAlignCenter'
+import { TextAlignJustifyIcon } from '@phosphor-icons/react/TextAlignJustify'
+import { TextAlignLeftIcon } from '@phosphor-icons/react/TextAlignLeft'
+import { TextAlignRightIcon } from '@phosphor-icons/react/TextAlignRight'
+import { TextAUnderlineIcon } from '@phosphor-icons/react/TextAUnderline'
+import { TextBIcon } from '@phosphor-icons/react/TextB'
+import { TextboxIcon } from '@phosphor-icons/react/Textbox'
+import { TextColumnsIcon } from '@phosphor-icons/react/TextColumns'
+import { TextHIcon } from '@phosphor-icons/react/TextH'
+import { TextHFiveIcon } from '@phosphor-icons/react/TextHFive'
+import { TextHFourIcon } from '@phosphor-icons/react/TextHFour'
+import { TextHOneIcon } from '@phosphor-icons/react/TextHOne'
+import { TextHSixIcon } from '@phosphor-icons/react/TextHSix'
+import { TextHThreeIcon } from '@phosphor-icons/react/TextHThree'
+import { TextHTwoIcon } from '@phosphor-icons/react/TextHTwo'
+import { TextIndentIcon } from '@phosphor-icons/react/TextIndent'
+import { TextItalicIcon } from '@phosphor-icons/react/TextItalic'
+import { TextOutdentIcon } from '@phosphor-icons/react/TextOutdent'
+import { TextStrikethroughIcon } from '@phosphor-icons/react/TextStrikethrough'
+import { TextSubscriptIcon } from '@phosphor-icons/react/TextSubscript'
+import { TextSuperscriptIcon } from '@phosphor-icons/react/TextSuperscript'
+import { TextTIcon } from '@phosphor-icons/react/TextT'
+import { TextTSlashIcon } from '@phosphor-icons/react/TextTSlash'
+import { TextUnderlineIcon } from '@phosphor-icons/react/TextUnderline'
+import { ThermometerIcon } from '@phosphor-icons/react/Thermometer'
+import { ThermometerColdIcon } from '@phosphor-icons/react/ThermometerCold'
+import { ThermometerHotIcon } from '@phosphor-icons/react/ThermometerHot'
+import { ThermometerSimpleIcon } from '@phosphor-icons/react/ThermometerSimple'
+import { ThreadsLogoIcon } from '@phosphor-icons/react/ThreadsLogo'
+import { ThreeDIcon } from '@phosphor-icons/react/ThreeD'
+import { ThumbsDownIcon } from '@phosphor-icons/react/ThumbsDown'
+import { ThumbsUpIcon } from '@phosphor-icons/react/ThumbsUp'
+import { TicketIcon } from '@phosphor-icons/react/Ticket'
+import { TidalLogoIcon } from '@phosphor-icons/react/TidalLogo'
+import { TiktokLogoIcon } from '@phosphor-icons/react/TiktokLogo'
+import { TildeIcon } from '@phosphor-icons/react/Tilde'
+import { TimerIcon } from '@phosphor-icons/react/Timer'
+import { TipiIcon } from '@phosphor-icons/react/Tipi'
+import { TipJarIcon } from '@phosphor-icons/react/TipJar'
+import { TireIcon } from '@phosphor-icons/react/Tire'
+import { ToggleLeftIcon } from '@phosphor-icons/react/ToggleLeft'
+import { ToggleRightIcon } from '@phosphor-icons/react/ToggleRight'
+import { ToiletIcon } from '@phosphor-icons/react/Toilet'
+import { ToiletPaperIcon } from '@phosphor-icons/react/ToiletPaper'
+import { ToolboxIcon } from '@phosphor-icons/react/Toolbox'
+import { ToothIcon } from '@phosphor-icons/react/Tooth'
+import { TornadoIcon } from '@phosphor-icons/react/Tornado'
+import { ToteIcon } from '@phosphor-icons/react/Tote'
+import { ToteSimpleIcon } from '@phosphor-icons/react/ToteSimple'
+import { TowelIcon } from '@phosphor-icons/react/Towel'
+import { TractorIcon } from '@phosphor-icons/react/Tractor'
+import { TrademarkIcon } from '@phosphor-icons/react/Trademark'
+import { TrademarkRegisteredIcon } from '@phosphor-icons/react/TrademarkRegistered'
+import { TrafficConeIcon } from '@phosphor-icons/react/TrafficCone'
+import { TrafficSignIcon } from '@phosphor-icons/react/TrafficSign'
+import { TrafficSignalIcon } from '@phosphor-icons/react/TrafficSignal'
+import { TrainIcon } from '@phosphor-icons/react/Train'
+import { TrainRegionalIcon } from '@phosphor-icons/react/TrainRegional'
+import { TrainSimpleIcon } from '@phosphor-icons/react/TrainSimple'
+import { TramIcon } from '@phosphor-icons/react/Tram'
+import { TranslateIcon } from '@phosphor-icons/react/Translate'
+import { TrashIcon } from '@phosphor-icons/react/Trash'
+import { TrashSimpleIcon } from '@phosphor-icons/react/TrashSimple'
+import { TrayIcon } from '@phosphor-icons/react/Tray'
+import { TrayArrowDownIcon } from '@phosphor-icons/react/TrayArrowDown'
+import { TrayArrowUpIcon } from '@phosphor-icons/react/TrayArrowUp'
+import { TreasureChestIcon } from '@phosphor-icons/react/TreasureChest'
+import { TreeIcon } from '@phosphor-icons/react/Tree'
+import { TreeEvergreenIcon } from '@phosphor-icons/react/TreeEvergreen'
+import { TreePalmIcon } from '@phosphor-icons/react/TreePalm'
+import { TreeStructureIcon } from '@phosphor-icons/react/TreeStructure'
+import { TreeViewIcon } from '@phosphor-icons/react/TreeView'
+import { TrendDownIcon } from '@phosphor-icons/react/TrendDown'
+import { TrendUpIcon } from '@phosphor-icons/react/TrendUp'
+import { TriangleIcon } from '@phosphor-icons/react/Triangle'
+import { TriangleDashedIcon } from '@phosphor-icons/react/TriangleDashed'
+import { TrolleyIcon } from '@phosphor-icons/react/Trolley'
+import { TrolleySuitcaseIcon } from '@phosphor-icons/react/TrolleySuitcase'
+import { TrophyIcon } from '@phosphor-icons/react/Trophy'
+import { TruckIcon } from '@phosphor-icons/react/Truck'
+import { TruckTrailerIcon } from '@phosphor-icons/react/TruckTrailer'
+import { TShirtIcon } from '@phosphor-icons/react/TShirt'
+import { TumblrLogoIcon } from '@phosphor-icons/react/TumblrLogo'
+import { TwitchLogoIcon } from '@phosphor-icons/react/TwitchLogo'
+import { TwitterLogoIcon } from '@phosphor-icons/react/TwitterLogo'
+import { UmbrellaIcon } from '@phosphor-icons/react/Umbrella'
+import { UmbrellaSimpleIcon } from '@phosphor-icons/react/UmbrellaSimple'
+import { UnionIcon } from '@phosphor-icons/react/Union'
+import { UniteIcon } from '@phosphor-icons/react/Unite'
+import { UniteSquareIcon } from '@phosphor-icons/react/UniteSquare'
+import { UploadIcon } from '@phosphor-icons/react/Upload'
+import { UploadSimpleIcon } from '@phosphor-icons/react/UploadSimple'
+import { UsbIcon } from '@phosphor-icons/react/Usb'
+import { UserIcon } from '@phosphor-icons/react/User'
+import { UserCheckIcon } from '@phosphor-icons/react/UserCheck'
+import { UserCircleIcon } from '@phosphor-icons/react/UserCircle'
+import { UserCircleCheckIcon } from '@phosphor-icons/react/UserCircleCheck'
+import { UserCircleDashedIcon } from '@phosphor-icons/react/UserCircleDashed'
+import { UserCircleGearIcon } from '@phosphor-icons/react/UserCircleGear'
+import { UserCircleMinusIcon } from '@phosphor-icons/react/UserCircleMinus'
+import { UserCirclePlusIcon } from '@phosphor-icons/react/UserCirclePlus'
+import { UserFocusIcon } from '@phosphor-icons/react/UserFocus'
+import { UserGearIcon } from '@phosphor-icons/react/UserGear'
+import { UserListIcon } from '@phosphor-icons/react/UserList'
+import { UserMinusIcon } from '@phosphor-icons/react/UserMinus'
+import { UserPlusIcon } from '@phosphor-icons/react/UserPlus'
+import { UserRectangleIcon } from '@phosphor-icons/react/UserRectangle'
+import { UsersIcon } from '@phosphor-icons/react/Users'
+import { UsersFourIcon } from '@phosphor-icons/react/UsersFour'
+import { UserSoundIcon } from '@phosphor-icons/react/UserSound'
+import { UserSquareIcon } from '@phosphor-icons/react/UserSquare'
+import { UsersThreeIcon } from '@phosphor-icons/react/UsersThree'
+import { UserSwitchIcon } from '@phosphor-icons/react/UserSwitch'
+import { VanIcon } from '@phosphor-icons/react/Van'
+import { VaultIcon } from '@phosphor-icons/react/Vault'
+import { VectorThreeIcon } from '@phosphor-icons/react/VectorThree'
+import { VectorTwoIcon } from '@phosphor-icons/react/VectorTwo'
+import { VibrateIcon } from '@phosphor-icons/react/Vibrate'
+import { VideoIcon } from '@phosphor-icons/react/Video'
+import { VideoCameraIcon } from '@phosphor-icons/react/VideoCamera'
+import { VideoCameraSlashIcon } from '@phosphor-icons/react/VideoCameraSlash'
+import { VideoConferenceIcon } from '@phosphor-icons/react/VideoConference'
+import { VignetteIcon } from '@phosphor-icons/react/Vignette'
+import { VinylRecordIcon } from '@phosphor-icons/react/VinylRecord'
+import { VirtualRealityIcon } from '@phosphor-icons/react/VirtualReality'
+import { VirusIcon } from '@phosphor-icons/react/Virus'
+import { VisorIcon } from '@phosphor-icons/react/Visor'
+import { VoicemailIcon } from '@phosphor-icons/react/Voicemail'
+import { VolleyballIcon } from '@phosphor-icons/react/Volleyball'
+import { WallIcon } from '@phosphor-icons/react/Wall'
+import { WalletIcon } from '@phosphor-icons/react/Wallet'
+import { WarehouseIcon } from '@phosphor-icons/react/Warehouse'
+import { WarningIcon } from '@phosphor-icons/react/Warning'
+import { WarningCircleIcon } from '@phosphor-icons/react/WarningCircle'
+import { WarningDiamondIcon } from '@phosphor-icons/react/WarningDiamond'
+import { WarningOctagonIcon } from '@phosphor-icons/react/WarningOctagon'
+import { WashingMachineIcon } from '@phosphor-icons/react/WashingMachine'
+import { WatchIcon } from '@phosphor-icons/react/Watch'
+import { WaveformIcon } from '@phosphor-icons/react/Waveform'
+import { WaveformSlashIcon } from '@phosphor-icons/react/WaveformSlash'
+import { WavesIcon } from '@phosphor-icons/react/Waves'
+import { WaveSawtoothIcon } from '@phosphor-icons/react/WaveSawtooth'
+import { WaveSineIcon } from '@phosphor-icons/react/WaveSine'
+import { WaveSquareIcon } from '@phosphor-icons/react/WaveSquare'
+import { WaveTriangleIcon } from '@phosphor-icons/react/WaveTriangle'
+import { WebcamIcon } from '@phosphor-icons/react/Webcam'
+import { WebcamSlashIcon } from '@phosphor-icons/react/WebcamSlash'
+import { WebhooksLogoIcon } from '@phosphor-icons/react/WebhooksLogo'
+import { WechatLogoIcon } from '@phosphor-icons/react/WechatLogo'
+import { WhatsappLogoIcon } from '@phosphor-icons/react/WhatsappLogo'
+import { WheelchairIcon } from '@phosphor-icons/react/Wheelchair'
+import { WheelchairMotionIcon } from '@phosphor-icons/react/WheelchairMotion'
+import { WifiHighIcon } from '@phosphor-icons/react/WifiHigh'
+import { WifiLowIcon } from '@phosphor-icons/react/WifiLow'
+import { WifiMediumIcon } from '@phosphor-icons/react/WifiMedium'
+import { WifiNoneIcon } from '@phosphor-icons/react/WifiNone'
+import { WifiSlashIcon } from '@phosphor-icons/react/WifiSlash'
+import { WifiXIcon } from '@phosphor-icons/react/WifiX'
+import { WindIcon } from '@phosphor-icons/react/Wind'
+import { WindmillIcon } from '@phosphor-icons/react/Windmill'
+import { WindowsLogoIcon } from '@phosphor-icons/react/WindowsLogo'
+import { WineIcon } from '@phosphor-icons/react/Wine'
+import { WrenchIcon } from '@phosphor-icons/react/Wrench'
+import { XIcon } from '@phosphor-icons/react/X'
+import { XCircleIcon } from '@phosphor-icons/react/XCircle'
+import { XLogoIcon } from '@phosphor-icons/react/XLogo'
+import { XSquareIcon } from '@phosphor-icons/react/XSquare'
+import { YarnIcon } from '@phosphor-icons/react/Yarn'
+import { YinYangIcon } from '@phosphor-icons/react/YinYang'
+import { YoutubeLogoIcon } from '@phosphor-icons/react/YoutubeLogo'
 
 export const phosphorIconRegistry: ReadonlyArray<{
   name: string
   Cmp: Icon
 }> = [
-  { name: 'Acorn', Cmp: Acorn },
-  { name: 'AddressBook', Cmp: AddressBook },
-  { name: 'AddressBookTabs', Cmp: AddressBookTabs },
-  { name: 'Airplane', Cmp: Airplane },
-  { name: 'AirplaneInFlight', Cmp: AirplaneInFlight },
-  { name: 'AirplaneLanding', Cmp: AirplaneLanding },
-  { name: 'AirplaneTakeoff', Cmp: AirplaneTakeoff },
-  { name: 'AirplaneTaxiing', Cmp: AirplaneTaxiing },
-  { name: 'AirplaneTilt', Cmp: AirplaneTilt },
-  { name: 'Airplay', Cmp: Airplay },
-  { name: 'AirTrafficControl', Cmp: AirTrafficControl },
-  { name: 'Alarm', Cmp: Alarm },
-  { name: 'Alien', Cmp: Alien },
-  { name: 'AlignBottom', Cmp: AlignBottom },
-  { name: 'AlignBottomSimple', Cmp: AlignBottomSimple },
-  { name: 'AlignCenterHorizontal', Cmp: AlignCenterHorizontal },
-  { name: 'AlignCenterHorizontalSimple', Cmp: AlignCenterHorizontalSimple },
-  { name: 'AlignCenterVertical', Cmp: AlignCenterVertical },
-  { name: 'AlignCenterVerticalSimple', Cmp: AlignCenterVerticalSimple },
-  { name: 'AlignLeft', Cmp: AlignLeft },
-  { name: 'AlignLeftSimple', Cmp: AlignLeftSimple },
-  { name: 'AlignRight', Cmp: AlignRight },
-  { name: 'AlignRightSimple', Cmp: AlignRightSimple },
-  { name: 'AlignTop', Cmp: AlignTop },
-  { name: 'AlignTopSimple', Cmp: AlignTopSimple },
-  { name: 'AmazonLogo', Cmp: AmazonLogo },
-  { name: 'Ambulance', Cmp: Ambulance },
-  { name: 'Anchor', Cmp: Anchor },
-  { name: 'AnchorSimple', Cmp: AnchorSimple },
-  { name: 'AndroidLogo', Cmp: AndroidLogo },
-  { name: 'Angle', Cmp: Angle },
-  { name: 'AngularLogo', Cmp: AngularLogo },
-  { name: 'Aperture', Cmp: Aperture },
-  { name: 'AppleLogo', Cmp: AppleLogo },
-  { name: 'ApplePodcastsLogo', Cmp: ApplePodcastsLogo },
-  { name: 'ApproximateEquals', Cmp: ApproximateEquals },
-  { name: 'AppStoreLogo', Cmp: AppStoreLogo },
-  { name: 'AppWindow', Cmp: AppWindow },
-  { name: 'Archive', Cmp: Archive },
-  { name: 'Armchair', Cmp: Armchair },
-  { name: 'ArrowArcLeft', Cmp: ArrowArcLeft },
-  { name: 'ArrowArcRight', Cmp: ArrowArcRight },
-  { name: 'ArrowBendDoubleUpLeft', Cmp: ArrowBendDoubleUpLeft },
-  { name: 'ArrowBendDoubleUpRight', Cmp: ArrowBendDoubleUpRight },
-  { name: 'ArrowBendDownLeft', Cmp: ArrowBendDownLeft },
-  { name: 'ArrowBendDownRight', Cmp: ArrowBendDownRight },
-  { name: 'ArrowBendLeftDown', Cmp: ArrowBendLeftDown },
-  { name: 'ArrowBendLeftUp', Cmp: ArrowBendLeftUp },
-  { name: 'ArrowBendRightDown', Cmp: ArrowBendRightDown },
-  { name: 'ArrowBendRightUp', Cmp: ArrowBendRightUp },
-  { name: 'ArrowBendUpLeft', Cmp: ArrowBendUpLeft },
-  { name: 'ArrowBendUpRight', Cmp: ArrowBendUpRight },
-  { name: 'ArrowCircleDown', Cmp: ArrowCircleDown },
-  { name: 'ArrowCircleDownLeft', Cmp: ArrowCircleDownLeft },
-  { name: 'ArrowCircleDownRight', Cmp: ArrowCircleDownRight },
-  { name: 'ArrowCircleLeft', Cmp: ArrowCircleLeft },
-  { name: 'ArrowCircleRight', Cmp: ArrowCircleRight },
-  { name: 'ArrowCircleUp', Cmp: ArrowCircleUp },
-  { name: 'ArrowCircleUpLeft', Cmp: ArrowCircleUpLeft },
-  { name: 'ArrowCircleUpRight', Cmp: ArrowCircleUpRight },
-  { name: 'ArrowClockwise', Cmp: ArrowClockwise },
-  { name: 'ArrowCounterClockwise', Cmp: ArrowCounterClockwise },
-  { name: 'ArrowDown', Cmp: ArrowDown },
-  { name: 'ArrowDownLeft', Cmp: ArrowDownLeft },
-  { name: 'ArrowDownRight', Cmp: ArrowDownRight },
-  { name: 'ArrowElbowDownLeft', Cmp: ArrowElbowDownLeft },
-  { name: 'ArrowElbowDownRight', Cmp: ArrowElbowDownRight },
-  { name: 'ArrowElbowLeft', Cmp: ArrowElbowLeft },
-  { name: 'ArrowElbowLeftDown', Cmp: ArrowElbowLeftDown },
-  { name: 'ArrowElbowLeftUp', Cmp: ArrowElbowLeftUp },
-  { name: 'ArrowElbowRight', Cmp: ArrowElbowRight },
-  { name: 'ArrowElbowRightDown', Cmp: ArrowElbowRightDown },
-  { name: 'ArrowElbowRightUp', Cmp: ArrowElbowRightUp },
-  { name: 'ArrowElbowUpLeft', Cmp: ArrowElbowUpLeft },
-  { name: 'ArrowElbowUpRight', Cmp: ArrowElbowUpRight },
-  { name: 'ArrowFatDown', Cmp: ArrowFatDown },
-  { name: 'ArrowFatLeft', Cmp: ArrowFatLeft },
-  { name: 'ArrowFatLineDown', Cmp: ArrowFatLineDown },
-  { name: 'ArrowFatLineLeft', Cmp: ArrowFatLineLeft },
-  { name: 'ArrowFatLineRight', Cmp: ArrowFatLineRight },
-  { name: 'ArrowFatLinesDown', Cmp: ArrowFatLinesDown },
-  { name: 'ArrowFatLinesLeft', Cmp: ArrowFatLinesLeft },
-  { name: 'ArrowFatLinesRight', Cmp: ArrowFatLinesRight },
-  { name: 'ArrowFatLinesUp', Cmp: ArrowFatLinesUp },
-  { name: 'ArrowFatLineUp', Cmp: ArrowFatLineUp },
-  { name: 'ArrowFatRight', Cmp: ArrowFatRight },
-  { name: 'ArrowFatUp', Cmp: ArrowFatUp },
-  { name: 'ArrowLeft', Cmp: ArrowLeft },
-  { name: 'ArrowLineDown', Cmp: ArrowLineDown },
-  { name: 'ArrowLineDownLeft', Cmp: ArrowLineDownLeft },
-  { name: 'ArrowLineDownRight', Cmp: ArrowLineDownRight },
-  { name: 'ArrowLineLeft', Cmp: ArrowLineLeft },
-  { name: 'ArrowLineRight', Cmp: ArrowLineRight },
-  { name: 'ArrowLineUp', Cmp: ArrowLineUp },
-  { name: 'ArrowLineUpLeft', Cmp: ArrowLineUpLeft },
-  { name: 'ArrowLineUpRight', Cmp: ArrowLineUpRight },
-  { name: 'ArrowRight', Cmp: ArrowRight },
-  { name: 'ArrowsClockwise', Cmp: ArrowsClockwise },
-  { name: 'ArrowsCounterClockwise', Cmp: ArrowsCounterClockwise },
-  { name: 'ArrowsDownUp', Cmp: ArrowsDownUp },
-  { name: 'ArrowsHorizontal', Cmp: ArrowsHorizontal },
-  { name: 'ArrowsIn', Cmp: ArrowsIn },
-  { name: 'ArrowsInCardinal', Cmp: ArrowsInCardinal },
-  { name: 'ArrowsInLineHorizontal', Cmp: ArrowsInLineHorizontal },
-  { name: 'ArrowsInLineVertical', Cmp: ArrowsInLineVertical },
-  { name: 'ArrowsInSimple', Cmp: ArrowsInSimple },
-  { name: 'ArrowsLeftRight', Cmp: ArrowsLeftRight },
-  { name: 'ArrowsMerge', Cmp: ArrowsMerge },
-  { name: 'ArrowsOut', Cmp: ArrowsOut },
-  { name: 'ArrowsOutCardinal', Cmp: ArrowsOutCardinal },
-  { name: 'ArrowsOutLineHorizontal', Cmp: ArrowsOutLineHorizontal },
-  { name: 'ArrowsOutLineVertical', Cmp: ArrowsOutLineVertical },
-  { name: 'ArrowsOutSimple', Cmp: ArrowsOutSimple },
-  { name: 'ArrowSquareDown', Cmp: ArrowSquareDown },
-  { name: 'ArrowSquareDownLeft', Cmp: ArrowSquareDownLeft },
-  { name: 'ArrowSquareDownRight', Cmp: ArrowSquareDownRight },
-  { name: 'ArrowSquareIn', Cmp: ArrowSquareIn },
-  { name: 'ArrowSquareLeft', Cmp: ArrowSquareLeft },
-  { name: 'ArrowSquareOut', Cmp: ArrowSquareOut },
-  { name: 'ArrowSquareRight', Cmp: ArrowSquareRight },
-  { name: 'ArrowSquareUp', Cmp: ArrowSquareUp },
-  { name: 'ArrowSquareUpLeft', Cmp: ArrowSquareUpLeft },
-  { name: 'ArrowSquareUpRight', Cmp: ArrowSquareUpRight },
-  { name: 'ArrowsSplit', Cmp: ArrowsSplit },
-  { name: 'ArrowsVertical', Cmp: ArrowsVertical },
-  { name: 'ArrowUDownLeft', Cmp: ArrowUDownLeft },
-  { name: 'ArrowUDownRight', Cmp: ArrowUDownRight },
-  { name: 'ArrowULeftDown', Cmp: ArrowULeftDown },
-  { name: 'ArrowULeftUp', Cmp: ArrowULeftUp },
-  { name: 'ArrowUp', Cmp: ArrowUp },
-  { name: 'ArrowUpLeft', Cmp: ArrowUpLeft },
-  { name: 'ArrowUpRight', Cmp: ArrowUpRight },
-  { name: 'ArrowURightDown', Cmp: ArrowURightDown },
-  { name: 'ArrowURightUp', Cmp: ArrowURightUp },
-  { name: 'ArrowUUpLeft', Cmp: ArrowUUpLeft },
-  { name: 'ArrowUUpRight', Cmp: ArrowUUpRight },
-  { name: 'Article', Cmp: Article },
-  { name: 'ArticleMedium', Cmp: ArticleMedium },
-  { name: 'ArticleNyTimes', Cmp: ArticleNyTimes },
-  { name: 'Asclepius', Cmp: Asclepius },
-  { name: 'Asterisk', Cmp: Asterisk },
-  { name: 'AsteriskSimple', Cmp: AsteriskSimple },
-  { name: 'At', Cmp: At },
-  { name: 'Atom', Cmp: Atom },
-  { name: 'Avocado', Cmp: Avocado },
-  { name: 'Axe', Cmp: Axe },
-  { name: 'Baby', Cmp: Baby },
-  { name: 'BabyCarriage', Cmp: BabyCarriage },
-  { name: 'Backpack', Cmp: Backpack },
-  { name: 'Backspace', Cmp: Backspace },
-  { name: 'Bag', Cmp: Bag },
-  { name: 'BagSimple', Cmp: BagSimple },
-  { name: 'Balloon', Cmp: Balloon },
-  { name: 'Bandaids', Cmp: Bandaids },
-  { name: 'Bank', Cmp: Bank },
-  { name: 'Barbell', Cmp: Barbell },
-  { name: 'Barcode', Cmp: Barcode },
-  { name: 'Barn', Cmp: Barn },
-  { name: 'Barricade', Cmp: Barricade },
-  { name: 'Baseball', Cmp: Baseball },
-  { name: 'BaseballCap', Cmp: BaseballCap },
-  { name: 'BaseballHelmet', Cmp: BaseballHelmet },
-  { name: 'Basket', Cmp: Basket },
-  { name: 'Basketball', Cmp: Basketball },
-  { name: 'Bathtub', Cmp: Bathtub },
-  { name: 'BatteryCharging', Cmp: BatteryCharging },
-  { name: 'BatteryChargingVertical', Cmp: BatteryChargingVertical },
-  { name: 'BatteryEmpty', Cmp: BatteryEmpty },
-  { name: 'BatteryFull', Cmp: BatteryFull },
-  { name: 'BatteryHigh', Cmp: BatteryHigh },
-  { name: 'BatteryLow', Cmp: BatteryLow },
-  { name: 'BatteryMedium', Cmp: BatteryMedium },
-  { name: 'BatteryPlus', Cmp: BatteryPlus },
-  { name: 'BatteryPlusVertical', Cmp: BatteryPlusVertical },
-  { name: 'BatteryVerticalEmpty', Cmp: BatteryVerticalEmpty },
-  { name: 'BatteryVerticalFull', Cmp: BatteryVerticalFull },
-  { name: 'BatteryVerticalHigh', Cmp: BatteryVerticalHigh },
-  { name: 'BatteryVerticalLow', Cmp: BatteryVerticalLow },
-  { name: 'BatteryVerticalMedium', Cmp: BatteryVerticalMedium },
-  { name: 'BatteryWarning', Cmp: BatteryWarning },
-  { name: 'BatteryWarningVertical', Cmp: BatteryWarningVertical },
-  { name: 'BeachBall', Cmp: BeachBall },
-  { name: 'Beanie', Cmp: Beanie },
-  { name: 'Bed', Cmp: Bed },
-  { name: 'BeerBottle', Cmp: BeerBottle },
-  { name: 'BeerStein', Cmp: BeerStein },
-  { name: 'BehanceLogo', Cmp: BehanceLogo },
-  { name: 'Bell', Cmp: Bell },
-  { name: 'BellRinging', Cmp: BellRinging },
-  { name: 'BellSimple', Cmp: BellSimple },
-  { name: 'BellSimpleRinging', Cmp: BellSimpleRinging },
-  { name: 'BellSimpleSlash', Cmp: BellSimpleSlash },
-  { name: 'BellSimpleZ', Cmp: BellSimpleZ },
-  { name: 'BellSlash', Cmp: BellSlash },
-  { name: 'BellZ', Cmp: BellZ },
-  { name: 'Belt', Cmp: Belt },
-  { name: 'BezierCurve', Cmp: BezierCurve },
-  { name: 'Bicycle', Cmp: Bicycle },
-  { name: 'Binary', Cmp: Binary },
-  { name: 'Binoculars', Cmp: Binoculars },
-  { name: 'Biohazard', Cmp: Biohazard },
-  { name: 'Bird', Cmp: Bird },
-  { name: 'Blueprint', Cmp: Blueprint },
-  { name: 'Bluetooth', Cmp: Bluetooth },
-  { name: 'BluetoothConnected', Cmp: BluetoothConnected },
-  { name: 'BluetoothSlash', Cmp: BluetoothSlash },
-  { name: 'BluetoothX', Cmp: BluetoothX },
-  { name: 'Boat', Cmp: Boat },
-  { name: 'Bomb', Cmp: Bomb },
-  { name: 'Bone', Cmp: Bone },
-  { name: 'Book', Cmp: Book },
-  { name: 'BookBookmark', Cmp: BookBookmark },
-  { name: 'Bookmark', Cmp: Bookmark },
-  { name: 'Bookmarks', Cmp: Bookmarks },
-  { name: 'BookmarkSimple', Cmp: BookmarkSimple },
-  { name: 'BookmarksSimple', Cmp: BookmarksSimple },
-  { name: 'BookOpen', Cmp: BookOpen },
-  { name: 'BookOpenText', Cmp: BookOpenText },
-  { name: 'BookOpenUser', Cmp: BookOpenUser },
-  { name: 'Books', Cmp: Books },
-  { name: 'Boot', Cmp: Boot },
-  { name: 'Boules', Cmp: Boules },
-  { name: 'BoundingBox', Cmp: BoundingBox },
-  { name: 'BowlFood', Cmp: BowlFood },
-  { name: 'BowlingBall', Cmp: BowlingBall },
-  { name: 'BowlSteam', Cmp: BowlSteam },
-  { name: 'BoxArrowDown', Cmp: BoxArrowDown },
-  { name: 'BoxArrowUp', Cmp: BoxArrowUp },
-  { name: 'BoxingGlove', Cmp: BoxingGlove },
-  { name: 'BracketsAngle', Cmp: BracketsAngle },
-  { name: 'BracketsCurly', Cmp: BracketsCurly },
-  { name: 'BracketsRound', Cmp: BracketsRound },
-  { name: 'BracketsSquare', Cmp: BracketsSquare },
-  { name: 'Brain', Cmp: Brain },
-  { name: 'Brandy', Cmp: Brandy },
-  { name: 'Bread', Cmp: Bread },
-  { name: 'Bridge', Cmp: Bridge },
-  { name: 'Briefcase', Cmp: Briefcase },
-  { name: 'BriefcaseMetal', Cmp: BriefcaseMetal },
-  { name: 'Broadcast', Cmp: Broadcast },
-  { name: 'Broom', Cmp: Broom },
-  { name: 'Browser', Cmp: Browser },
-  { name: 'Browsers', Cmp: Browsers },
-  { name: 'Bug', Cmp: Bug },
-  { name: 'BugBeetle', Cmp: BugBeetle },
-  { name: 'BugDroid', Cmp: BugDroid },
-  { name: 'Building', Cmp: Building },
-  { name: 'BuildingApartment', Cmp: BuildingApartment },
-  { name: 'BuildingOffice', Cmp: BuildingOffice },
-  { name: 'Buildings', Cmp: Buildings },
-  { name: 'Bulldozer', Cmp: Bulldozer },
-  { name: 'Bus', Cmp: Bus },
-  { name: 'Butterfly', Cmp: Butterfly },
-  { name: 'CableCar', Cmp: CableCar },
-  { name: 'Cactus', Cmp: Cactus },
-  { name: 'Cake', Cmp: Cake },
-  { name: 'Calculator', Cmp: Calculator },
-  { name: 'Calendar', Cmp: Calendar },
-  { name: 'CalendarBlank', Cmp: CalendarBlank },
-  { name: 'CalendarCheck', Cmp: CalendarCheck },
-  { name: 'CalendarDot', Cmp: CalendarDot },
-  { name: 'CalendarDots', Cmp: CalendarDots },
-  { name: 'CalendarHeart', Cmp: CalendarHeart },
-  { name: 'CalendarMinus', Cmp: CalendarMinus },
-  { name: 'CalendarPlus', Cmp: CalendarPlus },
-  { name: 'CalendarSlash', Cmp: CalendarSlash },
-  { name: 'CalendarStar', Cmp: CalendarStar },
-  { name: 'CalendarX', Cmp: CalendarX },
-  { name: 'CallBell', Cmp: CallBell },
-  { name: 'Camera', Cmp: Camera },
-  { name: 'CameraPlus', Cmp: CameraPlus },
-  { name: 'CameraRotate', Cmp: CameraRotate },
-  { name: 'CameraSlash', Cmp: CameraSlash },
-  { name: 'Campfire', Cmp: Campfire },
-  { name: 'Car', Cmp: Car },
-  { name: 'CarBattery', Cmp: CarBattery },
-  { name: 'Cardholder', Cmp: Cardholder },
-  { name: 'Cards', Cmp: Cards },
-  { name: 'CardsThree', Cmp: CardsThree },
-  { name: 'CaretCircleDoubleDown', Cmp: CaretCircleDoubleDown },
-  { name: 'CaretCircleDoubleLeft', Cmp: CaretCircleDoubleLeft },
-  { name: 'CaretCircleDoubleRight', Cmp: CaretCircleDoubleRight },
-  { name: 'CaretCircleDoubleUp', Cmp: CaretCircleDoubleUp },
-  { name: 'CaretCircleDown', Cmp: CaretCircleDown },
-  { name: 'CaretCircleLeft', Cmp: CaretCircleLeft },
-  { name: 'CaretCircleRight', Cmp: CaretCircleRight },
-  { name: 'CaretCircleUp', Cmp: CaretCircleUp },
-  { name: 'CaretCircleUpDown', Cmp: CaretCircleUpDown },
-  { name: 'CaretDoubleDown', Cmp: CaretDoubleDown },
-  { name: 'CaretDoubleLeft', Cmp: CaretDoubleLeft },
-  { name: 'CaretDoubleRight', Cmp: CaretDoubleRight },
-  { name: 'CaretDoubleUp', Cmp: CaretDoubleUp },
-  { name: 'CaretDown', Cmp: CaretDown },
-  { name: 'CaretLeft', Cmp: CaretLeft },
-  { name: 'CaretLineDown', Cmp: CaretLineDown },
-  { name: 'CaretLineLeft', Cmp: CaretLineLeft },
-  { name: 'CaretLineRight', Cmp: CaretLineRight },
-  { name: 'CaretLineUp', Cmp: CaretLineUp },
-  { name: 'CaretRight', Cmp: CaretRight },
-  { name: 'CaretUp', Cmp: CaretUp },
-  { name: 'CaretUpDown', Cmp: CaretUpDown },
-  { name: 'CarProfile', Cmp: CarProfile },
-  { name: 'Carrot', Cmp: Carrot },
-  { name: 'CarSimple', Cmp: CarSimple },
-  { name: 'CashRegister', Cmp: CashRegister },
-  { name: 'CassetteTape', Cmp: CassetteTape },
-  { name: 'CastleTurret', Cmp: CastleTurret },
-  { name: 'Cat', Cmp: Cat },
-  { name: 'CellSignalFull', Cmp: CellSignalFull },
-  { name: 'CellSignalHigh', Cmp: CellSignalHigh },
-  { name: 'CellSignalLow', Cmp: CellSignalLow },
-  { name: 'CellSignalMedium', Cmp: CellSignalMedium },
-  { name: 'CellSignalNone', Cmp: CellSignalNone },
-  { name: 'CellSignalSlash', Cmp: CellSignalSlash },
-  { name: 'CellSignalX', Cmp: CellSignalX },
-  { name: 'CellTower', Cmp: CellTower },
-  { name: 'Certificate', Cmp: Certificate },
-  { name: 'Chair', Cmp: Chair },
-  { name: 'Chalkboard', Cmp: Chalkboard },
-  { name: 'ChalkboardSimple', Cmp: ChalkboardSimple },
-  { name: 'ChalkboardTeacher', Cmp: ChalkboardTeacher },
-  { name: 'Champagne', Cmp: Champagne },
-  { name: 'ChargingStation', Cmp: ChargingStation },
-  { name: 'ChartBar', Cmp: ChartBar },
-  { name: 'ChartBarHorizontal', Cmp: ChartBarHorizontal },
-  { name: 'ChartDonut', Cmp: ChartDonut },
-  { name: 'ChartLine', Cmp: ChartLine },
-  { name: 'ChartLineDown', Cmp: ChartLineDown },
-  { name: 'ChartLineUp', Cmp: ChartLineUp },
-  { name: 'ChartPie', Cmp: ChartPie },
-  { name: 'ChartPieSlice', Cmp: ChartPieSlice },
-  { name: 'ChartPolar', Cmp: ChartPolar },
-  { name: 'ChartScatter', Cmp: ChartScatter },
-  { name: 'Chat', Cmp: Chat },
-  { name: 'ChatCentered', Cmp: ChatCentered },
-  { name: 'ChatCenteredDots', Cmp: ChatCenteredDots },
-  { name: 'ChatCenteredSlash', Cmp: ChatCenteredSlash },
-  { name: 'ChatCenteredText', Cmp: ChatCenteredText },
-  { name: 'ChatCircle', Cmp: ChatCircle },
-  { name: 'ChatCircleDots', Cmp: ChatCircleDots },
-  { name: 'ChatCircleSlash', Cmp: ChatCircleSlash },
-  { name: 'ChatCircleText', Cmp: ChatCircleText },
-  { name: 'ChatDots', Cmp: ChatDots },
-  { name: 'Chats', Cmp: Chats },
-  { name: 'ChatsCircle', Cmp: ChatsCircle },
-  { name: 'ChatSlash', Cmp: ChatSlash },
-  { name: 'ChatsTeardrop', Cmp: ChatsTeardrop },
-  { name: 'ChatTeardrop', Cmp: ChatTeardrop },
-  { name: 'ChatTeardropDots', Cmp: ChatTeardropDots },
-  { name: 'ChatTeardropSlash', Cmp: ChatTeardropSlash },
-  { name: 'ChatTeardropText', Cmp: ChatTeardropText },
-  { name: 'ChatText', Cmp: ChatText },
-  { name: 'Check', Cmp: Check },
-  { name: 'CheckCircle', Cmp: CheckCircle },
-  { name: 'Checkerboard', Cmp: Checkerboard },
-  { name: 'CheckFat', Cmp: CheckFat },
-  { name: 'Checks', Cmp: Checks },
-  { name: 'CheckSquare', Cmp: CheckSquare },
-  { name: 'CheckSquareOffset', Cmp: CheckSquareOffset },
-  { name: 'Cheers', Cmp: Cheers },
-  { name: 'Cheese', Cmp: Cheese },
-  { name: 'ChefHat', Cmp: ChefHat },
-  { name: 'Cherries', Cmp: Cherries },
-  { name: 'Church', Cmp: Church },
-  { name: 'Cigarette', Cmp: Cigarette },
-  { name: 'CigaretteSlash', Cmp: CigaretteSlash },
-  { name: 'Circle', Cmp: Circle },
-  { name: 'CircleDashed', Cmp: CircleDashed },
-  { name: 'CircleHalf', Cmp: CircleHalf },
-  { name: 'CircleHalfTilt', Cmp: CircleHalfTilt },
-  { name: 'CircleNotch', Cmp: CircleNotch },
-  { name: 'CirclesFour', Cmp: CirclesFour },
-  { name: 'CirclesThree', Cmp: CirclesThree },
-  { name: 'CirclesThreePlus', Cmp: CirclesThreePlus },
-  { name: 'Circuitry', Cmp: Circuitry },
-  { name: 'City', Cmp: City },
-  { name: 'Clipboard', Cmp: Clipboard },
-  { name: 'ClipboardText', Cmp: ClipboardText },
-  { name: 'Clock', Cmp: Clock },
-  { name: 'ClockAfternoon', Cmp: ClockAfternoon },
-  { name: 'ClockClockwise', Cmp: ClockClockwise },
-  { name: 'ClockCountdown', Cmp: ClockCountdown },
-  { name: 'ClockCounterClockwise', Cmp: ClockCounterClockwise },
-  { name: 'ClockUser', Cmp: ClockUser },
-  { name: 'ClosedCaptioning', Cmp: ClosedCaptioning },
-  { name: 'Cloud', Cmp: Cloud },
-  { name: 'CloudArrowDown', Cmp: CloudArrowDown },
-  { name: 'CloudArrowUp', Cmp: CloudArrowUp },
-  { name: 'CloudCheck', Cmp: CloudCheck },
-  { name: 'CloudFog', Cmp: CloudFog },
-  { name: 'CloudLightning', Cmp: CloudLightning },
-  { name: 'CloudMoon', Cmp: CloudMoon },
-  { name: 'CloudRain', Cmp: CloudRain },
-  { name: 'CloudSlash', Cmp: CloudSlash },
-  { name: 'CloudSnow', Cmp: CloudSnow },
-  { name: 'CloudSun', Cmp: CloudSun },
-  { name: 'CloudWarning', Cmp: CloudWarning },
-  { name: 'CloudX', Cmp: CloudX },
-  { name: 'Clover', Cmp: Clover },
-  { name: 'Club', Cmp: Club },
-  { name: 'CoatHanger', Cmp: CoatHanger },
-  { name: 'CodaLogo', Cmp: CodaLogo },
-  { name: 'Code', Cmp: Code },
-  { name: 'CodeBlock', Cmp: CodeBlock },
-  { name: 'CodepenLogo', Cmp: CodepenLogo },
-  { name: 'CodesandboxLogo', Cmp: CodesandboxLogo },
-  { name: 'CodeSimple', Cmp: CodeSimple },
-  { name: 'Coffee', Cmp: Coffee },
-  { name: 'CoffeeBean', Cmp: CoffeeBean },
-  { name: 'Coin', Cmp: Coin },
-  { name: 'Coins', Cmp: Coins },
-  { name: 'CoinVertical', Cmp: CoinVertical },
-  { name: 'Columns', Cmp: Columns },
-  { name: 'ColumnsPlusLeft', Cmp: ColumnsPlusLeft },
-  { name: 'ColumnsPlusRight', Cmp: ColumnsPlusRight },
-  { name: 'Command', Cmp: Command },
-  { name: 'Compass', Cmp: Compass },
-  { name: 'CompassRose', Cmp: CompassRose },
-  { name: 'CompassTool', Cmp: CompassTool },
-  { name: 'ComputerTower', Cmp: ComputerTower },
-  { name: 'Confetti', Cmp: Confetti },
-  { name: 'ContactlessPayment', Cmp: ContactlessPayment },
-  { name: 'Control', Cmp: Control },
-  { name: 'Cookie', Cmp: Cookie },
-  { name: 'CookingPot', Cmp: CookingPot },
-  { name: 'Copy', Cmp: Copy },
-  { name: 'Copyleft', Cmp: Copyleft },
-  { name: 'Copyright', Cmp: Copyright },
-  { name: 'CopySimple', Cmp: CopySimple },
-  { name: 'CornersIn', Cmp: CornersIn },
-  { name: 'CornersOut', Cmp: CornersOut },
-  { name: 'Couch', Cmp: Couch },
-  { name: 'CourtBasketball', Cmp: CourtBasketball },
-  { name: 'Cow', Cmp: Cow },
-  { name: 'CowboyHat', Cmp: CowboyHat },
-  { name: 'Cpu', Cmp: Cpu },
-  { name: 'Crane', Cmp: Crane },
-  { name: 'CraneTower', Cmp: CraneTower },
-  { name: 'CreditCard', Cmp: CreditCard },
-  { name: 'Cricket', Cmp: Cricket },
-  { name: 'Crop', Cmp: Crop },
-  { name: 'Cross', Cmp: Cross },
-  { name: 'Crosshair', Cmp: Crosshair },
-  { name: 'CrosshairSimple', Cmp: CrosshairSimple },
-  { name: 'Crown', Cmp: Crown },
-  { name: 'CrownCross', Cmp: CrownCross },
-  { name: 'CrownSimple', Cmp: CrownSimple },
-  { name: 'Cube', Cmp: Cube },
-  { name: 'CubeFocus', Cmp: CubeFocus },
-  { name: 'CubeTransparent', Cmp: CubeTransparent },
-  { name: 'CurrencyBtc', Cmp: CurrencyBtc },
-  { name: 'CurrencyCircleDollar', Cmp: CurrencyCircleDollar },
-  { name: 'CurrencyCny', Cmp: CurrencyCny },
-  { name: 'CurrencyDollar', Cmp: CurrencyDollar },
-  { name: 'CurrencyDollarSimple', Cmp: CurrencyDollarSimple },
-  { name: 'CurrencyEth', Cmp: CurrencyEth },
-  { name: 'CurrencyEur', Cmp: CurrencyEur },
-  { name: 'CurrencyGbp', Cmp: CurrencyGbp },
-  { name: 'CurrencyInr', Cmp: CurrencyInr },
-  { name: 'CurrencyJpy', Cmp: CurrencyJpy },
-  { name: 'CurrencyKrw', Cmp: CurrencyKrw },
-  { name: 'CurrencyKzt', Cmp: CurrencyKzt },
-  { name: 'CurrencyNgn', Cmp: CurrencyNgn },
-  { name: 'CurrencyRub', Cmp: CurrencyRub },
-  { name: 'Cursor', Cmp: Cursor },
-  { name: 'CursorClick', Cmp: CursorClick },
-  { name: 'CursorText', Cmp: CursorText },
-  { name: 'Cylinder', Cmp: Cylinder },
-  { name: 'Database', Cmp: Database },
-  { name: 'Desk', Cmp: Desk },
-  { name: 'Desktop', Cmp: Desktop },
-  { name: 'DesktopTower', Cmp: DesktopTower },
-  { name: 'Detective', Cmp: Detective },
-  { name: 'DeviceMobile', Cmp: DeviceMobile },
-  { name: 'DeviceMobileCamera', Cmp: DeviceMobileCamera },
-  { name: 'DeviceMobileSlash', Cmp: DeviceMobileSlash },
-  { name: 'DeviceMobileSpeaker', Cmp: DeviceMobileSpeaker },
-  { name: 'DeviceRotate', Cmp: DeviceRotate },
-  { name: 'Devices', Cmp: Devices },
-  { name: 'DeviceTablet', Cmp: DeviceTablet },
-  { name: 'DeviceTabletCamera', Cmp: DeviceTabletCamera },
-  { name: 'DeviceTabletSpeaker', Cmp: DeviceTabletSpeaker },
-  { name: 'DevToLogo', Cmp: DevToLogo },
-  { name: 'Diamond', Cmp: Diamond },
-  { name: 'DiamondsFour', Cmp: DiamondsFour },
-  { name: 'DiceFive', Cmp: DiceFive },
-  { name: 'DiceFour', Cmp: DiceFour },
-  { name: 'DiceOne', Cmp: DiceOne },
-  { name: 'DiceSix', Cmp: DiceSix },
-  { name: 'DiceThree', Cmp: DiceThree },
-  { name: 'DiceTwo', Cmp: DiceTwo },
-  { name: 'Disc', Cmp: Disc },
-  { name: 'DiscoBall', Cmp: DiscoBall },
-  { name: 'DiscordLogo', Cmp: DiscordLogo },
-  { name: 'Divide', Cmp: Divide },
-  { name: 'Dna', Cmp: Dna },
-  { name: 'Dog', Cmp: Dog },
-  { name: 'Door', Cmp: Door },
-  { name: 'DoorOpen', Cmp: DoorOpen },
-  { name: 'Dot', Cmp: Dot },
-  { name: 'DotOutline', Cmp: DotOutline },
-  { name: 'DotsNine', Cmp: DotsNine },
-  { name: 'DotsSix', Cmp: DotsSix },
-  { name: 'DotsSixVertical', Cmp: DotsSixVertical },
-  { name: 'DotsThree', Cmp: DotsThree },
-  { name: 'DotsThreeCircle', Cmp: DotsThreeCircle },
-  { name: 'DotsThreeCircleVertical', Cmp: DotsThreeCircleVertical },
-  { name: 'DotsThreeOutline', Cmp: DotsThreeOutline },
-  { name: 'DotsThreeOutlineVertical', Cmp: DotsThreeOutlineVertical },
-  { name: 'DotsThreeVertical', Cmp: DotsThreeVertical },
-  { name: 'Download', Cmp: Download },
-  { name: 'DownloadSimple', Cmp: DownloadSimple },
-  { name: 'Dress', Cmp: Dress },
-  { name: 'Dresser', Cmp: Dresser },
-  { name: 'DribbbleLogo', Cmp: DribbbleLogo },
-  { name: 'Drone', Cmp: Drone },
-  { name: 'Drop', Cmp: Drop },
-  { name: 'DropboxLogo', Cmp: DropboxLogo },
-  { name: 'DropHalf', Cmp: DropHalf },
-  { name: 'DropHalfBottom', Cmp: DropHalfBottom },
-  { name: 'DropSimple', Cmp: DropSimple },
-  { name: 'DropSlash', Cmp: DropSlash },
-  { name: 'Ear', Cmp: Ear },
-  { name: 'EarSlash', Cmp: EarSlash },
-  { name: 'Egg', Cmp: Egg },
-  { name: 'EggCrack', Cmp: EggCrack },
-  { name: 'Eject', Cmp: Eject },
-  { name: 'EjectSimple', Cmp: EjectSimple },
-  { name: 'Elevator', Cmp: Elevator },
-  { name: 'Empty', Cmp: Empty },
-  { name: 'Engine', Cmp: Engine },
-  { name: 'Envelope', Cmp: Envelope },
-  { name: 'EnvelopeOpen', Cmp: EnvelopeOpen },
-  { name: 'EnvelopeSimple', Cmp: EnvelopeSimple },
-  { name: 'EnvelopeSimpleOpen', Cmp: EnvelopeSimpleOpen },
-  { name: 'Equalizer', Cmp: Equalizer },
-  { name: 'Equals', Cmp: Equals },
-  { name: 'Eraser', Cmp: Eraser },
-  { name: 'EscalatorDown', Cmp: EscalatorDown },
-  { name: 'EscalatorUp', Cmp: EscalatorUp },
-  { name: 'Exam', Cmp: Exam },
-  { name: 'ExclamationMark', Cmp: ExclamationMark },
-  { name: 'Exclude', Cmp: Exclude },
-  { name: 'ExcludeSquare', Cmp: ExcludeSquare },
-  { name: 'Export', Cmp: Export },
-  { name: 'Eye', Cmp: Eye },
-  { name: 'EyeClosed', Cmp: EyeClosed },
-  { name: 'Eyedropper', Cmp: Eyedropper },
-  { name: 'EyedropperSample', Cmp: EyedropperSample },
-  { name: 'Eyeglasses', Cmp: Eyeglasses },
-  { name: 'Eyes', Cmp: Eyes },
-  { name: 'EyeSlash', Cmp: EyeSlash },
-  { name: 'FacebookLogo', Cmp: FacebookLogo },
-  { name: 'FaceMask', Cmp: FaceMask },
-  { name: 'Factory', Cmp: Factory },
-  { name: 'Faders', Cmp: Faders },
-  { name: 'FadersHorizontal', Cmp: FadersHorizontal },
-  { name: 'FalloutShelter', Cmp: FalloutShelter },
-  { name: 'Fan', Cmp: Fan },
-  { name: 'Farm', Cmp: Farm },
-  { name: 'FastForward', Cmp: FastForward },
-  { name: 'FastForwardCircle', Cmp: FastForwardCircle },
-  { name: 'Feather', Cmp: Feather },
-  { name: 'FediverseLogo', Cmp: FediverseLogo },
-  { name: 'FigmaLogo', Cmp: FigmaLogo },
-  { name: 'File', Cmp: File },
-  { name: 'FileArchive', Cmp: FileArchive },
-  { name: 'FileArrowDown', Cmp: FileArrowDown },
-  { name: 'FileArrowUp', Cmp: FileArrowUp },
-  { name: 'FileAudio', Cmp: FileAudio },
-  { name: 'FileC', Cmp: FileC },
-  { name: 'FileCloud', Cmp: FileCloud },
-  { name: 'FileCode', Cmp: FileCode },
-  { name: 'FileCpp', Cmp: FileCpp },
-  { name: 'FileCSharp', Cmp: FileCSharp },
-  { name: 'FileCss', Cmp: FileCss },
-  { name: 'FileCsv', Cmp: FileCsv },
-  { name: 'FileDashed', Cmp: FileDashed },
-  { name: 'FileDoc', Cmp: FileDoc },
-  { name: 'FileHtml', Cmp: FileHtml },
-  { name: 'FileImage', Cmp: FileImage },
-  { name: 'FileIni', Cmp: FileIni },
-  { name: 'FileJpg', Cmp: FileJpg },
-  { name: 'FileJs', Cmp: FileJs },
-  { name: 'FileJsx', Cmp: FileJsx },
-  { name: 'FileLock', Cmp: FileLock },
-  { name: 'FileMagnifyingGlass', Cmp: FileMagnifyingGlass },
-  { name: 'FileMd', Cmp: FileMd },
-  { name: 'FileMinus', Cmp: FileMinus },
-  { name: 'FilePdf', Cmp: FilePdf },
-  { name: 'FilePlus', Cmp: FilePlus },
-  { name: 'FilePng', Cmp: FilePng },
-  { name: 'FilePpt', Cmp: FilePpt },
-  { name: 'FilePy', Cmp: FilePy },
-  { name: 'FileRs', Cmp: FileRs },
-  { name: 'Files', Cmp: Files },
-  { name: 'FileSql', Cmp: FileSql },
-  { name: 'FileSvg', Cmp: FileSvg },
-  { name: 'FileText', Cmp: FileText },
-  { name: 'FileTs', Cmp: FileTs },
-  { name: 'FileTsx', Cmp: FileTsx },
-  { name: 'FileTxt', Cmp: FileTxt },
-  { name: 'FileVideo', Cmp: FileVideo },
-  { name: 'FileVue', Cmp: FileVue },
-  { name: 'FileX', Cmp: FileX },
-  { name: 'FileXls', Cmp: FileXls },
-  { name: 'FileZip', Cmp: FileZip },
-  { name: 'FilmReel', Cmp: FilmReel },
-  { name: 'FilmScript', Cmp: FilmScript },
-  { name: 'FilmSlate', Cmp: FilmSlate },
-  { name: 'FilmStrip', Cmp: FilmStrip },
-  { name: 'Fingerprint', Cmp: Fingerprint },
-  { name: 'FingerprintSimple', Cmp: FingerprintSimple },
-  { name: 'FinnTheHuman', Cmp: FinnTheHuman },
-  { name: 'Fire', Cmp: Fire },
-  { name: 'FireExtinguisher', Cmp: FireExtinguisher },
-  { name: 'FireSimple', Cmp: FireSimple },
-  { name: 'FireTruck', Cmp: FireTruck },
-  { name: 'FirstAid', Cmp: FirstAid },
-  { name: 'FirstAidKit', Cmp: FirstAidKit },
-  { name: 'Fish', Cmp: Fish },
-  { name: 'FishSimple', Cmp: FishSimple },
-  { name: 'Flag', Cmp: Flag },
-  { name: 'FlagBanner', Cmp: FlagBanner },
-  { name: 'FlagBannerFold', Cmp: FlagBannerFold },
-  { name: 'FlagCheckered', Cmp: FlagCheckered },
-  { name: 'FlagPennant', Cmp: FlagPennant },
-  { name: 'Flame', Cmp: Flame },
-  { name: 'Flashlight', Cmp: Flashlight },
-  { name: 'Flask', Cmp: Flask },
-  { name: 'FlipHorizontal', Cmp: FlipHorizontal },
-  { name: 'FlipVertical', Cmp: FlipVertical },
-  { name: 'FloppyDisk', Cmp: FloppyDisk },
-  { name: 'FloppyDiskBack', Cmp: FloppyDiskBack },
-  { name: 'FlowArrow', Cmp: FlowArrow },
-  { name: 'Flower', Cmp: Flower },
-  { name: 'FlowerLotus', Cmp: FlowerLotus },
-  { name: 'FlowerTulip', Cmp: FlowerTulip },
-  { name: 'FlyingSaucer', Cmp: FlyingSaucer },
-  { name: 'Folder', Cmp: Folder },
-  { name: 'FolderDashed', Cmp: FolderDashed },
-  { name: 'FolderLock', Cmp: FolderLock },
-  { name: 'FolderMinus', Cmp: FolderMinus },
-  { name: 'FolderOpen', Cmp: FolderOpen },
-  { name: 'FolderPlus', Cmp: FolderPlus },
-  { name: 'Folders', Cmp: Folders },
-  { name: 'FolderSimple', Cmp: FolderSimple },
-  { name: 'FolderSimpleDashed', Cmp: FolderSimpleDashed },
-  { name: 'FolderSimpleLock', Cmp: FolderSimpleLock },
-  { name: 'FolderSimpleMinus', Cmp: FolderSimpleMinus },
-  { name: 'FolderSimplePlus', Cmp: FolderSimplePlus },
-  { name: 'FolderSimpleStar', Cmp: FolderSimpleStar },
-  { name: 'FolderSimpleUser', Cmp: FolderSimpleUser },
-  { name: 'FolderStar', Cmp: FolderStar },
-  { name: 'FolderUser', Cmp: FolderUser },
-  { name: 'Football', Cmp: Football },
-  { name: 'FootballHelmet', Cmp: FootballHelmet },
-  { name: 'Footprints', Cmp: Footprints },
-  { name: 'ForkKnife', Cmp: ForkKnife },
-  { name: 'FourK', Cmp: FourK },
-  { name: 'FrameCorners', Cmp: FrameCorners },
-  { name: 'FramerLogo', Cmp: FramerLogo },
-  { name: 'Function', Cmp: Function },
-  { name: 'Funnel', Cmp: Funnel },
-  { name: 'FunnelSimple', Cmp: FunnelSimple },
-  { name: 'FunnelSimpleX', Cmp: FunnelSimpleX },
-  { name: 'FunnelX', Cmp: FunnelX },
-  { name: 'GameController', Cmp: GameController },
-  { name: 'Garage', Cmp: Garage },
-  { name: 'GasCan', Cmp: GasCan },
-  { name: 'GasPump', Cmp: GasPump },
-  { name: 'Gauge', Cmp: Gauge },
-  { name: 'Gavel', Cmp: Gavel },
-  { name: 'Gear', Cmp: Gear },
-  { name: 'GearFine', Cmp: GearFine },
-  { name: 'GearSix', Cmp: GearSix },
-  { name: 'GenderFemale', Cmp: GenderFemale },
-  { name: 'GenderIntersex', Cmp: GenderIntersex },
-  { name: 'GenderMale', Cmp: GenderMale },
-  { name: 'GenderNeuter', Cmp: GenderNeuter },
-  { name: 'GenderNonbinary', Cmp: GenderNonbinary },
-  { name: 'GenderTransgender', Cmp: GenderTransgender },
-  { name: 'Ghost', Cmp: Ghost },
-  { name: 'Gif', Cmp: Gif },
-  { name: 'Gift', Cmp: Gift },
-  { name: 'GitBranch', Cmp: GitBranch },
-  { name: 'GitCommit', Cmp: GitCommit },
-  { name: 'GitDiff', Cmp: GitDiff },
-  { name: 'GitFork', Cmp: GitFork },
-  { name: 'GithubLogo', Cmp: GithubLogo },
-  { name: 'GitlabLogo', Cmp: GitlabLogo },
-  { name: 'GitlabLogoSimple', Cmp: GitlabLogoSimple },
-  { name: 'GitMerge', Cmp: GitMerge },
-  { name: 'GitPullRequest', Cmp: GitPullRequest },
-  { name: 'Globe', Cmp: Globe },
-  { name: 'GlobeHemisphereEast', Cmp: GlobeHemisphereEast },
-  { name: 'GlobeHemisphereWest', Cmp: GlobeHemisphereWest },
-  { name: 'GlobeSimple', Cmp: GlobeSimple },
-  { name: 'GlobeSimpleX', Cmp: GlobeSimpleX },
-  { name: 'GlobeStand', Cmp: GlobeStand },
-  { name: 'GlobeX', Cmp: GlobeX },
-  { name: 'Goggles', Cmp: Goggles },
-  { name: 'Golf', Cmp: Golf },
-  { name: 'GoodreadsLogo', Cmp: GoodreadsLogo },
-  { name: 'GoogleCardboardLogo', Cmp: GoogleCardboardLogo },
-  { name: 'GoogleChromeLogo', Cmp: GoogleChromeLogo },
-  { name: 'GoogleDriveLogo', Cmp: GoogleDriveLogo },
-  { name: 'GoogleLogo', Cmp: GoogleLogo },
-  { name: 'GooglePhotosLogo', Cmp: GooglePhotosLogo },
-  { name: 'GooglePlayLogo', Cmp: GooglePlayLogo },
-  { name: 'GooglePodcastsLogo', Cmp: GooglePodcastsLogo },
-  { name: 'Gps', Cmp: Gps },
-  { name: 'GpsFix', Cmp: GpsFix },
-  { name: 'GpsSlash', Cmp: GpsSlash },
-  { name: 'Gradient', Cmp: Gradient },
-  { name: 'GraduationCap', Cmp: GraduationCap },
-  { name: 'Grains', Cmp: Grains },
-  { name: 'GrainsSlash', Cmp: GrainsSlash },
-  { name: 'Graph', Cmp: Graph },
-  { name: 'GraphicsCard', Cmp: GraphicsCard },
-  { name: 'GreaterThan', Cmp: GreaterThan },
-  { name: 'GreaterThanOrEqual', Cmp: GreaterThanOrEqual },
-  { name: 'GridFour', Cmp: GridFour },
-  { name: 'GridNine', Cmp: GridNine },
-  { name: 'Guitar', Cmp: Guitar },
-  { name: 'HairDryer', Cmp: HairDryer },
-  { name: 'Hamburger', Cmp: Hamburger },
-  { name: 'Hammer', Cmp: Hammer },
-  { name: 'Hand', Cmp: Hand },
-  { name: 'HandArrowDown', Cmp: HandArrowDown },
-  { name: 'HandArrowUp', Cmp: HandArrowUp },
-  { name: 'Handbag', Cmp: Handbag },
-  { name: 'HandbagSimple', Cmp: HandbagSimple },
-  { name: 'HandCoins', Cmp: HandCoins },
-  { name: 'HandDeposit', Cmp: HandDeposit },
-  { name: 'HandEye', Cmp: HandEye },
-  { name: 'HandFist', Cmp: HandFist },
-  { name: 'HandGrabbing', Cmp: HandGrabbing },
-  { name: 'HandHeart', Cmp: HandHeart },
-  { name: 'HandPalm', Cmp: HandPalm },
-  { name: 'HandPeace', Cmp: HandPeace },
-  { name: 'HandPointing', Cmp: HandPointing },
-  { name: 'HandsClapping', Cmp: HandsClapping },
-  { name: 'Handshake', Cmp: Handshake },
-  { name: 'HandSoap', Cmp: HandSoap },
-  { name: 'HandsPraying', Cmp: HandsPraying },
-  { name: 'HandSwipeLeft', Cmp: HandSwipeLeft },
-  { name: 'HandSwipeRight', Cmp: HandSwipeRight },
-  { name: 'HandTap', Cmp: HandTap },
-  { name: 'HandWaving', Cmp: HandWaving },
-  { name: 'HandWithdraw', Cmp: HandWithdraw },
-  { name: 'HardDrive', Cmp: HardDrive },
-  { name: 'HardDrives', Cmp: HardDrives },
-  { name: 'HardHat', Cmp: HardHat },
-  { name: 'Hash', Cmp: Hash },
-  { name: 'HashStraight', Cmp: HashStraight },
-  { name: 'HeadCircuit', Cmp: HeadCircuit },
-  { name: 'Headlights', Cmp: Headlights },
-  { name: 'Headphones', Cmp: Headphones },
-  { name: 'Headset', Cmp: Headset },
-  { name: 'Heart', Cmp: Heart },
-  { name: 'Heartbeat', Cmp: Heartbeat },
-  { name: 'HeartBreak', Cmp: HeartBreak },
-  { name: 'HeartHalf', Cmp: HeartHalf },
-  { name: 'HeartStraight', Cmp: HeartStraight },
-  { name: 'HeartStraightBreak', Cmp: HeartStraightBreak },
-  { name: 'Hexagon', Cmp: Hexagon },
-  { name: 'HighDefinition', Cmp: HighDefinition },
-  { name: 'HighHeel', Cmp: HighHeel },
-  { name: 'Highlighter', Cmp: Highlighter },
-  { name: 'HighlighterCircle', Cmp: HighlighterCircle },
-  { name: 'Hockey', Cmp: Hockey },
-  { name: 'Hoodie', Cmp: Hoodie },
-  { name: 'Horse', Cmp: Horse },
-  { name: 'Hospital', Cmp: Hospital },
-  { name: 'Hourglass', Cmp: Hourglass },
-  { name: 'HourglassHigh', Cmp: HourglassHigh },
-  { name: 'HourglassLow', Cmp: HourglassLow },
-  { name: 'HourglassMedium', Cmp: HourglassMedium },
-  { name: 'HourglassSimple', Cmp: HourglassSimple },
-  { name: 'HourglassSimpleHigh', Cmp: HourglassSimpleHigh },
-  { name: 'HourglassSimpleLow', Cmp: HourglassSimpleLow },
-  { name: 'HourglassSimpleMedium', Cmp: HourglassSimpleMedium },
-  { name: 'House', Cmp: House },
-  { name: 'HouseLine', Cmp: HouseLine },
-  { name: 'HouseSimple', Cmp: HouseSimple },
-  { name: 'Hurricane', Cmp: Hurricane },
-  { name: 'IceCream', Cmp: IceCream },
-  { name: 'IdentificationBadge', Cmp: IdentificationBadge },
-  { name: 'IdentificationCard', Cmp: IdentificationCard },
-  { name: 'Image', Cmp: Image },
-  { name: 'ImageBroken', Cmp: ImageBroken },
-  { name: 'Images', Cmp: Images },
-  { name: 'ImageSquare', Cmp: ImageSquare },
-  { name: 'ImagesSquare', Cmp: ImagesSquare },
+  { name: 'Acorn', Cmp: AcornIcon },
+  { name: 'AddressBook', Cmp: AddressBookIcon },
+  { name: 'AddressBookTabs', Cmp: AddressBookTabsIcon },
+  { name: 'Airplane', Cmp: AirplaneIcon },
+  { name: 'AirplaneInFlight', Cmp: AirplaneInFlightIcon },
+  { name: 'AirplaneLanding', Cmp: AirplaneLandingIcon },
+  { name: 'AirplaneTakeoff', Cmp: AirplaneTakeoffIcon },
+  { name: 'AirplaneTaxiing', Cmp: AirplaneTaxiingIcon },
+  { name: 'AirplaneTilt', Cmp: AirplaneTiltIcon },
+  { name: 'Airplay', Cmp: AirplayIcon },
+  { name: 'AirTrafficControl', Cmp: AirTrafficControlIcon },
+  { name: 'Alarm', Cmp: AlarmIcon },
+  { name: 'Alien', Cmp: AlienIcon },
+  { name: 'AlignBottom', Cmp: AlignBottomIcon },
+  { name: 'AlignBottomSimple', Cmp: AlignBottomSimpleIcon },
+  { name: 'AlignCenterHorizontal', Cmp: AlignCenterHorizontalIcon },
+  { name: 'AlignCenterHorizontalSimple', Cmp: AlignCenterHorizontalSimpleIcon },
+  { name: 'AlignCenterVertical', Cmp: AlignCenterVerticalIcon },
+  { name: 'AlignCenterVerticalSimple', Cmp: AlignCenterVerticalSimpleIcon },
+  { name: 'AlignLeft', Cmp: AlignLeftIcon },
+  { name: 'AlignLeftSimple', Cmp: AlignLeftSimpleIcon },
+  { name: 'AlignRight', Cmp: AlignRightIcon },
+  { name: 'AlignRightSimple', Cmp: AlignRightSimpleIcon },
+  { name: 'AlignTop', Cmp: AlignTopIcon },
+  { name: 'AlignTopSimple', Cmp: AlignTopSimpleIcon },
+  { name: 'AmazonLogo', Cmp: AmazonLogoIcon },
+  { name: 'Ambulance', Cmp: AmbulanceIcon },
+  { name: 'Anchor', Cmp: AnchorIcon },
+  { name: 'AnchorSimple', Cmp: AnchorSimpleIcon },
+  { name: 'AndroidLogo', Cmp: AndroidLogoIcon },
+  { name: 'Angle', Cmp: AngleIcon },
+  { name: 'AngularLogo', Cmp: AngularLogoIcon },
+  { name: 'Aperture', Cmp: ApertureIcon },
+  { name: 'AppleLogo', Cmp: AppleLogoIcon },
+  { name: 'ApplePodcastsLogo', Cmp: ApplePodcastsLogoIcon },
+  { name: 'ApproximateEquals', Cmp: ApproximateEqualsIcon },
+  { name: 'AppStoreLogo', Cmp: AppStoreLogoIcon },
+  { name: 'AppWindow', Cmp: AppWindowIcon },
+  { name: 'Archive', Cmp: ArchiveIcon },
+  { name: 'Armchair', Cmp: ArmchairIcon },
+  { name: 'ArrowArcLeft', Cmp: ArrowArcLeftIcon },
+  { name: 'ArrowArcRight', Cmp: ArrowArcRightIcon },
+  { name: 'ArrowBendDoubleUpLeft', Cmp: ArrowBendDoubleUpLeftIcon },
+  { name: 'ArrowBendDoubleUpRight', Cmp: ArrowBendDoubleUpRightIcon },
+  { name: 'ArrowBendDownLeft', Cmp: ArrowBendDownLeftIcon },
+  { name: 'ArrowBendDownRight', Cmp: ArrowBendDownRightIcon },
+  { name: 'ArrowBendLeftDown', Cmp: ArrowBendLeftDownIcon },
+  { name: 'ArrowBendLeftUp', Cmp: ArrowBendLeftUpIcon },
+  { name: 'ArrowBendRightDown', Cmp: ArrowBendRightDownIcon },
+  { name: 'ArrowBendRightUp', Cmp: ArrowBendRightUpIcon },
+  { name: 'ArrowBendUpLeft', Cmp: ArrowBendUpLeftIcon },
+  { name: 'ArrowBendUpRight', Cmp: ArrowBendUpRightIcon },
+  { name: 'ArrowCircleDown', Cmp: ArrowCircleDownIcon },
+  { name: 'ArrowCircleDownLeft', Cmp: ArrowCircleDownLeftIcon },
+  { name: 'ArrowCircleDownRight', Cmp: ArrowCircleDownRightIcon },
+  { name: 'ArrowCircleLeft', Cmp: ArrowCircleLeftIcon },
+  { name: 'ArrowCircleRight', Cmp: ArrowCircleRightIcon },
+  { name: 'ArrowCircleUp', Cmp: ArrowCircleUpIcon },
+  { name: 'ArrowCircleUpLeft', Cmp: ArrowCircleUpLeftIcon },
+  { name: 'ArrowCircleUpRight', Cmp: ArrowCircleUpRightIcon },
+  { name: 'ArrowClockwise', Cmp: ArrowClockwiseIcon },
+  { name: 'ArrowCounterClockwise', Cmp: ArrowCounterClockwiseIcon },
+  { name: 'ArrowDown', Cmp: ArrowDownIcon },
+  { name: 'ArrowDownLeft', Cmp: ArrowDownLeftIcon },
+  { name: 'ArrowDownRight', Cmp: ArrowDownRightIcon },
+  { name: 'ArrowElbowDownLeft', Cmp: ArrowElbowDownLeftIcon },
+  { name: 'ArrowElbowDownRight', Cmp: ArrowElbowDownRightIcon },
+  { name: 'ArrowElbowLeft', Cmp: ArrowElbowLeftIcon },
+  { name: 'ArrowElbowLeftDown', Cmp: ArrowElbowLeftDownIcon },
+  { name: 'ArrowElbowLeftUp', Cmp: ArrowElbowLeftUpIcon },
+  { name: 'ArrowElbowRight', Cmp: ArrowElbowRightIcon },
+  { name: 'ArrowElbowRightDown', Cmp: ArrowElbowRightDownIcon },
+  { name: 'ArrowElbowRightUp', Cmp: ArrowElbowRightUpIcon },
+  { name: 'ArrowElbowUpLeft', Cmp: ArrowElbowUpLeftIcon },
+  { name: 'ArrowElbowUpRight', Cmp: ArrowElbowUpRightIcon },
+  { name: 'ArrowFatDown', Cmp: ArrowFatDownIcon },
+  { name: 'ArrowFatLeft', Cmp: ArrowFatLeftIcon },
+  { name: 'ArrowFatLineDown', Cmp: ArrowFatLineDownIcon },
+  { name: 'ArrowFatLineLeft', Cmp: ArrowFatLineLeftIcon },
+  { name: 'ArrowFatLineRight', Cmp: ArrowFatLineRightIcon },
+  { name: 'ArrowFatLinesDown', Cmp: ArrowFatLinesDownIcon },
+  { name: 'ArrowFatLinesLeft', Cmp: ArrowFatLinesLeftIcon },
+  { name: 'ArrowFatLinesRight', Cmp: ArrowFatLinesRightIcon },
+  { name: 'ArrowFatLinesUp', Cmp: ArrowFatLinesUpIcon },
+  { name: 'ArrowFatLineUp', Cmp: ArrowFatLineUpIcon },
+  { name: 'ArrowFatRight', Cmp: ArrowFatRightIcon },
+  { name: 'ArrowFatUp', Cmp: ArrowFatUpIcon },
+  { name: 'ArrowLeft', Cmp: ArrowLeftIcon },
+  { name: 'ArrowLineDown', Cmp: ArrowLineDownIcon },
+  { name: 'ArrowLineDownLeft', Cmp: ArrowLineDownLeftIcon },
+  { name: 'ArrowLineDownRight', Cmp: ArrowLineDownRightIcon },
+  { name: 'ArrowLineLeft', Cmp: ArrowLineLeftIcon },
+  { name: 'ArrowLineRight', Cmp: ArrowLineRightIcon },
+  { name: 'ArrowLineUp', Cmp: ArrowLineUpIcon },
+  { name: 'ArrowLineUpLeft', Cmp: ArrowLineUpLeftIcon },
+  { name: 'ArrowLineUpRight', Cmp: ArrowLineUpRightIcon },
+  { name: 'ArrowRight', Cmp: ArrowRightIcon },
+  { name: 'ArrowsClockwise', Cmp: ArrowsClockwiseIcon },
+  { name: 'ArrowsCounterClockwise', Cmp: ArrowsCounterClockwiseIcon },
+  { name: 'ArrowsDownUp', Cmp: ArrowsDownUpIcon },
+  { name: 'ArrowsHorizontal', Cmp: ArrowsHorizontalIcon },
+  { name: 'ArrowsIn', Cmp: ArrowsInIcon },
+  { name: 'ArrowsInCardinal', Cmp: ArrowsInCardinalIcon },
+  { name: 'ArrowsInLineHorizontal', Cmp: ArrowsInLineHorizontalIcon },
+  { name: 'ArrowsInLineVertical', Cmp: ArrowsInLineVerticalIcon },
+  { name: 'ArrowsInSimple', Cmp: ArrowsInSimpleIcon },
+  { name: 'ArrowsLeftRight', Cmp: ArrowsLeftRightIcon },
+  { name: 'ArrowsMerge', Cmp: ArrowsMergeIcon },
+  { name: 'ArrowsOut', Cmp: ArrowsOutIcon },
+  { name: 'ArrowsOutCardinal', Cmp: ArrowsOutCardinalIcon },
+  { name: 'ArrowsOutLineHorizontal', Cmp: ArrowsOutLineHorizontalIcon },
+  { name: 'ArrowsOutLineVertical', Cmp: ArrowsOutLineVerticalIcon },
+  { name: 'ArrowsOutSimple', Cmp: ArrowsOutSimpleIcon },
+  { name: 'ArrowSquareDown', Cmp: ArrowSquareDownIcon },
+  { name: 'ArrowSquareDownLeft', Cmp: ArrowSquareDownLeftIcon },
+  { name: 'ArrowSquareDownRight', Cmp: ArrowSquareDownRightIcon },
+  { name: 'ArrowSquareIn', Cmp: ArrowSquareInIcon },
+  { name: 'ArrowSquareLeft', Cmp: ArrowSquareLeftIcon },
+  { name: 'ArrowSquareOut', Cmp: ArrowSquareOutIcon },
+  { name: 'ArrowSquareRight', Cmp: ArrowSquareRightIcon },
+  { name: 'ArrowSquareUp', Cmp: ArrowSquareUpIcon },
+  { name: 'ArrowSquareUpLeft', Cmp: ArrowSquareUpLeftIcon },
+  { name: 'ArrowSquareUpRight', Cmp: ArrowSquareUpRightIcon },
+  { name: 'ArrowsSplit', Cmp: ArrowsSplitIcon },
+  { name: 'ArrowsVertical', Cmp: ArrowsVerticalIcon },
+  { name: 'ArrowUDownLeft', Cmp: ArrowUDownLeftIcon },
+  { name: 'ArrowUDownRight', Cmp: ArrowUDownRightIcon },
+  { name: 'ArrowULeftDown', Cmp: ArrowULeftDownIcon },
+  { name: 'ArrowULeftUp', Cmp: ArrowULeftUpIcon },
+  { name: 'ArrowUp', Cmp: ArrowUpIcon },
+  { name: 'ArrowUpLeft', Cmp: ArrowUpLeftIcon },
+  { name: 'ArrowUpRight', Cmp: ArrowUpRightIcon },
+  { name: 'ArrowURightDown', Cmp: ArrowURightDownIcon },
+  { name: 'ArrowURightUp', Cmp: ArrowURightUpIcon },
+  { name: 'ArrowUUpLeft', Cmp: ArrowUUpLeftIcon },
+  { name: 'ArrowUUpRight', Cmp: ArrowUUpRightIcon },
+  { name: 'Article', Cmp: ArticleIcon },
+  { name: 'ArticleMedium', Cmp: ArticleMediumIcon },
+  { name: 'ArticleNyTimes', Cmp: ArticleNyTimesIcon },
+  { name: 'Asclepius', Cmp: AsclepiusIcon },
+  { name: 'Asterisk', Cmp: AsteriskIcon },
+  { name: 'AsteriskSimple', Cmp: AsteriskSimpleIcon },
+  { name: 'At', Cmp: AtIcon },
+  { name: 'Atom', Cmp: AtomIcon },
+  { name: 'Avocado', Cmp: AvocadoIcon },
+  { name: 'Axe', Cmp: AxeIcon },
+  { name: 'Baby', Cmp: BabyIcon },
+  { name: 'BabyCarriage', Cmp: BabyCarriageIcon },
+  { name: 'Backpack', Cmp: BackpackIcon },
+  { name: 'Backspace', Cmp: BackspaceIcon },
+  { name: 'Bag', Cmp: BagIcon },
+  { name: 'BagSimple', Cmp: BagSimpleIcon },
+  { name: 'Balloon', Cmp: BalloonIcon },
+  { name: 'Bandaids', Cmp: BandaidsIcon },
+  { name: 'Bank', Cmp: BankIcon },
+  { name: 'Barbell', Cmp: BarbellIcon },
+  { name: 'Barcode', Cmp: BarcodeIcon },
+  { name: 'Barn', Cmp: BarnIcon },
+  { name: 'Barricade', Cmp: BarricadeIcon },
+  { name: 'Baseball', Cmp: BaseballIcon },
+  { name: 'BaseballCap', Cmp: BaseballCapIcon },
+  { name: 'BaseballHelmet', Cmp: BaseballHelmetIcon },
+  { name: 'Basket', Cmp: BasketIcon },
+  { name: 'Basketball', Cmp: BasketballIcon },
+  { name: 'Bathtub', Cmp: BathtubIcon },
+  { name: 'BatteryCharging', Cmp: BatteryChargingIcon },
+  { name: 'BatteryChargingVertical', Cmp: BatteryChargingVerticalIcon },
+  { name: 'BatteryEmpty', Cmp: BatteryEmptyIcon },
+  { name: 'BatteryFull', Cmp: BatteryFullIcon },
+  { name: 'BatteryHigh', Cmp: BatteryHighIcon },
+  { name: 'BatteryLow', Cmp: BatteryLowIcon },
+  { name: 'BatteryMedium', Cmp: BatteryMediumIcon },
+  { name: 'BatteryPlus', Cmp: BatteryPlusIcon },
+  { name: 'BatteryPlusVertical', Cmp: BatteryPlusVerticalIcon },
+  { name: 'BatteryVerticalEmpty', Cmp: BatteryVerticalEmptyIcon },
+  { name: 'BatteryVerticalFull', Cmp: BatteryVerticalFullIcon },
+  { name: 'BatteryVerticalHigh', Cmp: BatteryVerticalHighIcon },
+  { name: 'BatteryVerticalLow', Cmp: BatteryVerticalLowIcon },
+  { name: 'BatteryVerticalMedium', Cmp: BatteryVerticalMediumIcon },
+  { name: 'BatteryWarning', Cmp: BatteryWarningIcon },
+  { name: 'BatteryWarningVertical', Cmp: BatteryWarningVerticalIcon },
+  { name: 'BeachBall', Cmp: BeachBallIcon },
+  { name: 'Beanie', Cmp: BeanieIcon },
+  { name: 'Bed', Cmp: BedIcon },
+  { name: 'BeerBottle', Cmp: BeerBottleIcon },
+  { name: 'BeerStein', Cmp: BeerSteinIcon },
+  { name: 'BehanceLogo', Cmp: BehanceLogoIcon },
+  { name: 'Bell', Cmp: BellIcon },
+  { name: 'BellRinging', Cmp: BellRingingIcon },
+  { name: 'BellSimple', Cmp: BellSimpleIcon },
+  { name: 'BellSimpleRinging', Cmp: BellSimpleRingingIcon },
+  { name: 'BellSimpleSlash', Cmp: BellSimpleSlashIcon },
+  { name: 'BellSimpleZ', Cmp: BellSimpleZIcon },
+  { name: 'BellSlash', Cmp: BellSlashIcon },
+  { name: 'BellZ', Cmp: BellZIcon },
+  { name: 'Belt', Cmp: BeltIcon },
+  { name: 'BezierCurve', Cmp: BezierCurveIcon },
+  { name: 'Bicycle', Cmp: BicycleIcon },
+  { name: 'Binary', Cmp: BinaryIcon },
+  { name: 'Binoculars', Cmp: BinocularsIcon },
+  { name: 'Biohazard', Cmp: BiohazardIcon },
+  { name: 'Bird', Cmp: BirdIcon },
+  { name: 'Blueprint', Cmp: BlueprintIcon },
+  { name: 'Bluetooth', Cmp: BluetoothIcon },
+  { name: 'BluetoothConnected', Cmp: BluetoothConnectedIcon },
+  { name: 'BluetoothSlash', Cmp: BluetoothSlashIcon },
+  { name: 'BluetoothX', Cmp: BluetoothXIcon },
+  { name: 'Boat', Cmp: BoatIcon },
+  { name: 'Bomb', Cmp: BombIcon },
+  { name: 'Bone', Cmp: BoneIcon },
+  { name: 'Book', Cmp: BookIcon },
+  { name: 'BookBookmark', Cmp: BookBookmarkIcon },
+  { name: 'Bookmark', Cmp: BookmarkIcon },
+  { name: 'Bookmarks', Cmp: BookmarksIcon },
+  { name: 'BookmarkSimple', Cmp: BookmarkSimpleIcon },
+  { name: 'BookmarksSimple', Cmp: BookmarksSimpleIcon },
+  { name: 'BookOpen', Cmp: BookOpenIcon },
+  { name: 'BookOpenText', Cmp: BookOpenTextIcon },
+  { name: 'BookOpenUser', Cmp: BookOpenUserIcon },
+  { name: 'Books', Cmp: BooksIcon },
+  { name: 'Boot', Cmp: BootIcon },
+  { name: 'Boules', Cmp: BoulesIcon },
+  { name: 'BoundingBox', Cmp: BoundingBoxIcon },
+  { name: 'BowlFood', Cmp: BowlFoodIcon },
+  { name: 'BowlingBall', Cmp: BowlingBallIcon },
+  { name: 'BowlSteam', Cmp: BowlSteamIcon },
+  { name: 'BoxArrowDown', Cmp: BoxArrowDownIcon },
+  { name: 'BoxArrowUp', Cmp: BoxArrowUpIcon },
+  { name: 'BoxingGlove', Cmp: BoxingGloveIcon },
+  { name: 'BracketsAngle', Cmp: BracketsAngleIcon },
+  { name: 'BracketsCurly', Cmp: BracketsCurlyIcon },
+  { name: 'BracketsRound', Cmp: BracketsRoundIcon },
+  { name: 'BracketsSquare', Cmp: BracketsSquareIcon },
+  { name: 'Brain', Cmp: BrainIcon },
+  { name: 'Brandy', Cmp: BrandyIcon },
+  { name: 'Bread', Cmp: BreadIcon },
+  { name: 'Bridge', Cmp: BridgeIcon },
+  { name: 'Briefcase', Cmp: BriefcaseIcon },
+  { name: 'BriefcaseMetal', Cmp: BriefcaseMetalIcon },
+  { name: 'Broadcast', Cmp: BroadcastIcon },
+  { name: 'Broom', Cmp: BroomIcon },
+  { name: 'Browser', Cmp: BrowserIcon },
+  { name: 'Browsers', Cmp: BrowsersIcon },
+  { name: 'Bug', Cmp: BugIcon },
+  { name: 'BugBeetle', Cmp: BugBeetleIcon },
+  { name: 'BugDroid', Cmp: BugDroidIcon },
+  { name: 'Building', Cmp: BuildingIcon },
+  { name: 'BuildingApartment', Cmp: BuildingApartmentIcon },
+  { name: 'BuildingOffice', Cmp: BuildingOfficeIcon },
+  { name: 'Buildings', Cmp: BuildingsIcon },
+  { name: 'Bulldozer', Cmp: BulldozerIcon },
+  { name: 'Bus', Cmp: BusIcon },
+  { name: 'Butterfly', Cmp: ButterflyIcon },
+  { name: 'CableCar', Cmp: CableCarIcon },
+  { name: 'Cactus', Cmp: CactusIcon },
+  { name: 'Cake', Cmp: CakeIcon },
+  { name: 'Calculator', Cmp: CalculatorIcon },
+  { name: 'Calendar', Cmp: CalendarIcon },
+  { name: 'CalendarBlank', Cmp: CalendarBlankIcon },
+  { name: 'CalendarCheck', Cmp: CalendarCheckIcon },
+  { name: 'CalendarDot', Cmp: CalendarDotIcon },
+  { name: 'CalendarDots', Cmp: CalendarDotsIcon },
+  { name: 'CalendarHeart', Cmp: CalendarHeartIcon },
+  { name: 'CalendarMinus', Cmp: CalendarMinusIcon },
+  { name: 'CalendarPlus', Cmp: CalendarPlusIcon },
+  { name: 'CalendarSlash', Cmp: CalendarSlashIcon },
+  { name: 'CalendarStar', Cmp: CalendarStarIcon },
+  { name: 'CalendarX', Cmp: CalendarXIcon },
+  { name: 'CallBell', Cmp: CallBellIcon },
+  { name: 'Camera', Cmp: CameraIcon },
+  { name: 'CameraPlus', Cmp: CameraPlusIcon },
+  { name: 'CameraRotate', Cmp: CameraRotateIcon },
+  { name: 'CameraSlash', Cmp: CameraSlashIcon },
+  { name: 'Campfire', Cmp: CampfireIcon },
+  { name: 'Car', Cmp: CarIcon },
+  { name: 'CarBattery', Cmp: CarBatteryIcon },
+  { name: 'Cardholder', Cmp: CardholderIcon },
+  { name: 'Cards', Cmp: CardsIcon },
+  { name: 'CardsThree', Cmp: CardsThreeIcon },
+  { name: 'CaretCircleDoubleDown', Cmp: CaretCircleDoubleDownIcon },
+  { name: 'CaretCircleDoubleLeft', Cmp: CaretCircleDoubleLeftIcon },
+  { name: 'CaretCircleDoubleRight', Cmp: CaretCircleDoubleRightIcon },
+  { name: 'CaretCircleDoubleUp', Cmp: CaretCircleDoubleUpIcon },
+  { name: 'CaretCircleDown', Cmp: CaretCircleDownIcon },
+  { name: 'CaretCircleLeft', Cmp: CaretCircleLeftIcon },
+  { name: 'CaretCircleRight', Cmp: CaretCircleRightIcon },
+  { name: 'CaretCircleUp', Cmp: CaretCircleUpIcon },
+  { name: 'CaretCircleUpDown', Cmp: CaretCircleUpDownIcon },
+  { name: 'CaretDoubleDown', Cmp: CaretDoubleDownIcon },
+  { name: 'CaretDoubleLeft', Cmp: CaretDoubleLeftIcon },
+  { name: 'CaretDoubleRight', Cmp: CaretDoubleRightIcon },
+  { name: 'CaretDoubleUp', Cmp: CaretDoubleUpIcon },
+  { name: 'CaretDown', Cmp: CaretDownIcon },
+  { name: 'CaretLeft', Cmp: CaretLeftIcon },
+  { name: 'CaretLineDown', Cmp: CaretLineDownIcon },
+  { name: 'CaretLineLeft', Cmp: CaretLineLeftIcon },
+  { name: 'CaretLineRight', Cmp: CaretLineRightIcon },
+  { name: 'CaretLineUp', Cmp: CaretLineUpIcon },
+  { name: 'CaretRight', Cmp: CaretRightIcon },
+  { name: 'CaretUp', Cmp: CaretUpIcon },
+  { name: 'CaretUpDown', Cmp: CaretUpDownIcon },
+  { name: 'CarProfile', Cmp: CarProfileIcon },
+  { name: 'Carrot', Cmp: CarrotIcon },
+  { name: 'CarSimple', Cmp: CarSimpleIcon },
+  { name: 'CashRegister', Cmp: CashRegisterIcon },
+  { name: 'CassetteTape', Cmp: CassetteTapeIcon },
+  { name: 'CastleTurret', Cmp: CastleTurretIcon },
+  { name: 'Cat', Cmp: CatIcon },
+  { name: 'CellSignalFull', Cmp: CellSignalFullIcon },
+  { name: 'CellSignalHigh', Cmp: CellSignalHighIcon },
+  { name: 'CellSignalLow', Cmp: CellSignalLowIcon },
+  { name: 'CellSignalMedium', Cmp: CellSignalMediumIcon },
+  { name: 'CellSignalNone', Cmp: CellSignalNoneIcon },
+  { name: 'CellSignalSlash', Cmp: CellSignalSlashIcon },
+  { name: 'CellSignalX', Cmp: CellSignalXIcon },
+  { name: 'CellTower', Cmp: CellTowerIcon },
+  { name: 'Certificate', Cmp: CertificateIcon },
+  { name: 'Chair', Cmp: ChairIcon },
+  { name: 'Chalkboard', Cmp: ChalkboardIcon },
+  { name: 'ChalkboardSimple', Cmp: ChalkboardSimpleIcon },
+  { name: 'ChalkboardTeacher', Cmp: ChalkboardTeacherIcon },
+  { name: 'Champagne', Cmp: ChampagneIcon },
+  { name: 'ChargingStation', Cmp: ChargingStationIcon },
+  { name: 'ChartBar', Cmp: ChartBarIcon },
+  { name: 'ChartBarHorizontal', Cmp: ChartBarHorizontalIcon },
+  { name: 'ChartDonut', Cmp: ChartDonutIcon },
+  { name: 'ChartLine', Cmp: ChartLineIcon },
+  { name: 'ChartLineDown', Cmp: ChartLineDownIcon },
+  { name: 'ChartLineUp', Cmp: ChartLineUpIcon },
+  { name: 'ChartPie', Cmp: ChartPieIcon },
+  { name: 'ChartPieSlice', Cmp: ChartPieSliceIcon },
+  { name: 'ChartPolar', Cmp: ChartPolarIcon },
+  { name: 'ChartScatter', Cmp: ChartScatterIcon },
+  { name: 'Chat', Cmp: ChatIcon },
+  { name: 'ChatCentered', Cmp: ChatCenteredIcon },
+  { name: 'ChatCenteredDots', Cmp: ChatCenteredDotsIcon },
+  { name: 'ChatCenteredSlash', Cmp: ChatCenteredSlashIcon },
+  { name: 'ChatCenteredText', Cmp: ChatCenteredTextIcon },
+  { name: 'ChatCircle', Cmp: ChatCircleIcon },
+  { name: 'ChatCircleDots', Cmp: ChatCircleDotsIcon },
+  { name: 'ChatCircleSlash', Cmp: ChatCircleSlashIcon },
+  { name: 'ChatCircleText', Cmp: ChatCircleTextIcon },
+  { name: 'ChatDots', Cmp: ChatDotsIcon },
+  { name: 'Chats', Cmp: ChatsIcon },
+  { name: 'ChatsCircle', Cmp: ChatsCircleIcon },
+  { name: 'ChatSlash', Cmp: ChatSlashIcon },
+  { name: 'ChatsTeardrop', Cmp: ChatsTeardropIcon },
+  { name: 'ChatTeardrop', Cmp: ChatTeardropIcon },
+  { name: 'ChatTeardropDots', Cmp: ChatTeardropDotsIcon },
+  { name: 'ChatTeardropSlash', Cmp: ChatTeardropSlashIcon },
+  { name: 'ChatTeardropText', Cmp: ChatTeardropTextIcon },
+  { name: 'ChatText', Cmp: ChatTextIcon },
+  { name: 'Check', Cmp: CheckIcon },
+  { name: 'CheckCircle', Cmp: CheckCircleIcon },
+  { name: 'Checkerboard', Cmp: CheckerboardIcon },
+  { name: 'CheckFat', Cmp: CheckFatIcon },
+  { name: 'Checks', Cmp: ChecksIcon },
+  { name: 'CheckSquare', Cmp: CheckSquareIcon },
+  { name: 'CheckSquareOffset', Cmp: CheckSquareOffsetIcon },
+  { name: 'Cheers', Cmp: CheersIcon },
+  { name: 'Cheese', Cmp: CheeseIcon },
+  { name: 'ChefHat', Cmp: ChefHatIcon },
+  { name: 'Cherries', Cmp: CherriesIcon },
+  { name: 'Church', Cmp: ChurchIcon },
+  { name: 'Cigarette', Cmp: CigaretteIcon },
+  { name: 'CigaretteSlash', Cmp: CigaretteSlashIcon },
+  { name: 'Circle', Cmp: CircleIcon },
+  { name: 'CircleDashed', Cmp: CircleDashedIcon },
+  { name: 'CircleHalf', Cmp: CircleHalfIcon },
+  { name: 'CircleHalfTilt', Cmp: CircleHalfTiltIcon },
+  { name: 'CircleNotch', Cmp: CircleNotchIcon },
+  { name: 'CirclesFour', Cmp: CirclesFourIcon },
+  { name: 'CirclesThree', Cmp: CirclesThreeIcon },
+  { name: 'CirclesThreePlus', Cmp: CirclesThreePlusIcon },
+  { name: 'Circuitry', Cmp: CircuitryIcon },
+  { name: 'City', Cmp: CityIcon },
+  { name: 'Clipboard', Cmp: ClipboardIcon },
+  { name: 'ClipboardText', Cmp: ClipboardTextIcon },
+  { name: 'Clock', Cmp: ClockIcon },
+  { name: 'ClockAfternoon', Cmp: ClockAfternoonIcon },
+  { name: 'ClockClockwise', Cmp: ClockClockwiseIcon },
+  { name: 'ClockCountdown', Cmp: ClockCountdownIcon },
+  { name: 'ClockCounterClockwise', Cmp: ClockCounterClockwiseIcon },
+  { name: 'ClockUser', Cmp: ClockUserIcon },
+  { name: 'ClosedCaptioning', Cmp: ClosedCaptioningIcon },
+  { name: 'Cloud', Cmp: CloudIcon },
+  { name: 'CloudArrowDown', Cmp: CloudArrowDownIcon },
+  { name: 'CloudArrowUp', Cmp: CloudArrowUpIcon },
+  { name: 'CloudCheck', Cmp: CloudCheckIcon },
+  { name: 'CloudFog', Cmp: CloudFogIcon },
+  { name: 'CloudLightning', Cmp: CloudLightningIcon },
+  { name: 'CloudMoon', Cmp: CloudMoonIcon },
+  { name: 'CloudRain', Cmp: CloudRainIcon },
+  { name: 'CloudSlash', Cmp: CloudSlashIcon },
+  { name: 'CloudSnow', Cmp: CloudSnowIcon },
+  { name: 'CloudSun', Cmp: CloudSunIcon },
+  { name: 'CloudWarning', Cmp: CloudWarningIcon },
+  { name: 'CloudX', Cmp: CloudXIcon },
+  { name: 'Clover', Cmp: CloverIcon },
+  { name: 'Club', Cmp: ClubIcon },
+  { name: 'CoatHanger', Cmp: CoatHangerIcon },
+  { name: 'CodaLogo', Cmp: CodaLogoIcon },
+  { name: 'Code', Cmp: CodeIcon },
+  { name: 'CodeBlock', Cmp: CodeBlockIcon },
+  { name: 'CodepenLogo', Cmp: CodepenLogoIcon },
+  { name: 'CodesandboxLogo', Cmp: CodesandboxLogoIcon },
+  { name: 'CodeSimple', Cmp: CodeSimpleIcon },
+  { name: 'Coffee', Cmp: CoffeeIcon },
+  { name: 'CoffeeBean', Cmp: CoffeeBeanIcon },
+  { name: 'Coin', Cmp: CoinIcon },
+  { name: 'Coins', Cmp: CoinsIcon },
+  { name: 'CoinVertical', Cmp: CoinVerticalIcon },
+  { name: 'Columns', Cmp: ColumnsIcon },
+  { name: 'ColumnsPlusLeft', Cmp: ColumnsPlusLeftIcon },
+  { name: 'ColumnsPlusRight', Cmp: ColumnsPlusRightIcon },
+  { name: 'Command', Cmp: CommandIcon },
+  { name: 'Compass', Cmp: CompassIcon },
+  { name: 'CompassRose', Cmp: CompassRoseIcon },
+  { name: 'CompassTool', Cmp: CompassToolIcon },
+  { name: 'ComputerTower', Cmp: ComputerTowerIcon },
+  { name: 'Confetti', Cmp: ConfettiIcon },
+  { name: 'ContactlessPayment', Cmp: ContactlessPaymentIcon },
+  { name: 'Control', Cmp: ControlIcon },
+  { name: 'Cookie', Cmp: CookieIcon },
+  { name: 'CookingPot', Cmp: CookingPotIcon },
+  { name: 'Copy', Cmp: CopyIcon },
+  { name: 'Copyleft', Cmp: CopyleftIcon },
+  { name: 'Copyright', Cmp: CopyrightIcon },
+  { name: 'CopySimple', Cmp: CopySimpleIcon },
+  { name: 'CornersIn', Cmp: CornersInIcon },
+  { name: 'CornersOut', Cmp: CornersOutIcon },
+  { name: 'Couch', Cmp: CouchIcon },
+  { name: 'CourtBasketball', Cmp: CourtBasketballIcon },
+  { name: 'Cow', Cmp: CowIcon },
+  { name: 'CowboyHat', Cmp: CowboyHatIcon },
+  { name: 'Cpu', Cmp: CpuIcon },
+  { name: 'Crane', Cmp: CraneIcon },
+  { name: 'CraneTower', Cmp: CraneTowerIcon },
+  { name: 'CreditCard', Cmp: CreditCardIcon },
+  { name: 'Cricket', Cmp: CricketIcon },
+  { name: 'Crop', Cmp: CropIcon },
+  { name: 'Cross', Cmp: CrossIcon },
+  { name: 'Crosshair', Cmp: CrosshairIcon },
+  { name: 'CrosshairSimple', Cmp: CrosshairSimpleIcon },
+  { name: 'Crown', Cmp: CrownIcon },
+  { name: 'CrownCross', Cmp: CrownCrossIcon },
+  { name: 'CrownSimple', Cmp: CrownSimpleIcon },
+  { name: 'Cube', Cmp: CubeIcon },
+  { name: 'CubeFocus', Cmp: CubeFocusIcon },
+  { name: 'CubeTransparent', Cmp: CubeTransparentIcon },
+  { name: 'CurrencyBtc', Cmp: CurrencyBtcIcon },
+  { name: 'CurrencyCircleDollar', Cmp: CurrencyCircleDollarIcon },
+  { name: 'CurrencyCny', Cmp: CurrencyCnyIcon },
+  { name: 'CurrencyDollar', Cmp: CurrencyDollarIcon },
+  { name: 'CurrencyDollarSimple', Cmp: CurrencyDollarSimpleIcon },
+  { name: 'CurrencyEth', Cmp: CurrencyEthIcon },
+  { name: 'CurrencyEur', Cmp: CurrencyEurIcon },
+  { name: 'CurrencyGbp', Cmp: CurrencyGbpIcon },
+  { name: 'CurrencyInr', Cmp: CurrencyInrIcon },
+  { name: 'CurrencyJpy', Cmp: CurrencyJpyIcon },
+  { name: 'CurrencyKrw', Cmp: CurrencyKrwIcon },
+  { name: 'CurrencyKzt', Cmp: CurrencyKztIcon },
+  { name: 'CurrencyNgn', Cmp: CurrencyNgnIcon },
+  { name: 'CurrencyRub', Cmp: CurrencyRubIcon },
+  { name: 'Cursor', Cmp: CursorIcon },
+  { name: 'CursorClick', Cmp: CursorClickIcon },
+  { name: 'CursorText', Cmp: CursorTextIcon },
+  { name: 'Cylinder', Cmp: CylinderIcon },
+  { name: 'Database', Cmp: DatabaseIcon },
+  { name: 'Desk', Cmp: DeskIcon },
+  { name: 'Desktop', Cmp: DesktopIcon },
+  { name: 'DesktopTower', Cmp: DesktopTowerIcon },
+  { name: 'Detective', Cmp: DetectiveIcon },
+  { name: 'DeviceMobile', Cmp: DeviceMobileIcon },
+  { name: 'DeviceMobileCamera', Cmp: DeviceMobileCameraIcon },
+  { name: 'DeviceMobileSlash', Cmp: DeviceMobileSlashIcon },
+  { name: 'DeviceMobileSpeaker', Cmp: DeviceMobileSpeakerIcon },
+  { name: 'DeviceRotate', Cmp: DeviceRotateIcon },
+  { name: 'Devices', Cmp: DevicesIcon },
+  { name: 'DeviceTablet', Cmp: DeviceTabletIcon },
+  { name: 'DeviceTabletCamera', Cmp: DeviceTabletCameraIcon },
+  { name: 'DeviceTabletSpeaker', Cmp: DeviceTabletSpeakerIcon },
+  { name: 'DevToLogo', Cmp: DevToLogoIcon },
+  { name: 'Diamond', Cmp: DiamondIcon },
+  { name: 'DiamondsFour', Cmp: DiamondsFourIcon },
+  { name: 'DiceFive', Cmp: DiceFiveIcon },
+  { name: 'DiceFour', Cmp: DiceFourIcon },
+  { name: 'DiceOne', Cmp: DiceOneIcon },
+  { name: 'DiceSix', Cmp: DiceSixIcon },
+  { name: 'DiceThree', Cmp: DiceThreeIcon },
+  { name: 'DiceTwo', Cmp: DiceTwoIcon },
+  { name: 'Disc', Cmp: DiscIcon },
+  { name: 'DiscoBall', Cmp: DiscoBallIcon },
+  { name: 'DiscordLogo', Cmp: DiscordLogoIcon },
+  { name: 'Divide', Cmp: DivideIcon },
+  { name: 'Dna', Cmp: DnaIcon },
+  { name: 'Dog', Cmp: DogIcon },
+  { name: 'Door', Cmp: DoorIcon },
+  { name: 'DoorOpen', Cmp: DoorOpenIcon },
+  { name: 'Dot', Cmp: DotIcon },
+  { name: 'DotOutline', Cmp: DotOutlineIcon },
+  { name: 'DotsNine', Cmp: DotsNineIcon },
+  { name: 'DotsSix', Cmp: DotsSixIcon },
+  { name: 'DotsSixVertical', Cmp: DotsSixVerticalIcon },
+  { name: 'DotsThree', Cmp: DotsThreeIcon },
+  { name: 'DotsThreeCircle', Cmp: DotsThreeCircleIcon },
+  { name: 'DotsThreeCircleVertical', Cmp: DotsThreeCircleVerticalIcon },
+  { name: 'DotsThreeOutline', Cmp: DotsThreeOutlineIcon },
+  { name: 'DotsThreeOutlineVertical', Cmp: DotsThreeOutlineVerticalIcon },
+  { name: 'DotsThreeVertical', Cmp: DotsThreeVerticalIcon },
+  { name: 'Download', Cmp: DownloadIcon },
+  { name: 'DownloadSimple', Cmp: DownloadSimpleIcon },
+  { name: 'Dress', Cmp: DressIcon },
+  { name: 'Dresser', Cmp: DresserIcon },
+  { name: 'DribbbleLogo', Cmp: DribbbleLogoIcon },
+  { name: 'Drone', Cmp: DroneIcon },
+  { name: 'Drop', Cmp: DropIcon },
+  { name: 'DropboxLogo', Cmp: DropboxLogoIcon },
+  { name: 'DropHalf', Cmp: DropHalfIcon },
+  { name: 'DropHalfBottom', Cmp: DropHalfBottomIcon },
+  { name: 'DropSimple', Cmp: DropSimpleIcon },
+  { name: 'DropSlash', Cmp: DropSlashIcon },
+  { name: 'Ear', Cmp: EarIcon },
+  { name: 'EarSlash', Cmp: EarSlashIcon },
+  { name: 'Egg', Cmp: EggIcon },
+  { name: 'EggCrack', Cmp: EggCrackIcon },
+  { name: 'Eject', Cmp: EjectIcon },
+  { name: 'EjectSimple', Cmp: EjectSimpleIcon },
+  { name: 'Elevator', Cmp: ElevatorIcon },
+  { name: 'Empty', Cmp: EmptyIcon },
+  { name: 'Engine', Cmp: EngineIcon },
+  { name: 'Envelope', Cmp: EnvelopeIcon },
+  { name: 'EnvelopeOpen', Cmp: EnvelopeOpenIcon },
+  { name: 'EnvelopeSimple', Cmp: EnvelopeSimpleIcon },
+  { name: 'EnvelopeSimpleOpen', Cmp: EnvelopeSimpleOpenIcon },
+  { name: 'Equalizer', Cmp: EqualizerIcon },
+  { name: 'Equals', Cmp: EqualsIcon },
+  { name: 'Eraser', Cmp: EraserIcon },
+  { name: 'EscalatorDown', Cmp: EscalatorDownIcon },
+  { name: 'EscalatorUp', Cmp: EscalatorUpIcon },
+  { name: 'Exam', Cmp: ExamIcon },
+  { name: 'ExclamationMark', Cmp: ExclamationMarkIcon },
+  { name: 'Exclude', Cmp: ExcludeIcon },
+  { name: 'ExcludeSquare', Cmp: ExcludeSquareIcon },
+  { name: 'Export', Cmp: ExportIcon },
+  { name: 'Eye', Cmp: EyeIcon },
+  { name: 'EyeClosed', Cmp: EyeClosedIcon },
+  { name: 'Eyedropper', Cmp: EyedropperIcon },
+  { name: 'EyedropperSample', Cmp: EyedropperSampleIcon },
+  { name: 'Eyeglasses', Cmp: EyeglassesIcon },
+  { name: 'Eyes', Cmp: EyesIcon },
+  { name: 'EyeSlash', Cmp: EyeSlashIcon },
+  { name: 'FacebookLogo', Cmp: FacebookLogoIcon },
+  { name: 'FaceMask', Cmp: FaceMaskIcon },
+  { name: 'Factory', Cmp: FactoryIcon },
+  { name: 'Faders', Cmp: FadersIcon },
+  { name: 'FadersHorizontal', Cmp: FadersHorizontalIcon },
+  { name: 'FalloutShelter', Cmp: FalloutShelterIcon },
+  { name: 'Fan', Cmp: FanIcon },
+  { name: 'Farm', Cmp: FarmIcon },
+  { name: 'FastForward', Cmp: FastForwardIcon },
+  { name: 'FastForwardCircle', Cmp: FastForwardCircleIcon },
+  { name: 'Feather', Cmp: FeatherIcon },
+  { name: 'FediverseLogo', Cmp: FediverseLogoIcon },
+  { name: 'FigmaLogo', Cmp: FigmaLogoIcon },
+  { name: 'File', Cmp: FileIcon },
+  { name: 'FileArchive', Cmp: FileArchiveIcon },
+  { name: 'FileArrowDown', Cmp: FileArrowDownIcon },
+  { name: 'FileArrowUp', Cmp: FileArrowUpIcon },
+  { name: 'FileAudio', Cmp: FileAudioIcon },
+  { name: 'FileC', Cmp: FileCIcon },
+  { name: 'FileCloud', Cmp: FileCloudIcon },
+  { name: 'FileCode', Cmp: FileCodeIcon },
+  { name: 'FileCpp', Cmp: FileCppIcon },
+  { name: 'FileCSharp', Cmp: FileCSharpIcon },
+  { name: 'FileCss', Cmp: FileCssIcon },
+  { name: 'FileCsv', Cmp: FileCsvIcon },
+  { name: 'FileDashed', Cmp: FileDashedIcon },
+  { name: 'FileDoc', Cmp: FileDocIcon },
+  { name: 'FileHtml', Cmp: FileHtmlIcon },
+  { name: 'FileImage', Cmp: FileImageIcon },
+  { name: 'FileIni', Cmp: FileIniIcon },
+  { name: 'FileJpg', Cmp: FileJpgIcon },
+  { name: 'FileJs', Cmp: FileJsIcon },
+  { name: 'FileJsx', Cmp: FileJsxIcon },
+  { name: 'FileLock', Cmp: FileLockIcon },
+  { name: 'FileMagnifyingGlass', Cmp: FileMagnifyingGlassIcon },
+  { name: 'FileMd', Cmp: FileMdIcon },
+  { name: 'FileMinus', Cmp: FileMinusIcon },
+  { name: 'FilePdf', Cmp: FilePdfIcon },
+  { name: 'FilePlus', Cmp: FilePlusIcon },
+  { name: 'FilePng', Cmp: FilePngIcon },
+  { name: 'FilePpt', Cmp: FilePptIcon },
+  { name: 'FilePy', Cmp: FilePyIcon },
+  { name: 'FileRs', Cmp: FileRsIcon },
+  { name: 'Files', Cmp: FilesIcon },
+  { name: 'FileSql', Cmp: FileSqlIcon },
+  { name: 'FileSvg', Cmp: FileSvgIcon },
+  { name: 'FileText', Cmp: FileTextIcon },
+  { name: 'FileTs', Cmp: FileTsIcon },
+  { name: 'FileTsx', Cmp: FileTsxIcon },
+  { name: 'FileTxt', Cmp: FileTxtIcon },
+  { name: 'FileVideo', Cmp: FileVideoIcon },
+  { name: 'FileVue', Cmp: FileVueIcon },
+  { name: 'FileX', Cmp: FileXIcon },
+  { name: 'FileXls', Cmp: FileXlsIcon },
+  { name: 'FileZip', Cmp: FileZipIcon },
+  { name: 'FilmReel', Cmp: FilmReelIcon },
+  { name: 'FilmScript', Cmp: FilmScriptIcon },
+  { name: 'FilmSlate', Cmp: FilmSlateIcon },
+  { name: 'FilmStrip', Cmp: FilmStripIcon },
+  { name: 'Fingerprint', Cmp: FingerprintIcon },
+  { name: 'FingerprintSimple', Cmp: FingerprintSimpleIcon },
+  { name: 'FinnTheHuman', Cmp: FinnTheHumanIcon },
+  { name: 'Fire', Cmp: FireIcon },
+  { name: 'FireExtinguisher', Cmp: FireExtinguisherIcon },
+  { name: 'FireSimple', Cmp: FireSimpleIcon },
+  { name: 'FireTruck', Cmp: FireTruckIcon },
+  { name: 'FirstAid', Cmp: FirstAidIcon },
+  { name: 'FirstAidKit', Cmp: FirstAidKitIcon },
+  { name: 'Fish', Cmp: FishIcon },
+  { name: 'FishSimple', Cmp: FishSimpleIcon },
+  { name: 'Flag', Cmp: FlagIcon },
+  { name: 'FlagBanner', Cmp: FlagBannerIcon },
+  { name: 'FlagBannerFold', Cmp: FlagBannerFoldIcon },
+  { name: 'FlagCheckered', Cmp: FlagCheckeredIcon },
+  { name: 'FlagPennant', Cmp: FlagPennantIcon },
+  { name: 'Flame', Cmp: FlameIcon },
+  { name: 'Flashlight', Cmp: FlashlightIcon },
+  { name: 'Flask', Cmp: FlaskIcon },
+  { name: 'FlipHorizontal', Cmp: FlipHorizontalIcon },
+  { name: 'FlipVertical', Cmp: FlipVerticalIcon },
+  { name: 'FloppyDisk', Cmp: FloppyDiskIcon },
+  { name: 'FloppyDiskBack', Cmp: FloppyDiskBackIcon },
+  { name: 'FlowArrow', Cmp: FlowArrowIcon },
+  { name: 'Flower', Cmp: FlowerIcon },
+  { name: 'FlowerLotus', Cmp: FlowerLotusIcon },
+  { name: 'FlowerTulip', Cmp: FlowerTulipIcon },
+  { name: 'FlyingSaucer', Cmp: FlyingSaucerIcon },
+  { name: 'Folder', Cmp: FolderIcon },
+  { name: 'FolderDashed', Cmp: FolderDashedIcon },
+  { name: 'FolderLock', Cmp: FolderLockIcon },
+  { name: 'FolderMinus', Cmp: FolderMinusIcon },
+  { name: 'FolderOpen', Cmp: FolderOpenIcon },
+  { name: 'FolderPlus', Cmp: FolderPlusIcon },
+  { name: 'Folders', Cmp: FoldersIcon },
+  { name: 'FolderSimple', Cmp: FolderSimpleIcon },
+  { name: 'FolderSimpleDashed', Cmp: FolderSimpleDashedIcon },
+  { name: 'FolderSimpleLock', Cmp: FolderSimpleLockIcon },
+  { name: 'FolderSimpleMinus', Cmp: FolderSimpleMinusIcon },
+  { name: 'FolderSimplePlus', Cmp: FolderSimplePlusIcon },
+  { name: 'FolderSimpleStar', Cmp: FolderSimpleStarIcon },
+  { name: 'FolderSimpleUser', Cmp: FolderSimpleUserIcon },
+  { name: 'FolderStar', Cmp: FolderStarIcon },
+  { name: 'FolderUser', Cmp: FolderUserIcon },
+  { name: 'Football', Cmp: FootballIcon },
+  { name: 'FootballHelmet', Cmp: FootballHelmetIcon },
+  { name: 'Footprints', Cmp: FootprintsIcon },
+  { name: 'ForkKnife', Cmp: ForkKnifeIcon },
+  { name: 'FourK', Cmp: FourKIcon },
+  { name: 'FrameCorners', Cmp: FrameCornersIcon },
+  { name: 'FramerLogo', Cmp: FramerLogoIcon },
+  { name: 'Function', Cmp: FunctionIcon },
+  { name: 'Funnel', Cmp: FunnelIcon },
+  { name: 'FunnelSimple', Cmp: FunnelSimpleIcon },
+  { name: 'FunnelSimpleX', Cmp: FunnelSimpleXIcon },
+  { name: 'FunnelX', Cmp: FunnelXIcon },
+  { name: 'GameController', Cmp: GameControllerIcon },
+  { name: 'Garage', Cmp: GarageIcon },
+  { name: 'GasCan', Cmp: GasCanIcon },
+  { name: 'GasPump', Cmp: GasPumpIcon },
+  { name: 'Gauge', Cmp: GaugeIcon },
+  { name: 'Gavel', Cmp: GavelIcon },
+  { name: 'Gear', Cmp: GearIcon },
+  { name: 'GearFine', Cmp: GearFineIcon },
+  { name: 'GearSix', Cmp: GearSixIcon },
+  { name: 'GenderFemale', Cmp: GenderFemaleIcon },
+  { name: 'GenderIntersex', Cmp: GenderIntersexIcon },
+  { name: 'GenderMale', Cmp: GenderMaleIcon },
+  { name: 'GenderNeuter', Cmp: GenderNeuterIcon },
+  { name: 'GenderNonbinary', Cmp: GenderNonbinaryIcon },
+  { name: 'GenderTransgender', Cmp: GenderTransgenderIcon },
+  { name: 'Ghost', Cmp: GhostIcon },
+  { name: 'Gif', Cmp: GifIcon },
+  { name: 'Gift', Cmp: GiftIcon },
+  { name: 'GitBranch', Cmp: GitBranchIcon },
+  { name: 'GitCommit', Cmp: GitCommitIcon },
+  { name: 'GitDiff', Cmp: GitDiffIcon },
+  { name: 'GitFork', Cmp: GitForkIcon },
+  { name: 'GithubLogo', Cmp: GithubLogoIcon },
+  { name: 'GitlabLogo', Cmp: GitlabLogoIcon },
+  { name: 'GitlabLogoSimple', Cmp: GitlabLogoSimpleIcon },
+  { name: 'GitMerge', Cmp: GitMergeIcon },
+  { name: 'GitPullRequest', Cmp: GitPullRequestIcon },
+  { name: 'Globe', Cmp: GlobeIcon },
+  { name: 'GlobeHemisphereEast', Cmp: GlobeHemisphereEastIcon },
+  { name: 'GlobeHemisphereWest', Cmp: GlobeHemisphereWestIcon },
+  { name: 'GlobeSimple', Cmp: GlobeSimpleIcon },
+  { name: 'GlobeSimpleX', Cmp: GlobeSimpleXIcon },
+  { name: 'GlobeStand', Cmp: GlobeStandIcon },
+  { name: 'GlobeX', Cmp: GlobeXIcon },
+  { name: 'Goggles', Cmp: GogglesIcon },
+  { name: 'Golf', Cmp: GolfIcon },
+  { name: 'GoodreadsLogo', Cmp: GoodreadsLogoIcon },
+  { name: 'GoogleCardboardLogo', Cmp: GoogleCardboardLogoIcon },
+  { name: 'GoogleChromeLogo', Cmp: GoogleChromeLogoIcon },
+  { name: 'GoogleDriveLogo', Cmp: GoogleDriveLogoIcon },
+  { name: 'GoogleLogo', Cmp: GoogleLogoIcon },
+  { name: 'GooglePhotosLogo', Cmp: GooglePhotosLogoIcon },
+  { name: 'GooglePlayLogo', Cmp: GooglePlayLogoIcon },
+  { name: 'GooglePodcastsLogo', Cmp: GooglePodcastsLogoIcon },
+  { name: 'Gps', Cmp: GpsIcon },
+  { name: 'GpsFix', Cmp: GpsFixIcon },
+  { name: 'GpsSlash', Cmp: GpsSlashIcon },
+  { name: 'Gradient', Cmp: GradientIcon },
+  { name: 'GraduationCap', Cmp: GraduationCapIcon },
+  { name: 'Grains', Cmp: GrainsIcon },
+  { name: 'GrainsSlash', Cmp: GrainsSlashIcon },
+  { name: 'Graph', Cmp: GraphIcon },
+  { name: 'GraphicsCard', Cmp: GraphicsCardIcon },
+  { name: 'GreaterThan', Cmp: GreaterThanIcon },
+  { name: 'GreaterThanOrEqual', Cmp: GreaterThanOrEqualIcon },
+  { name: 'GridFour', Cmp: GridFourIcon },
+  { name: 'GridNine', Cmp: GridNineIcon },
+  { name: 'Guitar', Cmp: GuitarIcon },
+  { name: 'HairDryer', Cmp: HairDryerIcon },
+  { name: 'Hamburger', Cmp: HamburgerIcon },
+  { name: 'Hammer', Cmp: HammerIcon },
+  { name: 'Hand', Cmp: HandIcon },
+  { name: 'HandArrowDown', Cmp: HandArrowDownIcon },
+  { name: 'HandArrowUp', Cmp: HandArrowUpIcon },
+  { name: 'Handbag', Cmp: HandbagIcon },
+  { name: 'HandbagSimple', Cmp: HandbagSimpleIcon },
+  { name: 'HandCoins', Cmp: HandCoinsIcon },
+  { name: 'HandDeposit', Cmp: HandDepositIcon },
+  { name: 'HandEye', Cmp: HandEyeIcon },
+  { name: 'HandFist', Cmp: HandFistIcon },
+  { name: 'HandGrabbing', Cmp: HandGrabbingIcon },
+  { name: 'HandHeart', Cmp: HandHeartIcon },
+  { name: 'HandPalm', Cmp: HandPalmIcon },
+  { name: 'HandPeace', Cmp: HandPeaceIcon },
+  { name: 'HandPointing', Cmp: HandPointingIcon },
+  { name: 'HandsClapping', Cmp: HandsClappingIcon },
+  { name: 'Handshake', Cmp: HandshakeIcon },
+  { name: 'HandSoap', Cmp: HandSoapIcon },
+  { name: 'HandsPraying', Cmp: HandsPrayingIcon },
+  { name: 'HandSwipeLeft', Cmp: HandSwipeLeftIcon },
+  { name: 'HandSwipeRight', Cmp: HandSwipeRightIcon },
+  { name: 'HandTap', Cmp: HandTapIcon },
+  { name: 'HandWaving', Cmp: HandWavingIcon },
+  { name: 'HandWithdraw', Cmp: HandWithdrawIcon },
+  { name: 'HardDrive', Cmp: HardDriveIcon },
+  { name: 'HardDrives', Cmp: HardDrivesIcon },
+  { name: 'HardHat', Cmp: HardHatIcon },
+  { name: 'Hash', Cmp: HashIcon },
+  { name: 'HashStraight', Cmp: HashStraightIcon },
+  { name: 'HeadCircuit', Cmp: HeadCircuitIcon },
+  { name: 'Headlights', Cmp: HeadlightsIcon },
+  { name: 'Headphones', Cmp: HeadphonesIcon },
+  { name: 'Headset', Cmp: HeadsetIcon },
+  { name: 'Heart', Cmp: HeartIcon },
+  { name: 'Heartbeat', Cmp: HeartbeatIcon },
+  { name: 'HeartBreak', Cmp: HeartBreakIcon },
+  { name: 'HeartHalf', Cmp: HeartHalfIcon },
+  { name: 'HeartStraight', Cmp: HeartStraightIcon },
+  { name: 'HeartStraightBreak', Cmp: HeartStraightBreakIcon },
+  { name: 'Hexagon', Cmp: HexagonIcon },
+  { name: 'HighDefinition', Cmp: HighDefinitionIcon },
+  { name: 'HighHeel', Cmp: HighHeelIcon },
+  { name: 'Highlighter', Cmp: HighlighterIcon },
+  { name: 'HighlighterCircle', Cmp: HighlighterCircleIcon },
+  { name: 'Hockey', Cmp: HockeyIcon },
+  { name: 'Hoodie', Cmp: HoodieIcon },
+  { name: 'Horse', Cmp: HorseIcon },
+  { name: 'Hospital', Cmp: HospitalIcon },
+  { name: 'Hourglass', Cmp: HourglassIcon },
+  { name: 'HourglassHigh', Cmp: HourglassHighIcon },
+  { name: 'HourglassLow', Cmp: HourglassLowIcon },
+  { name: 'HourglassMedium', Cmp: HourglassMediumIcon },
+  { name: 'HourglassSimple', Cmp: HourglassSimpleIcon },
+  { name: 'HourglassSimpleHigh', Cmp: HourglassSimpleHighIcon },
+  { name: 'HourglassSimpleLow', Cmp: HourglassSimpleLowIcon },
+  { name: 'HourglassSimpleMedium', Cmp: HourglassSimpleMediumIcon },
+  { name: 'House', Cmp: HouseIcon },
+  { name: 'HouseLine', Cmp: HouseLineIcon },
+  { name: 'HouseSimple', Cmp: HouseSimpleIcon },
+  { name: 'Hurricane', Cmp: HurricaneIcon },
+  { name: 'IceCream', Cmp: IceCreamIcon },
+  { name: 'IdentificationBadge', Cmp: IdentificationBadgeIcon },
+  { name: 'IdentificationCard', Cmp: IdentificationCardIcon },
+  { name: 'Image', Cmp: ImageIcon },
+  { name: 'ImageBroken', Cmp: ImageBrokenIcon },
+  { name: 'Images', Cmp: ImagesIcon },
+  { name: 'ImageSquare', Cmp: ImageSquareIcon },
+  { name: 'ImagesSquare', Cmp: ImagesSquareIcon },
   { name: 'Infinity', Cmp: InfinityIcon },
-  { name: 'Info', Cmp: Info },
-  { name: 'InstagramLogo', Cmp: InstagramLogo },
-  { name: 'Intersect', Cmp: Intersect },
-  { name: 'Intersection', Cmp: Intersection },
-  { name: 'IntersectSquare', Cmp: IntersectSquare },
-  { name: 'IntersectThree', Cmp: IntersectThree },
-  { name: 'Invoice', Cmp: Invoice },
-  { name: 'Island', Cmp: Island },
-  { name: 'Jar', Cmp: Jar },
-  { name: 'JarLabel', Cmp: JarLabel },
-  { name: 'Jeep', Cmp: Jeep },
-  { name: 'Joystick', Cmp: Joystick },
-  { name: 'Kanban', Cmp: Kanban },
-  { name: 'Key', Cmp: Key },
-  { name: 'Keyboard', Cmp: Keyboard },
-  { name: 'Keyhole', Cmp: Keyhole },
-  { name: 'KeyReturn', Cmp: KeyReturn },
-  { name: 'Knife', Cmp: Knife },
-  { name: 'Ladder', Cmp: Ladder },
-  { name: 'LadderSimple', Cmp: LadderSimple },
-  { name: 'Lamp', Cmp: Lamp },
-  { name: 'LampPendant', Cmp: LampPendant },
-  { name: 'Laptop', Cmp: Laptop },
-  { name: 'Lasso', Cmp: Lasso },
-  { name: 'LastfmLogo', Cmp: LastfmLogo },
-  { name: 'Layout', Cmp: Layout },
-  { name: 'Leaf', Cmp: Leaf },
-  { name: 'Lectern', Cmp: Lectern },
-  { name: 'Lego', Cmp: Lego },
-  { name: 'LegoSmiley', Cmp: LegoSmiley },
-  { name: 'LessThan', Cmp: LessThan },
-  { name: 'LessThanOrEqual', Cmp: LessThanOrEqual },
-  { name: 'LetterCircleH', Cmp: LetterCircleH },
-  { name: 'LetterCircleP', Cmp: LetterCircleP },
-  { name: 'LetterCircleV', Cmp: LetterCircleV },
-  { name: 'Lifebuoy', Cmp: Lifebuoy },
-  { name: 'Lightbulb', Cmp: Lightbulb },
-  { name: 'LightbulbFilament', Cmp: LightbulbFilament },
-  { name: 'Lighthouse', Cmp: Lighthouse },
-  { name: 'Lightning', Cmp: Lightning },
-  { name: 'LightningA', Cmp: LightningA },
-  { name: 'LightningSlash', Cmp: LightningSlash },
-  { name: 'LineSegment', Cmp: LineSegment },
-  { name: 'LineSegments', Cmp: LineSegments },
-  { name: 'LineVertical', Cmp: LineVertical },
-  { name: 'Link', Cmp: Link },
-  { name: 'LinkBreak', Cmp: LinkBreak },
-  { name: 'LinkedinLogo', Cmp: LinkedinLogo },
-  { name: 'LinkSimple', Cmp: LinkSimple },
-  { name: 'LinkSimpleBreak', Cmp: LinkSimpleBreak },
-  { name: 'LinkSimpleHorizontal', Cmp: LinkSimpleHorizontal },
-  { name: 'LinkSimpleHorizontalBreak', Cmp: LinkSimpleHorizontalBreak },
-  { name: 'LinktreeLogo', Cmp: LinktreeLogo },
-  { name: 'LinuxLogo', Cmp: LinuxLogo },
-  { name: 'List', Cmp: List },
-  { name: 'ListBullets', Cmp: ListBullets },
-  { name: 'ListChecks', Cmp: ListChecks },
-  { name: 'ListDashes', Cmp: ListDashes },
-  { name: 'ListHeart', Cmp: ListHeart },
-  { name: 'ListMagnifyingGlass', Cmp: ListMagnifyingGlass },
-  { name: 'ListNumbers', Cmp: ListNumbers },
-  { name: 'ListPlus', Cmp: ListPlus },
-  { name: 'ListStar', Cmp: ListStar },
-  { name: 'Lock', Cmp: Lock },
-  { name: 'Lockers', Cmp: Lockers },
-  { name: 'LockKey', Cmp: LockKey },
-  { name: 'LockKeyOpen', Cmp: LockKeyOpen },
-  { name: 'LockLaminated', Cmp: LockLaminated },
-  { name: 'LockLaminatedOpen', Cmp: LockLaminatedOpen },
-  { name: 'LockOpen', Cmp: LockOpen },
-  { name: 'LockSimple', Cmp: LockSimple },
-  { name: 'LockSimpleOpen', Cmp: LockSimpleOpen },
-  { name: 'Log', Cmp: Log },
-  { name: 'MagicWand', Cmp: MagicWand },
-  { name: 'Magnet', Cmp: Magnet },
-  { name: 'MagnetStraight', Cmp: MagnetStraight },
-  { name: 'MagnifyingGlass', Cmp: MagnifyingGlass },
-  { name: 'MagnifyingGlassMinus', Cmp: MagnifyingGlassMinus },
-  { name: 'MagnifyingGlassPlus', Cmp: MagnifyingGlassPlus },
-  { name: 'Mailbox', Cmp: Mailbox },
-  { name: 'MapPin', Cmp: MapPin },
-  { name: 'MapPinArea', Cmp: MapPinArea },
-  { name: 'MapPinLine', Cmp: MapPinLine },
-  { name: 'MapPinPlus', Cmp: MapPinPlus },
-  { name: 'MapPinSimple', Cmp: MapPinSimple },
-  { name: 'MapPinSimpleArea', Cmp: MapPinSimpleArea },
-  { name: 'MapPinSimpleLine', Cmp: MapPinSimpleLine },
-  { name: 'MapTrifold', Cmp: MapTrifold },
-  { name: 'MarkdownLogo', Cmp: MarkdownLogo },
-  { name: 'MarkerCircle', Cmp: MarkerCircle },
-  { name: 'Martini', Cmp: Martini },
-  { name: 'MaskHappy', Cmp: MaskHappy },
-  { name: 'MaskSad', Cmp: MaskSad },
-  { name: 'MastodonLogo', Cmp: MastodonLogo },
-  { name: 'MathOperations', Cmp: MathOperations },
-  { name: 'MatrixLogo', Cmp: MatrixLogo },
-  { name: 'Medal', Cmp: Medal },
-  { name: 'MedalMilitary', Cmp: MedalMilitary },
-  { name: 'MediumLogo', Cmp: MediumLogo },
-  { name: 'Megaphone', Cmp: Megaphone },
-  { name: 'MegaphoneSimple', Cmp: MegaphoneSimple },
-  { name: 'MemberOf', Cmp: MemberOf },
-  { name: 'Memory', Cmp: Memory },
-  { name: 'MessengerLogo', Cmp: MessengerLogo },
-  { name: 'MetaLogo', Cmp: MetaLogo },
-  { name: 'Meteor', Cmp: Meteor },
-  { name: 'Metronome', Cmp: Metronome },
-  { name: 'Microphone', Cmp: Microphone },
-  { name: 'MicrophoneSlash', Cmp: MicrophoneSlash },
-  { name: 'MicrophoneStage', Cmp: MicrophoneStage },
-  { name: 'Microscope', Cmp: Microscope },
-  { name: 'MicrosoftExcelLogo', Cmp: MicrosoftExcelLogo },
-  { name: 'MicrosoftOutlookLogo', Cmp: MicrosoftOutlookLogo },
-  { name: 'MicrosoftPowerpointLogo', Cmp: MicrosoftPowerpointLogo },
-  { name: 'MicrosoftTeamsLogo', Cmp: MicrosoftTeamsLogo },
-  { name: 'MicrosoftWordLogo', Cmp: MicrosoftWordLogo },
-  { name: 'Minus', Cmp: Minus },
-  { name: 'MinusCircle', Cmp: MinusCircle },
-  { name: 'MinusSquare', Cmp: MinusSquare },
-  { name: 'Money', Cmp: Money },
-  { name: 'MoneyWavy', Cmp: MoneyWavy },
-  { name: 'Monitor', Cmp: Monitor },
-  { name: 'MonitorArrowUp', Cmp: MonitorArrowUp },
-  { name: 'MonitorPlay', Cmp: MonitorPlay },
-  { name: 'Moon', Cmp: Moon },
-  { name: 'MoonStars', Cmp: MoonStars },
-  { name: 'Moped', Cmp: Moped },
-  { name: 'MopedFront', Cmp: MopedFront },
-  { name: 'Mosque', Cmp: Mosque },
-  { name: 'Motorcycle', Cmp: Motorcycle },
-  { name: 'Mountains', Cmp: Mountains },
-  { name: 'Mouse', Cmp: Mouse },
-  { name: 'MouseLeftClick', Cmp: MouseLeftClick },
-  { name: 'MouseMiddleClick', Cmp: MouseMiddleClick },
-  { name: 'MouseRightClick', Cmp: MouseRightClick },
-  { name: 'MouseScroll', Cmp: MouseScroll },
-  { name: 'MouseSimple', Cmp: MouseSimple },
-  { name: 'MusicNote', Cmp: MusicNote },
-  { name: 'MusicNotes', Cmp: MusicNotes },
-  { name: 'MusicNoteSimple', Cmp: MusicNoteSimple },
-  { name: 'MusicNotesMinus', Cmp: MusicNotesMinus },
-  { name: 'MusicNotesPlus', Cmp: MusicNotesPlus },
-  { name: 'MusicNotesSimple', Cmp: MusicNotesSimple },
-  { name: 'NavigationArrow', Cmp: NavigationArrow },
-  { name: 'Needle', Cmp: Needle },
-  { name: 'Network', Cmp: Network },
-  { name: 'NetworkSlash', Cmp: NetworkSlash },
-  { name: 'NetworkX', Cmp: NetworkX },
-  { name: 'Newspaper', Cmp: Newspaper },
-  { name: 'NewspaperClipping', Cmp: NewspaperClipping },
-  { name: 'Notches', Cmp: Notches },
-  { name: 'Note', Cmp: Note },
-  { name: 'NoteBlank', Cmp: NoteBlank },
-  { name: 'Notebook', Cmp: Notebook },
-  { name: 'Notepad', Cmp: Notepad },
-  { name: 'NotePencil', Cmp: NotePencil },
-  { name: 'NotEquals', Cmp: NotEquals },
-  { name: 'Notification', Cmp: Notification },
-  { name: 'NotionLogo', Cmp: NotionLogo },
-  { name: 'NotMemberOf', Cmp: NotMemberOf },
-  { name: 'NotSubsetOf', Cmp: NotSubsetOf },
-  { name: 'NotSupersetOf', Cmp: NotSupersetOf },
-  { name: 'NuclearPlant', Cmp: NuclearPlant },
-  { name: 'NumberCircleEight', Cmp: NumberCircleEight },
-  { name: 'NumberCircleFive', Cmp: NumberCircleFive },
-  { name: 'NumberCircleFour', Cmp: NumberCircleFour },
-  { name: 'NumberCircleNine', Cmp: NumberCircleNine },
-  { name: 'NumberCircleOne', Cmp: NumberCircleOne },
-  { name: 'NumberCircleSeven', Cmp: NumberCircleSeven },
-  { name: 'NumberCircleSix', Cmp: NumberCircleSix },
-  { name: 'NumberCircleThree', Cmp: NumberCircleThree },
-  { name: 'NumberCircleTwo', Cmp: NumberCircleTwo },
-  { name: 'NumberCircleZero', Cmp: NumberCircleZero },
-  { name: 'NumberEight', Cmp: NumberEight },
-  { name: 'NumberFive', Cmp: NumberFive },
-  { name: 'NumberFour', Cmp: NumberFour },
-  { name: 'NumberNine', Cmp: NumberNine },
-  { name: 'NumberOne', Cmp: NumberOne },
-  { name: 'NumberSeven', Cmp: NumberSeven },
-  { name: 'NumberSix', Cmp: NumberSix },
-  { name: 'NumberSquareEight', Cmp: NumberSquareEight },
-  { name: 'NumberSquareFive', Cmp: NumberSquareFive },
-  { name: 'NumberSquareFour', Cmp: NumberSquareFour },
-  { name: 'NumberSquareNine', Cmp: NumberSquareNine },
-  { name: 'NumberSquareOne', Cmp: NumberSquareOne },
-  { name: 'NumberSquareSeven', Cmp: NumberSquareSeven },
-  { name: 'NumberSquareSix', Cmp: NumberSquareSix },
-  { name: 'NumberSquareThree', Cmp: NumberSquareThree },
-  { name: 'NumberSquareTwo', Cmp: NumberSquareTwo },
-  { name: 'NumberSquareZero', Cmp: NumberSquareZero },
-  { name: 'NumberThree', Cmp: NumberThree },
-  { name: 'NumberTwo', Cmp: NumberTwo },
-  { name: 'NumberZero', Cmp: NumberZero },
-  { name: 'Numpad', Cmp: Numpad },
-  { name: 'Nut', Cmp: Nut },
-  { name: 'NyTimesLogo', Cmp: NyTimesLogo },
-  { name: 'Octagon', Cmp: Octagon },
-  { name: 'OfficeChair', Cmp: OfficeChair },
-  { name: 'Onigiri', Cmp: Onigiri },
-  { name: 'OpenAiLogo', Cmp: OpenAiLogo },
-  { name: 'Option', Cmp: Option },
-  { name: 'Orange', Cmp: Orange },
-  { name: 'OrangeSlice', Cmp: OrangeSlice },
-  { name: 'Oven', Cmp: Oven },
-  { name: 'Package', Cmp: Package },
-  { name: 'PaintBrush', Cmp: PaintBrush },
-  { name: 'PaintBrushBroad', Cmp: PaintBrushBroad },
-  { name: 'PaintBrushHousehold', Cmp: PaintBrushHousehold },
-  { name: 'PaintBucket', Cmp: PaintBucket },
-  { name: 'PaintRoller', Cmp: PaintRoller },
-  { name: 'Palette', Cmp: Palette },
-  { name: 'Panorama', Cmp: Panorama },
-  { name: 'Pants', Cmp: Pants },
-  { name: 'Paperclip', Cmp: Paperclip },
-  { name: 'PaperclipHorizontal', Cmp: PaperclipHorizontal },
-  { name: 'PaperPlane', Cmp: PaperPlane },
-  { name: 'PaperPlaneRight', Cmp: PaperPlaneRight },
-  { name: 'PaperPlaneTilt', Cmp: PaperPlaneTilt },
-  { name: 'Parachute', Cmp: Parachute },
-  { name: 'Paragraph', Cmp: Paragraph },
-  { name: 'Parallelogram', Cmp: Parallelogram },
-  { name: 'Park', Cmp: Park },
-  { name: 'Password', Cmp: Password },
-  { name: 'Path', Cmp: Path },
-  { name: 'PatreonLogo', Cmp: PatreonLogo },
-  { name: 'Pause', Cmp: Pause },
-  { name: 'PauseCircle', Cmp: PauseCircle },
-  { name: 'PawPrint', Cmp: PawPrint },
-  { name: 'PaypalLogo', Cmp: PaypalLogo },
-  { name: 'Peace', Cmp: Peace },
-  { name: 'Pen', Cmp: Pen },
-  { name: 'Pencil', Cmp: Pencil },
-  { name: 'PencilCircle', Cmp: PencilCircle },
-  { name: 'PencilLine', Cmp: PencilLine },
-  { name: 'PencilRuler', Cmp: PencilRuler },
-  { name: 'PencilSimple', Cmp: PencilSimple },
-  { name: 'PencilSimpleLine', Cmp: PencilSimpleLine },
-  { name: 'PencilSimpleSlash', Cmp: PencilSimpleSlash },
-  { name: 'PencilSlash', Cmp: PencilSlash },
-  { name: 'PenNib', Cmp: PenNib },
-  { name: 'PenNibStraight', Cmp: PenNibStraight },
-  { name: 'Pentagon', Cmp: Pentagon },
-  { name: 'Pentagram', Cmp: Pentagram },
-  { name: 'Pepper', Cmp: Pepper },
-  { name: 'Percent', Cmp: Percent },
-  { name: 'Person', Cmp: Person },
-  { name: 'PersonArmsSpread', Cmp: PersonArmsSpread },
-  { name: 'PersonSimple', Cmp: PersonSimple },
-  { name: 'PersonSimpleBike', Cmp: PersonSimpleBike },
-  { name: 'PersonSimpleCircle', Cmp: PersonSimpleCircle },
-  { name: 'PersonSimpleHike', Cmp: PersonSimpleHike },
-  { name: 'PersonSimpleRun', Cmp: PersonSimpleRun },
-  { name: 'PersonSimpleSki', Cmp: PersonSimpleSki },
-  { name: 'PersonSimpleSnowboard', Cmp: PersonSimpleSnowboard },
-  { name: 'PersonSimpleSwim', Cmp: PersonSimpleSwim },
-  { name: 'PersonSimpleTaiChi', Cmp: PersonSimpleTaiChi },
-  { name: 'PersonSimpleThrow', Cmp: PersonSimpleThrow },
-  { name: 'PersonSimpleWalk', Cmp: PersonSimpleWalk },
-  { name: 'Perspective', Cmp: Perspective },
-  { name: 'Phone', Cmp: Phone },
-  { name: 'PhoneCall', Cmp: PhoneCall },
-  { name: 'PhoneDisconnect', Cmp: PhoneDisconnect },
-  { name: 'PhoneIncoming', Cmp: PhoneIncoming },
-  { name: 'PhoneList', Cmp: PhoneList },
-  { name: 'PhoneOutgoing', Cmp: PhoneOutgoing },
-  { name: 'PhonePause', Cmp: PhonePause },
-  { name: 'PhonePlus', Cmp: PhonePlus },
-  { name: 'PhoneSlash', Cmp: PhoneSlash },
-  { name: 'PhoneTransfer', Cmp: PhoneTransfer },
-  { name: 'PhoneX', Cmp: PhoneX },
-  { name: 'PhosphorLogo', Cmp: PhosphorLogo },
-  { name: 'Pi', Cmp: Pi },
-  { name: 'PianoKeys', Cmp: PianoKeys },
-  { name: 'PicnicTable', Cmp: PicnicTable },
-  { name: 'PictureInPicture', Cmp: PictureInPicture },
-  { name: 'PiggyBank', Cmp: PiggyBank },
-  { name: 'Pill', Cmp: Pill },
-  { name: 'PingPong', Cmp: PingPong },
-  { name: 'PinterestLogo', Cmp: PinterestLogo },
-  { name: 'PintGlass', Cmp: PintGlass },
-  { name: 'Pinwheel', Cmp: Pinwheel },
-  { name: 'Pipe', Cmp: Pipe },
-  { name: 'PipeWrench', Cmp: PipeWrench },
-  { name: 'PixLogo', Cmp: PixLogo },
-  { name: 'Pizza', Cmp: Pizza },
-  { name: 'Placeholder', Cmp: Placeholder },
-  { name: 'Planet', Cmp: Planet },
-  { name: 'Plant', Cmp: Plant },
-  { name: 'Play', Cmp: Play },
-  { name: 'PlayCircle', Cmp: PlayCircle },
-  { name: 'Playlist', Cmp: Playlist },
-  { name: 'PlayPause', Cmp: PlayPause },
-  { name: 'Plug', Cmp: Plug },
-  { name: 'PlugCharging', Cmp: PlugCharging },
-  { name: 'Plugs', Cmp: Plugs },
-  { name: 'PlugsConnected', Cmp: PlugsConnected },
-  { name: 'Plus', Cmp: Plus },
-  { name: 'PlusCircle', Cmp: PlusCircle },
-  { name: 'PlusMinus', Cmp: PlusMinus },
-  { name: 'PlusSquare', Cmp: PlusSquare },
-  { name: 'PokerChip', Cmp: PokerChip },
-  { name: 'PoliceCar', Cmp: PoliceCar },
-  { name: 'Polygon', Cmp: Polygon },
-  { name: 'Popcorn', Cmp: Popcorn },
-  { name: 'Popsicle', Cmp: Popsicle },
-  { name: 'PottedPlant', Cmp: PottedPlant },
-  { name: 'Power', Cmp: Power },
-  { name: 'Prescription', Cmp: Prescription },
-  { name: 'Presentation', Cmp: Presentation },
-  { name: 'PresentationChart', Cmp: PresentationChart },
-  { name: 'Printer', Cmp: Printer },
-  { name: 'Prohibit', Cmp: Prohibit },
-  { name: 'ProhibitInset', Cmp: ProhibitInset },
-  { name: 'ProjectorScreen', Cmp: ProjectorScreen },
-  { name: 'ProjectorScreenChart', Cmp: ProjectorScreenChart },
-  { name: 'Pulse', Cmp: Pulse },
-  { name: 'PushPin', Cmp: PushPin },
-  { name: 'PushPinSimple', Cmp: PushPinSimple },
-  { name: 'PushPinSimpleSlash', Cmp: PushPinSimpleSlash },
-  { name: 'PushPinSlash', Cmp: PushPinSlash },
-  { name: 'PuzzlePiece', Cmp: PuzzlePiece },
-  { name: 'QrCode', Cmp: QrCode },
-  { name: 'Question', Cmp: Question },
-  { name: 'QuestionMark', Cmp: QuestionMark },
-  { name: 'Queue', Cmp: Queue },
-  { name: 'Quotes', Cmp: Quotes },
-  { name: 'Rabbit', Cmp: Rabbit },
-  { name: 'Racquet', Cmp: Racquet },
-  { name: 'Radical', Cmp: Radical },
-  { name: 'Radio', Cmp: Radio },
-  { name: 'Radioactive', Cmp: Radioactive },
-  { name: 'RadioButton', Cmp: RadioButton },
-  { name: 'Rainbow', Cmp: Rainbow },
-  { name: 'RainbowCloud', Cmp: RainbowCloud },
-  { name: 'Ranking', Cmp: Ranking },
-  { name: 'ReadCvLogo', Cmp: ReadCvLogo },
-  { name: 'Receipt', Cmp: Receipt },
-  { name: 'ReceiptX', Cmp: ReceiptX },
-  { name: 'Record', Cmp: Record },
-  { name: 'Rectangle', Cmp: Rectangle },
-  { name: 'RectangleDashed', Cmp: RectangleDashed },
-  { name: 'Recycle', Cmp: Recycle },
-  { name: 'RedditLogo', Cmp: RedditLogo },
-  { name: 'Repeat', Cmp: Repeat },
-  { name: 'RepeatOnce', Cmp: RepeatOnce },
-  { name: 'ReplitLogo', Cmp: ReplitLogo },
-  { name: 'Resize', Cmp: Resize },
-  { name: 'Rewind', Cmp: Rewind },
-  { name: 'RewindCircle', Cmp: RewindCircle },
-  { name: 'RoadHorizon', Cmp: RoadHorizon },
-  { name: 'Robot', Cmp: Robot },
-  { name: 'Rocket', Cmp: Rocket },
-  { name: 'RocketLaunch', Cmp: RocketLaunch },
-  { name: 'Rows', Cmp: Rows },
-  { name: 'RowsPlusBottom', Cmp: RowsPlusBottom },
-  { name: 'RowsPlusTop', Cmp: RowsPlusTop },
-  { name: 'Rss', Cmp: Rss },
-  { name: 'RssSimple', Cmp: RssSimple },
-  { name: 'Rug', Cmp: Rug },
-  { name: 'Ruler', Cmp: Ruler },
-  { name: 'Sailboat', Cmp: Sailboat },
-  { name: 'Scales', Cmp: Scales },
-  { name: 'Scan', Cmp: Scan },
-  { name: 'ScanSmiley', Cmp: ScanSmiley },
-  { name: 'Scissors', Cmp: Scissors },
-  { name: 'Scooter', Cmp: Scooter },
-  { name: 'Screencast', Cmp: Screencast },
-  { name: 'Screwdriver', Cmp: Screwdriver },
-  { name: 'Scribble', Cmp: Scribble },
-  { name: 'ScribbleLoop', Cmp: ScribbleLoop },
-  { name: 'Scroll', Cmp: Scroll },
-  { name: 'Seal', Cmp: Seal },
-  { name: 'SealCheck', Cmp: SealCheck },
-  { name: 'SealPercent', Cmp: SealPercent },
-  { name: 'SealQuestion', Cmp: SealQuestion },
-  { name: 'SealWarning', Cmp: SealWarning },
-  { name: 'Seat', Cmp: Seat },
-  { name: 'Seatbelt', Cmp: Seatbelt },
-  { name: 'SecurityCamera', Cmp: SecurityCamera },
-  { name: 'Selection', Cmp: Selection },
-  { name: 'SelectionAll', Cmp: SelectionAll },
-  { name: 'SelectionBackground', Cmp: SelectionBackground },
-  { name: 'SelectionForeground', Cmp: SelectionForeground },
-  { name: 'SelectionInverse', Cmp: SelectionInverse },
-  { name: 'SelectionPlus', Cmp: SelectionPlus },
-  { name: 'SelectionSlash', Cmp: SelectionSlash },
-  { name: 'Shapes', Cmp: Shapes },
-  { name: 'Share', Cmp: Share },
-  { name: 'ShareFat', Cmp: ShareFat },
-  { name: 'ShareNetwork', Cmp: ShareNetwork },
-  { name: 'Shield', Cmp: Shield },
-  { name: 'ShieldCheck', Cmp: ShieldCheck },
-  { name: 'ShieldCheckered', Cmp: ShieldCheckered },
-  { name: 'ShieldChevron', Cmp: ShieldChevron },
-  { name: 'ShieldPlus', Cmp: ShieldPlus },
-  { name: 'ShieldSlash', Cmp: ShieldSlash },
-  { name: 'ShieldStar', Cmp: ShieldStar },
-  { name: 'ShieldWarning', Cmp: ShieldWarning },
-  { name: 'ShippingContainer', Cmp: ShippingContainer },
-  { name: 'ShirtFolded', Cmp: ShirtFolded },
-  { name: 'ShootingStar', Cmp: ShootingStar },
-  { name: 'ShoppingBag', Cmp: ShoppingBag },
-  { name: 'ShoppingBagOpen', Cmp: ShoppingBagOpen },
-  { name: 'ShoppingCart', Cmp: ShoppingCart },
-  { name: 'ShoppingCartSimple', Cmp: ShoppingCartSimple },
-  { name: 'Shovel', Cmp: Shovel },
-  { name: 'Shower', Cmp: Shower },
-  { name: 'Shrimp', Cmp: Shrimp },
-  { name: 'Shuffle', Cmp: Shuffle },
-  { name: 'ShuffleAngular', Cmp: ShuffleAngular },
-  { name: 'ShuffleSimple', Cmp: ShuffleSimple },
-  { name: 'Sidebar', Cmp: Sidebar },
-  { name: 'SidebarSimple', Cmp: SidebarSimple },
-  { name: 'Sigma', Cmp: Sigma },
-  { name: 'Signature', Cmp: Signature },
-  { name: 'SignIn', Cmp: SignIn },
-  { name: 'SignOut', Cmp: SignOut },
-  { name: 'Signpost', Cmp: Signpost },
-  { name: 'SimCard', Cmp: SimCard },
-  { name: 'Siren', Cmp: Siren },
-  { name: 'SketchLogo', Cmp: SketchLogo },
-  { name: 'SkipBack', Cmp: SkipBack },
-  { name: 'SkipBackCircle', Cmp: SkipBackCircle },
-  { name: 'SkipForward', Cmp: SkipForward },
-  { name: 'SkipForwardCircle', Cmp: SkipForwardCircle },
-  { name: 'Skull', Cmp: Skull },
-  { name: 'SkypeLogo', Cmp: SkypeLogo },
-  { name: 'SlackLogo', Cmp: SlackLogo },
-  { name: 'Sliders', Cmp: Sliders },
-  { name: 'SlidersHorizontal', Cmp: SlidersHorizontal },
-  { name: 'Slideshow', Cmp: Slideshow },
-  { name: 'Smiley', Cmp: Smiley },
-  { name: 'SmileyAngry', Cmp: SmileyAngry },
-  { name: 'SmileyBlank', Cmp: SmileyBlank },
-  { name: 'SmileyMeh', Cmp: SmileyMeh },
-  { name: 'SmileyMelting', Cmp: SmileyMelting },
-  { name: 'SmileyNervous', Cmp: SmileyNervous },
-  { name: 'SmileySad', Cmp: SmileySad },
-  { name: 'SmileySticker', Cmp: SmileySticker },
-  { name: 'SmileyWink', Cmp: SmileyWink },
-  { name: 'SmileyXEyes', Cmp: SmileyXEyes },
-  { name: 'SnapchatLogo', Cmp: SnapchatLogo },
-  { name: 'Sneaker', Cmp: Sneaker },
-  { name: 'SneakerMove', Cmp: SneakerMove },
-  { name: 'Snowflake', Cmp: Snowflake },
-  { name: 'SoccerBall', Cmp: SoccerBall },
-  { name: 'Sock', Cmp: Sock },
-  { name: 'SolarPanel', Cmp: SolarPanel },
-  { name: 'SolarRoof', Cmp: SolarRoof },
-  { name: 'SortAscending', Cmp: SortAscending },
-  { name: 'SortDescending', Cmp: SortDescending },
-  { name: 'SoundcloudLogo', Cmp: SoundcloudLogo },
-  { name: 'Spade', Cmp: Spade },
-  { name: 'Sparkle', Cmp: Sparkle },
-  { name: 'SpeakerHifi', Cmp: SpeakerHifi },
-  { name: 'SpeakerHigh', Cmp: SpeakerHigh },
-  { name: 'SpeakerLow', Cmp: SpeakerLow },
-  { name: 'SpeakerNone', Cmp: SpeakerNone },
-  { name: 'SpeakerSimpleHigh', Cmp: SpeakerSimpleHigh },
-  { name: 'SpeakerSimpleLow', Cmp: SpeakerSimpleLow },
-  { name: 'SpeakerSimpleNone', Cmp: SpeakerSimpleNone },
-  { name: 'SpeakerSimpleSlash', Cmp: SpeakerSimpleSlash },
-  { name: 'SpeakerSimpleX', Cmp: SpeakerSimpleX },
-  { name: 'SpeakerSlash', Cmp: SpeakerSlash },
-  { name: 'SpeakerX', Cmp: SpeakerX },
-  { name: 'Speedometer', Cmp: Speedometer },
-  { name: 'Sphere', Cmp: Sphere },
-  { name: 'Spinner', Cmp: Spinner },
-  { name: 'SpinnerBall', Cmp: SpinnerBall },
-  { name: 'SpinnerGap', Cmp: SpinnerGap },
-  { name: 'Spiral', Cmp: Spiral },
-  { name: 'SplitHorizontal', Cmp: SplitHorizontal },
-  { name: 'SplitVertical', Cmp: SplitVertical },
-  { name: 'SpotifyLogo', Cmp: SpotifyLogo },
-  { name: 'SprayBottle', Cmp: SprayBottle },
-  { name: 'Square', Cmp: Square },
-  { name: 'SquareHalf', Cmp: SquareHalf },
-  { name: 'SquareHalfBottom', Cmp: SquareHalfBottom },
-  { name: 'SquareLogo', Cmp: SquareLogo },
-  { name: 'SquaresFour', Cmp: SquaresFour },
-  { name: 'SquareSplitHorizontal', Cmp: SquareSplitHorizontal },
-  { name: 'SquareSplitVertical', Cmp: SquareSplitVertical },
-  { name: 'Stack', Cmp: Stack },
-  { name: 'StackMinus', Cmp: StackMinus },
-  { name: 'StackOverflowLogo', Cmp: StackOverflowLogo },
-  { name: 'StackPlus', Cmp: StackPlus },
-  { name: 'StackSimple', Cmp: StackSimple },
-  { name: 'Stairs', Cmp: Stairs },
-  { name: 'Stamp', Cmp: Stamp },
-  { name: 'StandardDefinition', Cmp: StandardDefinition },
-  { name: 'Star', Cmp: Star },
-  { name: 'StarAndCrescent', Cmp: StarAndCrescent },
-  { name: 'StarFour', Cmp: StarFour },
-  { name: 'StarHalf', Cmp: StarHalf },
-  { name: 'StarOfDavid', Cmp: StarOfDavid },
-  { name: 'SteamLogo', Cmp: SteamLogo },
-  { name: 'SteeringWheel', Cmp: SteeringWheel },
-  { name: 'Steps', Cmp: Steps },
-  { name: 'Stethoscope', Cmp: Stethoscope },
-  { name: 'Sticker', Cmp: Sticker },
-  { name: 'Stool', Cmp: Stool },
-  { name: 'Stop', Cmp: Stop },
-  { name: 'StopCircle', Cmp: StopCircle },
-  { name: 'Storefront', Cmp: Storefront },
-  { name: 'Strategy', Cmp: Strategy },
-  { name: 'StripeLogo', Cmp: StripeLogo },
-  { name: 'Student', Cmp: Student },
-  { name: 'SubsetOf', Cmp: SubsetOf },
-  { name: 'SubsetProperOf', Cmp: SubsetProperOf },
-  { name: 'Subtitles', Cmp: Subtitles },
-  { name: 'SubtitlesSlash', Cmp: SubtitlesSlash },
-  { name: 'Subtract', Cmp: Subtract },
-  { name: 'SubtractSquare', Cmp: SubtractSquare },
-  { name: 'Subway', Cmp: Subway },
-  { name: 'Suitcase', Cmp: Suitcase },
-  { name: 'SuitcaseRolling', Cmp: SuitcaseRolling },
-  { name: 'SuitcaseSimple', Cmp: SuitcaseSimple },
-  { name: 'Sun', Cmp: Sun },
-  { name: 'SunDim', Cmp: SunDim },
-  { name: 'Sunglasses', Cmp: Sunglasses },
-  { name: 'SunHorizon', Cmp: SunHorizon },
-  { name: 'SupersetOf', Cmp: SupersetOf },
-  { name: 'SupersetProperOf', Cmp: SupersetProperOf },
-  { name: 'Swap', Cmp: Swap },
-  { name: 'Swatches', Cmp: Swatches },
-  { name: 'SwimmingPool', Cmp: SwimmingPool },
-  { name: 'Sword', Cmp: Sword },
-  { name: 'Synagogue', Cmp: Synagogue },
-  { name: 'Syringe', Cmp: Syringe },
-  { name: 'Table', Cmp: Table },
-  { name: 'Tabs', Cmp: Tabs },
-  { name: 'Tag', Cmp: Tag },
-  { name: 'TagChevron', Cmp: TagChevron },
-  { name: 'TagSimple', Cmp: TagSimple },
-  { name: 'Target', Cmp: Target },
-  { name: 'Taxi', Cmp: Taxi },
-  { name: 'TeaBag', Cmp: TeaBag },
-  { name: 'TelegramLogo', Cmp: TelegramLogo },
-  { name: 'Television', Cmp: Television },
-  { name: 'TelevisionSimple', Cmp: TelevisionSimple },
-  { name: 'TennisBall', Cmp: TennisBall },
-  { name: 'Tent', Cmp: Tent },
-  { name: 'Terminal', Cmp: Terminal },
-  { name: 'TerminalWindow', Cmp: TerminalWindow },
-  { name: 'TestTube', Cmp: TestTube },
-  { name: 'TextAa', Cmp: TextAa },
-  { name: 'TextAlignCenter', Cmp: TextAlignCenter },
-  { name: 'TextAlignJustify', Cmp: TextAlignJustify },
-  { name: 'TextAlignLeft', Cmp: TextAlignLeft },
-  { name: 'TextAlignRight', Cmp: TextAlignRight },
-  { name: 'TextAUnderline', Cmp: TextAUnderline },
-  { name: 'TextB', Cmp: TextB },
-  { name: 'Textbox', Cmp: Textbox },
-  { name: 'TextColumns', Cmp: TextColumns },
-  { name: 'TextH', Cmp: TextH },
-  { name: 'TextHFive', Cmp: TextHFive },
-  { name: 'TextHFour', Cmp: TextHFour },
-  { name: 'TextHOne', Cmp: TextHOne },
-  { name: 'TextHSix', Cmp: TextHSix },
-  { name: 'TextHThree', Cmp: TextHThree },
-  { name: 'TextHTwo', Cmp: TextHTwo },
-  { name: 'TextIndent', Cmp: TextIndent },
-  { name: 'TextItalic', Cmp: TextItalic },
-  { name: 'TextOutdent', Cmp: TextOutdent },
-  { name: 'TextStrikethrough', Cmp: TextStrikethrough },
-  { name: 'TextSubscript', Cmp: TextSubscript },
-  { name: 'TextSuperscript', Cmp: TextSuperscript },
-  { name: 'TextT', Cmp: TextT },
-  { name: 'TextTSlash', Cmp: TextTSlash },
-  { name: 'TextUnderline', Cmp: TextUnderline },
-  { name: 'Thermometer', Cmp: Thermometer },
-  { name: 'ThermometerCold', Cmp: ThermometerCold },
-  { name: 'ThermometerHot', Cmp: ThermometerHot },
-  { name: 'ThermometerSimple', Cmp: ThermometerSimple },
-  { name: 'ThreadsLogo', Cmp: ThreadsLogo },
-  { name: 'ThreeD', Cmp: ThreeD },
-  { name: 'ThumbsDown', Cmp: ThumbsDown },
-  { name: 'ThumbsUp', Cmp: ThumbsUp },
-  { name: 'Ticket', Cmp: Ticket },
-  { name: 'TidalLogo', Cmp: TidalLogo },
-  { name: 'TiktokLogo', Cmp: TiktokLogo },
-  { name: 'Tilde', Cmp: Tilde },
-  { name: 'Timer', Cmp: Timer },
-  { name: 'Tipi', Cmp: Tipi },
-  { name: 'TipJar', Cmp: TipJar },
-  { name: 'Tire', Cmp: Tire },
-  { name: 'ToggleLeft', Cmp: ToggleLeft },
-  { name: 'ToggleRight', Cmp: ToggleRight },
-  { name: 'Toilet', Cmp: Toilet },
-  { name: 'ToiletPaper', Cmp: ToiletPaper },
-  { name: 'Toolbox', Cmp: Toolbox },
-  { name: 'Tooth', Cmp: Tooth },
-  { name: 'Tornado', Cmp: Tornado },
-  { name: 'Tote', Cmp: Tote },
-  { name: 'ToteSimple', Cmp: ToteSimple },
-  { name: 'Towel', Cmp: Towel },
-  { name: 'Tractor', Cmp: Tractor },
-  { name: 'Trademark', Cmp: Trademark },
-  { name: 'TrademarkRegistered', Cmp: TrademarkRegistered },
-  { name: 'TrafficCone', Cmp: TrafficCone },
-  { name: 'TrafficSign', Cmp: TrafficSign },
-  { name: 'TrafficSignal', Cmp: TrafficSignal },
-  { name: 'Train', Cmp: Train },
-  { name: 'TrainRegional', Cmp: TrainRegional },
-  { name: 'TrainSimple', Cmp: TrainSimple },
-  { name: 'Tram', Cmp: Tram },
-  { name: 'Translate', Cmp: Translate },
-  { name: 'Trash', Cmp: Trash },
-  { name: 'TrashSimple', Cmp: TrashSimple },
-  { name: 'Tray', Cmp: Tray },
-  { name: 'TrayArrowDown', Cmp: TrayArrowDown },
-  { name: 'TrayArrowUp', Cmp: TrayArrowUp },
-  { name: 'TreasureChest', Cmp: TreasureChest },
-  { name: 'Tree', Cmp: Tree },
-  { name: 'TreeEvergreen', Cmp: TreeEvergreen },
-  { name: 'TreePalm', Cmp: TreePalm },
-  { name: 'TreeStructure', Cmp: TreeStructure },
-  { name: 'TreeView', Cmp: TreeView },
-  { name: 'TrendDown', Cmp: TrendDown },
-  { name: 'TrendUp', Cmp: TrendUp },
-  { name: 'Triangle', Cmp: Triangle },
-  { name: 'TriangleDashed', Cmp: TriangleDashed },
-  { name: 'Trolley', Cmp: Trolley },
-  { name: 'TrolleySuitcase', Cmp: TrolleySuitcase },
-  { name: 'Trophy', Cmp: Trophy },
-  { name: 'Truck', Cmp: Truck },
-  { name: 'TruckTrailer', Cmp: TruckTrailer },
-  { name: 'TShirt', Cmp: TShirt },
-  { name: 'TumblrLogo', Cmp: TumblrLogo },
-  { name: 'TwitchLogo', Cmp: TwitchLogo },
-  { name: 'TwitterLogo', Cmp: TwitterLogo },
-  { name: 'Umbrella', Cmp: Umbrella },
-  { name: 'UmbrellaSimple', Cmp: UmbrellaSimple },
-  { name: 'Union', Cmp: Union },
-  { name: 'Unite', Cmp: Unite },
-  { name: 'UniteSquare', Cmp: UniteSquare },
-  { name: 'Upload', Cmp: Upload },
-  { name: 'UploadSimple', Cmp: UploadSimple },
-  { name: 'Usb', Cmp: Usb },
-  { name: 'User', Cmp: User },
-  { name: 'UserCheck', Cmp: UserCheck },
-  { name: 'UserCircle', Cmp: UserCircle },
-  { name: 'UserCircleCheck', Cmp: UserCircleCheck },
-  { name: 'UserCircleDashed', Cmp: UserCircleDashed },
-  { name: 'UserCircleGear', Cmp: UserCircleGear },
-  { name: 'UserCircleMinus', Cmp: UserCircleMinus },
-  { name: 'UserCirclePlus', Cmp: UserCirclePlus },
-  { name: 'UserFocus', Cmp: UserFocus },
-  { name: 'UserGear', Cmp: UserGear },
-  { name: 'UserList', Cmp: UserList },
-  { name: 'UserMinus', Cmp: UserMinus },
-  { name: 'UserPlus', Cmp: UserPlus },
-  { name: 'UserRectangle', Cmp: UserRectangle },
-  { name: 'Users', Cmp: Users },
-  { name: 'UsersFour', Cmp: UsersFour },
-  { name: 'UserSound', Cmp: UserSound },
-  { name: 'UserSquare', Cmp: UserSquare },
-  { name: 'UsersThree', Cmp: UsersThree },
-  { name: 'UserSwitch', Cmp: UserSwitch },
-  { name: 'Van', Cmp: Van },
-  { name: 'Vault', Cmp: Vault },
-  { name: 'VectorThree', Cmp: VectorThree },
-  { name: 'VectorTwo', Cmp: VectorTwo },
-  { name: 'Vibrate', Cmp: Vibrate },
-  { name: 'Video', Cmp: Video },
-  { name: 'VideoCamera', Cmp: VideoCamera },
-  { name: 'VideoCameraSlash', Cmp: VideoCameraSlash },
-  { name: 'VideoConference', Cmp: VideoConference },
-  { name: 'Vignette', Cmp: Vignette },
-  { name: 'VinylRecord', Cmp: VinylRecord },
-  { name: 'VirtualReality', Cmp: VirtualReality },
-  { name: 'Virus', Cmp: Virus },
-  { name: 'Visor', Cmp: Visor },
-  { name: 'Voicemail', Cmp: Voicemail },
-  { name: 'Volleyball', Cmp: Volleyball },
-  { name: 'Wall', Cmp: Wall },
-  { name: 'Wallet', Cmp: Wallet },
-  { name: 'Warehouse', Cmp: Warehouse },
-  { name: 'Warning', Cmp: Warning },
-  { name: 'WarningCircle', Cmp: WarningCircle },
-  { name: 'WarningDiamond', Cmp: WarningDiamond },
-  { name: 'WarningOctagon', Cmp: WarningOctagon },
-  { name: 'WashingMachine', Cmp: WashingMachine },
-  { name: 'Watch', Cmp: Watch },
-  { name: 'Waveform', Cmp: Waveform },
-  { name: 'WaveformSlash', Cmp: WaveformSlash },
-  { name: 'Waves', Cmp: Waves },
-  { name: 'WaveSawtooth', Cmp: WaveSawtooth },
-  { name: 'WaveSine', Cmp: WaveSine },
-  { name: 'WaveSquare', Cmp: WaveSquare },
-  { name: 'WaveTriangle', Cmp: WaveTriangle },
-  { name: 'Webcam', Cmp: Webcam },
-  { name: 'WebcamSlash', Cmp: WebcamSlash },
-  { name: 'WebhooksLogo', Cmp: WebhooksLogo },
-  { name: 'WechatLogo', Cmp: WechatLogo },
-  { name: 'WhatsappLogo', Cmp: WhatsappLogo },
-  { name: 'Wheelchair', Cmp: Wheelchair },
-  { name: 'WheelchairMotion', Cmp: WheelchairMotion },
-  { name: 'WifiHigh', Cmp: WifiHigh },
-  { name: 'WifiLow', Cmp: WifiLow },
-  { name: 'WifiMedium', Cmp: WifiMedium },
-  { name: 'WifiNone', Cmp: WifiNone },
-  { name: 'WifiSlash', Cmp: WifiSlash },
-  { name: 'WifiX', Cmp: WifiX },
-  { name: 'Wind', Cmp: Wind },
-  { name: 'Windmill', Cmp: Windmill },
-  { name: 'WindowsLogo', Cmp: WindowsLogo },
-  { name: 'Wine', Cmp: Wine },
-  { name: 'Wrench', Cmp: Wrench },
-  { name: 'X', Cmp: X },
-  { name: 'XCircle', Cmp: XCircle },
-  { name: 'XLogo', Cmp: XLogo },
-  { name: 'XSquare', Cmp: XSquare },
-  { name: 'Yarn', Cmp: Yarn },
-  { name: 'YinYang', Cmp: YinYang },
-  { name: 'YoutubeLogo', Cmp: YoutubeLogo },
+  { name: 'Info', Cmp: InfoIcon },
+  { name: 'InstagramLogo', Cmp: InstagramLogoIcon },
+  { name: 'Intersect', Cmp: IntersectIcon },
+  { name: 'Intersection', Cmp: IntersectionIcon },
+  { name: 'IntersectSquare', Cmp: IntersectSquareIcon },
+  { name: 'IntersectThree', Cmp: IntersectThreeIcon },
+  { name: 'Invoice', Cmp: InvoiceIcon },
+  { name: 'Island', Cmp: IslandIcon },
+  { name: 'Jar', Cmp: JarIcon },
+  { name: 'JarLabel', Cmp: JarLabelIcon },
+  { name: 'Jeep', Cmp: JeepIcon },
+  { name: 'Joystick', Cmp: JoystickIcon },
+  { name: 'Kanban', Cmp: KanbanIcon },
+  { name: 'Key', Cmp: KeyIcon },
+  { name: 'Keyboard', Cmp: KeyboardIcon },
+  { name: 'Keyhole', Cmp: KeyholeIcon },
+  { name: 'KeyReturn', Cmp: KeyReturnIcon },
+  { name: 'Knife', Cmp: KnifeIcon },
+  { name: 'Ladder', Cmp: LadderIcon },
+  { name: 'LadderSimple', Cmp: LadderSimpleIcon },
+  { name: 'Lamp', Cmp: LampIcon },
+  { name: 'LampPendant', Cmp: LampPendantIcon },
+  { name: 'Laptop', Cmp: LaptopIcon },
+  { name: 'Lasso', Cmp: LassoIcon },
+  { name: 'LastfmLogo', Cmp: LastfmLogoIcon },
+  { name: 'Layout', Cmp: LayoutIcon },
+  { name: 'Leaf', Cmp: LeafIcon },
+  { name: 'Lectern', Cmp: LecternIcon },
+  { name: 'Lego', Cmp: LegoIcon },
+  { name: 'LegoSmiley', Cmp: LegoSmileyIcon },
+  { name: 'LessThan', Cmp: LessThanIcon },
+  { name: 'LessThanOrEqual', Cmp: LessThanOrEqualIcon },
+  { name: 'LetterCircleH', Cmp: LetterCircleHIcon },
+  { name: 'LetterCircleP', Cmp: LetterCirclePIcon },
+  { name: 'LetterCircleV', Cmp: LetterCircleVIcon },
+  { name: 'Lifebuoy', Cmp: LifebuoyIcon },
+  { name: 'Lightbulb', Cmp: LightbulbIcon },
+  { name: 'LightbulbFilament', Cmp: LightbulbFilamentIcon },
+  { name: 'Lighthouse', Cmp: LighthouseIcon },
+  { name: 'Lightning', Cmp: LightningIcon },
+  { name: 'LightningA', Cmp: LightningAIcon },
+  { name: 'LightningSlash', Cmp: LightningSlashIcon },
+  { name: 'LineSegment', Cmp: LineSegmentIcon },
+  { name: 'LineSegments', Cmp: LineSegmentsIcon },
+  { name: 'LineVertical', Cmp: LineVerticalIcon },
+  { name: 'Link', Cmp: LinkIcon },
+  { name: 'LinkBreak', Cmp: LinkBreakIcon },
+  { name: 'LinkedinLogo', Cmp: LinkedinLogoIcon },
+  { name: 'LinkSimple', Cmp: LinkSimpleIcon },
+  { name: 'LinkSimpleBreak', Cmp: LinkSimpleBreakIcon },
+  { name: 'LinkSimpleHorizontal', Cmp: LinkSimpleHorizontalIcon },
+  { name: 'LinkSimpleHorizontalBreak', Cmp: LinkSimpleHorizontalBreakIcon },
+  { name: 'LinktreeLogo', Cmp: LinktreeLogoIcon },
+  { name: 'LinuxLogo', Cmp: LinuxLogoIcon },
+  { name: 'List', Cmp: ListIcon },
+  { name: 'ListBullets', Cmp: ListBulletsIcon },
+  { name: 'ListChecks', Cmp: ListChecksIcon },
+  { name: 'ListDashes', Cmp: ListDashesIcon },
+  { name: 'ListHeart', Cmp: ListHeartIcon },
+  { name: 'ListMagnifyingGlass', Cmp: ListMagnifyingGlassIcon },
+  { name: 'ListNumbers', Cmp: ListNumbersIcon },
+  { name: 'ListPlus', Cmp: ListPlusIcon },
+  { name: 'ListStar', Cmp: ListStarIcon },
+  { name: 'Lock', Cmp: LockIcon },
+  { name: 'Lockers', Cmp: LockersIcon },
+  { name: 'LockKey', Cmp: LockKeyIcon },
+  { name: 'LockKeyOpen', Cmp: LockKeyOpenIcon },
+  { name: 'LockLaminated', Cmp: LockLaminatedIcon },
+  { name: 'LockLaminatedOpen', Cmp: LockLaminatedOpenIcon },
+  { name: 'LockOpen', Cmp: LockOpenIcon },
+  { name: 'LockSimple', Cmp: LockSimpleIcon },
+  { name: 'LockSimpleOpen', Cmp: LockSimpleOpenIcon },
+  { name: 'Log', Cmp: LogIcon },
+  { name: 'MagicWand', Cmp: MagicWandIcon },
+  { name: 'Magnet', Cmp: MagnetIcon },
+  { name: 'MagnetStraight', Cmp: MagnetStraightIcon },
+  { name: 'MagnifyingGlass', Cmp: MagnifyingGlassIcon },
+  { name: 'MagnifyingGlassMinus', Cmp: MagnifyingGlassMinusIcon },
+  { name: 'MagnifyingGlassPlus', Cmp: MagnifyingGlassPlusIcon },
+  { name: 'Mailbox', Cmp: MailboxIcon },
+  { name: 'MapPin', Cmp: MapPinIcon },
+  { name: 'MapPinArea', Cmp: MapPinAreaIcon },
+  { name: 'MapPinLine', Cmp: MapPinLineIcon },
+  { name: 'MapPinPlus', Cmp: MapPinPlusIcon },
+  { name: 'MapPinSimple', Cmp: MapPinSimpleIcon },
+  { name: 'MapPinSimpleArea', Cmp: MapPinSimpleAreaIcon },
+  { name: 'MapPinSimpleLine', Cmp: MapPinSimpleLineIcon },
+  { name: 'MapTrifold', Cmp: MapTrifoldIcon },
+  { name: 'MarkdownLogo', Cmp: MarkdownLogoIcon },
+  { name: 'MarkerCircle', Cmp: MarkerCircleIcon },
+  { name: 'Martini', Cmp: MartiniIcon },
+  { name: 'MaskHappy', Cmp: MaskHappyIcon },
+  { name: 'MaskSad', Cmp: MaskSadIcon },
+  { name: 'MastodonLogo', Cmp: MastodonLogoIcon },
+  { name: 'MathOperations', Cmp: MathOperationsIcon },
+  { name: 'MatrixLogo', Cmp: MatrixLogoIcon },
+  { name: 'Medal', Cmp: MedalIcon },
+  { name: 'MedalMilitary', Cmp: MedalMilitaryIcon },
+  { name: 'MediumLogo', Cmp: MediumLogoIcon },
+  { name: 'Megaphone', Cmp: MegaphoneIcon },
+  { name: 'MegaphoneSimple', Cmp: MegaphoneSimpleIcon },
+  { name: 'MemberOf', Cmp: MemberOfIcon },
+  { name: 'Memory', Cmp: MemoryIcon },
+  { name: 'MessengerLogo', Cmp: MessengerLogoIcon },
+  { name: 'MetaLogo', Cmp: MetaLogoIcon },
+  { name: 'Meteor', Cmp: MeteorIcon },
+  { name: 'Metronome', Cmp: MetronomeIcon },
+  { name: 'Microphone', Cmp: MicrophoneIcon },
+  { name: 'MicrophoneSlash', Cmp: MicrophoneSlashIcon },
+  { name: 'MicrophoneStage', Cmp: MicrophoneStageIcon },
+  { name: 'Microscope', Cmp: MicroscopeIcon },
+  { name: 'MicrosoftExcelLogo', Cmp: MicrosoftExcelLogoIcon },
+  { name: 'MicrosoftOutlookLogo', Cmp: MicrosoftOutlookLogoIcon },
+  { name: 'MicrosoftPowerpointLogo', Cmp: MicrosoftPowerpointLogoIcon },
+  { name: 'MicrosoftTeamsLogo', Cmp: MicrosoftTeamsLogoIcon },
+  { name: 'MicrosoftWordLogo', Cmp: MicrosoftWordLogoIcon },
+  { name: 'Minus', Cmp: MinusIcon },
+  { name: 'MinusCircle', Cmp: MinusCircleIcon },
+  { name: 'MinusSquare', Cmp: MinusSquareIcon },
+  { name: 'Money', Cmp: MoneyIcon },
+  { name: 'MoneyWavy', Cmp: MoneyWavyIcon },
+  { name: 'Monitor', Cmp: MonitorIcon },
+  { name: 'MonitorArrowUp', Cmp: MonitorArrowUpIcon },
+  { name: 'MonitorPlay', Cmp: MonitorPlayIcon },
+  { name: 'Moon', Cmp: MoonIcon },
+  { name: 'MoonStars', Cmp: MoonStarsIcon },
+  { name: 'Moped', Cmp: MopedIcon },
+  { name: 'MopedFront', Cmp: MopedFrontIcon },
+  { name: 'Mosque', Cmp: MosqueIcon },
+  { name: 'Motorcycle', Cmp: MotorcycleIcon },
+  { name: 'Mountains', Cmp: MountainsIcon },
+  { name: 'Mouse', Cmp: MouseIcon },
+  { name: 'MouseLeftClick', Cmp: MouseLeftClickIcon },
+  { name: 'MouseMiddleClick', Cmp: MouseMiddleClickIcon },
+  { name: 'MouseRightClick', Cmp: MouseRightClickIcon },
+  { name: 'MouseScroll', Cmp: MouseScrollIcon },
+  { name: 'MouseSimple', Cmp: MouseSimpleIcon },
+  { name: 'MusicNote', Cmp: MusicNoteIcon },
+  { name: 'MusicNotes', Cmp: MusicNotesIcon },
+  { name: 'MusicNoteSimple', Cmp: MusicNoteSimpleIcon },
+  { name: 'MusicNotesMinus', Cmp: MusicNotesMinusIcon },
+  { name: 'MusicNotesPlus', Cmp: MusicNotesPlusIcon },
+  { name: 'MusicNotesSimple', Cmp: MusicNotesSimpleIcon },
+  { name: 'NavigationArrow', Cmp: NavigationArrowIcon },
+  { name: 'Needle', Cmp: NeedleIcon },
+  { name: 'Network', Cmp: NetworkIcon },
+  { name: 'NetworkSlash', Cmp: NetworkSlashIcon },
+  { name: 'NetworkX', Cmp: NetworkXIcon },
+  { name: 'Newspaper', Cmp: NewspaperIcon },
+  { name: 'NewspaperClipping', Cmp: NewspaperClippingIcon },
+  { name: 'Notches', Cmp: NotchesIcon },
+  { name: 'Note', Cmp: NoteIcon },
+  { name: 'NoteBlank', Cmp: NoteBlankIcon },
+  { name: 'Notebook', Cmp: NotebookIcon },
+  { name: 'Notepad', Cmp: NotepadIcon },
+  { name: 'NotePencil', Cmp: NotePencilIcon },
+  { name: 'NotEquals', Cmp: NotEqualsIcon },
+  { name: 'Notification', Cmp: NotificationIcon },
+  { name: 'NotionLogo', Cmp: NotionLogoIcon },
+  { name: 'NotMemberOf', Cmp: NotMemberOfIcon },
+  { name: 'NotSubsetOf', Cmp: NotSubsetOfIcon },
+  { name: 'NotSupersetOf', Cmp: NotSupersetOfIcon },
+  { name: 'NuclearPlant', Cmp: NuclearPlantIcon },
+  { name: 'NumberCircleEight', Cmp: NumberCircleEightIcon },
+  { name: 'NumberCircleFive', Cmp: NumberCircleFiveIcon },
+  { name: 'NumberCircleFour', Cmp: NumberCircleFourIcon },
+  { name: 'NumberCircleNine', Cmp: NumberCircleNineIcon },
+  { name: 'NumberCircleOne', Cmp: NumberCircleOneIcon },
+  { name: 'NumberCircleSeven', Cmp: NumberCircleSevenIcon },
+  { name: 'NumberCircleSix', Cmp: NumberCircleSixIcon },
+  { name: 'NumberCircleThree', Cmp: NumberCircleThreeIcon },
+  { name: 'NumberCircleTwo', Cmp: NumberCircleTwoIcon },
+  { name: 'NumberCircleZero', Cmp: NumberCircleZeroIcon },
+  { name: 'NumberEight', Cmp: NumberEightIcon },
+  { name: 'NumberFive', Cmp: NumberFiveIcon },
+  { name: 'NumberFour', Cmp: NumberFourIcon },
+  { name: 'NumberNine', Cmp: NumberNineIcon },
+  { name: 'NumberOne', Cmp: NumberOneIcon },
+  { name: 'NumberSeven', Cmp: NumberSevenIcon },
+  { name: 'NumberSix', Cmp: NumberSixIcon },
+  { name: 'NumberSquareEight', Cmp: NumberSquareEightIcon },
+  { name: 'NumberSquareFive', Cmp: NumberSquareFiveIcon },
+  { name: 'NumberSquareFour', Cmp: NumberSquareFourIcon },
+  { name: 'NumberSquareNine', Cmp: NumberSquareNineIcon },
+  { name: 'NumberSquareOne', Cmp: NumberSquareOneIcon },
+  { name: 'NumberSquareSeven', Cmp: NumberSquareSevenIcon },
+  { name: 'NumberSquareSix', Cmp: NumberSquareSixIcon },
+  { name: 'NumberSquareThree', Cmp: NumberSquareThreeIcon },
+  { name: 'NumberSquareTwo', Cmp: NumberSquareTwoIcon },
+  { name: 'NumberSquareZero', Cmp: NumberSquareZeroIcon },
+  { name: 'NumberThree', Cmp: NumberThreeIcon },
+  { name: 'NumberTwo', Cmp: NumberTwoIcon },
+  { name: 'NumberZero', Cmp: NumberZeroIcon },
+  { name: 'Numpad', Cmp: NumpadIcon },
+  { name: 'Nut', Cmp: NutIcon },
+  { name: 'NyTimesLogo', Cmp: NyTimesLogoIcon },
+  { name: 'Octagon', Cmp: OctagonIcon },
+  { name: 'OfficeChair', Cmp: OfficeChairIcon },
+  { name: 'Onigiri', Cmp: OnigiriIcon },
+  { name: 'OpenAiLogo', Cmp: OpenAiLogoIcon },
+  { name: 'Option', Cmp: OptionIcon },
+  { name: 'Orange', Cmp: OrangeIcon },
+  { name: 'OrangeSlice', Cmp: OrangeSliceIcon },
+  { name: 'Oven', Cmp: OvenIcon },
+  { name: 'Package', Cmp: PackageIcon },
+  { name: 'PaintBrush', Cmp: PaintBrushIcon },
+  { name: 'PaintBrushBroad', Cmp: PaintBrushBroadIcon },
+  { name: 'PaintBrushHousehold', Cmp: PaintBrushHouseholdIcon },
+  { name: 'PaintBucket', Cmp: PaintBucketIcon },
+  { name: 'PaintRoller', Cmp: PaintRollerIcon },
+  { name: 'Palette', Cmp: PaletteIcon },
+  { name: 'Panorama', Cmp: PanoramaIcon },
+  { name: 'Pants', Cmp: PantsIcon },
+  { name: 'Paperclip', Cmp: PaperclipIcon },
+  { name: 'PaperclipHorizontal', Cmp: PaperclipHorizontalIcon },
+  { name: 'PaperPlane', Cmp: PaperPlaneIcon },
+  { name: 'PaperPlaneRight', Cmp: PaperPlaneRightIcon },
+  { name: 'PaperPlaneTilt', Cmp: PaperPlaneTiltIcon },
+  { name: 'Parachute', Cmp: ParachuteIcon },
+  { name: 'Paragraph', Cmp: ParagraphIcon },
+  { name: 'Parallelogram', Cmp: ParallelogramIcon },
+  { name: 'Park', Cmp: ParkIcon },
+  { name: 'Password', Cmp: PasswordIcon },
+  { name: 'Path', Cmp: PathIcon },
+  { name: 'PatreonLogo', Cmp: PatreonLogoIcon },
+  { name: 'Pause', Cmp: PauseIcon },
+  { name: 'PauseCircle', Cmp: PauseCircleIcon },
+  { name: 'PawPrint', Cmp: PawPrintIcon },
+  { name: 'PaypalLogo', Cmp: PaypalLogoIcon },
+  { name: 'Peace', Cmp: PeaceIcon },
+  { name: 'Pen', Cmp: PenIcon },
+  { name: 'Pencil', Cmp: PencilIcon },
+  { name: 'PencilCircle', Cmp: PencilCircleIcon },
+  { name: 'PencilLine', Cmp: PencilLineIcon },
+  { name: 'PencilRuler', Cmp: PencilRulerIcon },
+  { name: 'PencilSimple', Cmp: PencilSimpleIcon },
+  { name: 'PencilSimpleLine', Cmp: PencilSimpleLineIcon },
+  { name: 'PencilSimpleSlash', Cmp: PencilSimpleSlashIcon },
+  { name: 'PencilSlash', Cmp: PencilSlashIcon },
+  { name: 'PenNib', Cmp: PenNibIcon },
+  { name: 'PenNibStraight', Cmp: PenNibStraightIcon },
+  { name: 'Pentagon', Cmp: PentagonIcon },
+  { name: 'Pentagram', Cmp: PentagramIcon },
+  { name: 'Pepper', Cmp: PepperIcon },
+  { name: 'Percent', Cmp: PercentIcon },
+  { name: 'Person', Cmp: PersonIcon },
+  { name: 'PersonArmsSpread', Cmp: PersonArmsSpreadIcon },
+  { name: 'PersonSimple', Cmp: PersonSimpleIcon },
+  { name: 'PersonSimpleBike', Cmp: PersonSimpleBikeIcon },
+  { name: 'PersonSimpleCircle', Cmp: PersonSimpleCircleIcon },
+  { name: 'PersonSimpleHike', Cmp: PersonSimpleHikeIcon },
+  { name: 'PersonSimpleRun', Cmp: PersonSimpleRunIcon },
+  { name: 'PersonSimpleSki', Cmp: PersonSimpleSkiIcon },
+  { name: 'PersonSimpleSnowboard', Cmp: PersonSimpleSnowboardIcon },
+  { name: 'PersonSimpleSwim', Cmp: PersonSimpleSwimIcon },
+  { name: 'PersonSimpleTaiChi', Cmp: PersonSimpleTaiChiIcon },
+  { name: 'PersonSimpleThrow', Cmp: PersonSimpleThrowIcon },
+  { name: 'PersonSimpleWalk', Cmp: PersonSimpleWalkIcon },
+  { name: 'Perspective', Cmp: PerspectiveIcon },
+  { name: 'Phone', Cmp: PhoneIcon },
+  { name: 'PhoneCall', Cmp: PhoneCallIcon },
+  { name: 'PhoneDisconnect', Cmp: PhoneDisconnectIcon },
+  { name: 'PhoneIncoming', Cmp: PhoneIncomingIcon },
+  { name: 'PhoneList', Cmp: PhoneListIcon },
+  { name: 'PhoneOutgoing', Cmp: PhoneOutgoingIcon },
+  { name: 'PhonePause', Cmp: PhonePauseIcon },
+  { name: 'PhonePlus', Cmp: PhonePlusIcon },
+  { name: 'PhoneSlash', Cmp: PhoneSlashIcon },
+  { name: 'PhoneTransfer', Cmp: PhoneTransferIcon },
+  { name: 'PhoneX', Cmp: PhoneXIcon },
+  { name: 'PhosphorLogo', Cmp: PhosphorLogoIcon },
+  { name: 'Pi', Cmp: PiIcon },
+  { name: 'PianoKeys', Cmp: PianoKeysIcon },
+  { name: 'PicnicTable', Cmp: PicnicTableIcon },
+  { name: 'PictureInPicture', Cmp: PictureInPictureIcon },
+  { name: 'PiggyBank', Cmp: PiggyBankIcon },
+  { name: 'Pill', Cmp: PillIcon },
+  { name: 'PingPong', Cmp: PingPongIcon },
+  { name: 'PinterestLogo', Cmp: PinterestLogoIcon },
+  { name: 'PintGlass', Cmp: PintGlassIcon },
+  { name: 'Pinwheel', Cmp: PinwheelIcon },
+  { name: 'Pipe', Cmp: PipeIcon },
+  { name: 'PipeWrench', Cmp: PipeWrenchIcon },
+  { name: 'PixLogo', Cmp: PixLogoIcon },
+  { name: 'Pizza', Cmp: PizzaIcon },
+  { name: 'Placeholder', Cmp: PlaceholderIcon },
+  { name: 'Planet', Cmp: PlanetIcon },
+  { name: 'Plant', Cmp: PlantIcon },
+  { name: 'Play', Cmp: PlayIcon },
+  { name: 'PlayCircle', Cmp: PlayCircleIcon },
+  { name: 'Playlist', Cmp: PlaylistIcon },
+  { name: 'PlayPause', Cmp: PlayPauseIcon },
+  { name: 'Plug', Cmp: PlugIcon },
+  { name: 'PlugCharging', Cmp: PlugChargingIcon },
+  { name: 'Plugs', Cmp: PlugsIcon },
+  { name: 'PlugsConnected', Cmp: PlugsConnectedIcon },
+  { name: 'Plus', Cmp: PlusIcon },
+  { name: 'PlusCircle', Cmp: PlusCircleIcon },
+  { name: 'PlusMinus', Cmp: PlusMinusIcon },
+  { name: 'PlusSquare', Cmp: PlusSquareIcon },
+  { name: 'PokerChip', Cmp: PokerChipIcon },
+  { name: 'PoliceCar', Cmp: PoliceCarIcon },
+  { name: 'Polygon', Cmp: PolygonIcon },
+  { name: 'Popcorn', Cmp: PopcornIcon },
+  { name: 'Popsicle', Cmp: PopsicleIcon },
+  { name: 'PottedPlant', Cmp: PottedPlantIcon },
+  { name: 'Power', Cmp: PowerIcon },
+  { name: 'Prescription', Cmp: PrescriptionIcon },
+  { name: 'Presentation', Cmp: PresentationIcon },
+  { name: 'PresentationChart', Cmp: PresentationChartIcon },
+  { name: 'Printer', Cmp: PrinterIcon },
+  { name: 'Prohibit', Cmp: ProhibitIcon },
+  { name: 'ProhibitInset', Cmp: ProhibitInsetIcon },
+  { name: 'ProjectorScreen', Cmp: ProjectorScreenIcon },
+  { name: 'ProjectorScreenChart', Cmp: ProjectorScreenChartIcon },
+  { name: 'Pulse', Cmp: PulseIcon },
+  { name: 'PushPin', Cmp: PushPinIcon },
+  { name: 'PushPinSimple', Cmp: PushPinSimpleIcon },
+  { name: 'PushPinSimpleSlash', Cmp: PushPinSimpleSlashIcon },
+  { name: 'PushPinSlash', Cmp: PushPinSlashIcon },
+  { name: 'PuzzlePiece', Cmp: PuzzlePieceIcon },
+  { name: 'QrCode', Cmp: QrCodeIcon },
+  { name: 'Question', Cmp: QuestionIcon },
+  { name: 'QuestionMark', Cmp: QuestionMarkIcon },
+  { name: 'Queue', Cmp: QueueIcon },
+  { name: 'Quotes', Cmp: QuotesIcon },
+  { name: 'Rabbit', Cmp: RabbitIcon },
+  { name: 'Racquet', Cmp: RacquetIcon },
+  { name: 'Radical', Cmp: RadicalIcon },
+  { name: 'Radio', Cmp: RadioIcon },
+  { name: 'Radioactive', Cmp: RadioactiveIcon },
+  { name: 'RadioButton', Cmp: RadioButtonIcon },
+  { name: 'Rainbow', Cmp: RainbowIcon },
+  { name: 'RainbowCloud', Cmp: RainbowCloudIcon },
+  { name: 'Ranking', Cmp: RankingIcon },
+  { name: 'ReadCvLogo', Cmp: ReadCvLogoIcon },
+  { name: 'Receipt', Cmp: ReceiptIcon },
+  { name: 'ReceiptX', Cmp: ReceiptXIcon },
+  { name: 'Record', Cmp: RecordIcon },
+  { name: 'Rectangle', Cmp: RectangleIcon },
+  { name: 'RectangleDashed', Cmp: RectangleDashedIcon },
+  { name: 'Recycle', Cmp: RecycleIcon },
+  { name: 'RedditLogo', Cmp: RedditLogoIcon },
+  { name: 'Repeat', Cmp: RepeatIcon },
+  { name: 'RepeatOnce', Cmp: RepeatOnceIcon },
+  { name: 'ReplitLogo', Cmp: ReplitLogoIcon },
+  { name: 'Resize', Cmp: ResizeIcon },
+  { name: 'Rewind', Cmp: RewindIcon },
+  { name: 'RewindCircle', Cmp: RewindCircleIcon },
+  { name: 'RoadHorizon', Cmp: RoadHorizonIcon },
+  { name: 'Robot', Cmp: RobotIcon },
+  { name: 'Rocket', Cmp: RocketIcon },
+  { name: 'RocketLaunch', Cmp: RocketLaunchIcon },
+  { name: 'Rows', Cmp: RowsIcon },
+  { name: 'RowsPlusBottom', Cmp: RowsPlusBottomIcon },
+  { name: 'RowsPlusTop', Cmp: RowsPlusTopIcon },
+  { name: 'Rss', Cmp: RssIcon },
+  { name: 'RssSimple', Cmp: RssSimpleIcon },
+  { name: 'Rug', Cmp: RugIcon },
+  { name: 'Ruler', Cmp: RulerIcon },
+  { name: 'Sailboat', Cmp: SailboatIcon },
+  { name: 'Scales', Cmp: ScalesIcon },
+  { name: 'Scan', Cmp: ScanIcon },
+  { name: 'ScanSmiley', Cmp: ScanSmileyIcon },
+  { name: 'Scissors', Cmp: ScissorsIcon },
+  { name: 'Scooter', Cmp: ScooterIcon },
+  { name: 'Screencast', Cmp: ScreencastIcon },
+  { name: 'Screwdriver', Cmp: ScrewdriverIcon },
+  { name: 'Scribble', Cmp: ScribbleIcon },
+  { name: 'ScribbleLoop', Cmp: ScribbleLoopIcon },
+  { name: 'Scroll', Cmp: ScrollIcon },
+  { name: 'Seal', Cmp: SealIcon },
+  { name: 'SealCheck', Cmp: SealCheckIcon },
+  { name: 'SealPercent', Cmp: SealPercentIcon },
+  { name: 'SealQuestion', Cmp: SealQuestionIcon },
+  { name: 'SealWarning', Cmp: SealWarningIcon },
+  { name: 'Seat', Cmp: SeatIcon },
+  { name: 'Seatbelt', Cmp: SeatbeltIcon },
+  { name: 'SecurityCamera', Cmp: SecurityCameraIcon },
+  { name: 'Selection', Cmp: SelectionIcon },
+  { name: 'SelectionAll', Cmp: SelectionAllIcon },
+  { name: 'SelectionBackground', Cmp: SelectionBackgroundIcon },
+  { name: 'SelectionForeground', Cmp: SelectionForegroundIcon },
+  { name: 'SelectionInverse', Cmp: SelectionInverseIcon },
+  { name: 'SelectionPlus', Cmp: SelectionPlusIcon },
+  { name: 'SelectionSlash', Cmp: SelectionSlashIcon },
+  { name: 'Shapes', Cmp: ShapesIcon },
+  { name: 'Share', Cmp: ShareIcon },
+  { name: 'ShareFat', Cmp: ShareFatIcon },
+  { name: 'ShareNetwork', Cmp: ShareNetworkIcon },
+  { name: 'Shield', Cmp: ShieldIcon },
+  { name: 'ShieldCheck', Cmp: ShieldCheckIcon },
+  { name: 'ShieldCheckered', Cmp: ShieldCheckeredIcon },
+  { name: 'ShieldChevron', Cmp: ShieldChevronIcon },
+  { name: 'ShieldPlus', Cmp: ShieldPlusIcon },
+  { name: 'ShieldSlash', Cmp: ShieldSlashIcon },
+  { name: 'ShieldStar', Cmp: ShieldStarIcon },
+  { name: 'ShieldWarning', Cmp: ShieldWarningIcon },
+  { name: 'ShippingContainer', Cmp: ShippingContainerIcon },
+  { name: 'ShirtFolded', Cmp: ShirtFoldedIcon },
+  { name: 'ShootingStar', Cmp: ShootingStarIcon },
+  { name: 'ShoppingBag', Cmp: ShoppingBagIcon },
+  { name: 'ShoppingBagOpen', Cmp: ShoppingBagOpenIcon },
+  { name: 'ShoppingCart', Cmp: ShoppingCartIcon },
+  { name: 'ShoppingCartSimple', Cmp: ShoppingCartSimpleIcon },
+  { name: 'Shovel', Cmp: ShovelIcon },
+  { name: 'Shower', Cmp: ShowerIcon },
+  { name: 'Shrimp', Cmp: ShrimpIcon },
+  { name: 'Shuffle', Cmp: ShuffleIcon },
+  { name: 'ShuffleAngular', Cmp: ShuffleAngularIcon },
+  { name: 'ShuffleSimple', Cmp: ShuffleSimpleIcon },
+  { name: 'Sidebar', Cmp: SidebarIcon },
+  { name: 'SidebarSimple', Cmp: SidebarSimpleIcon },
+  { name: 'Sigma', Cmp: SigmaIcon },
+  { name: 'Signature', Cmp: SignatureIcon },
+  { name: 'SignIn', Cmp: SignInIcon },
+  { name: 'SignOut', Cmp: SignOutIcon },
+  { name: 'Signpost', Cmp: SignpostIcon },
+  { name: 'SimCard', Cmp: SimCardIcon },
+  { name: 'Siren', Cmp: SirenIcon },
+  { name: 'SketchLogo', Cmp: SketchLogoIcon },
+  { name: 'SkipBack', Cmp: SkipBackIcon },
+  { name: 'SkipBackCircle', Cmp: SkipBackCircleIcon },
+  { name: 'SkipForward', Cmp: SkipForwardIcon },
+  { name: 'SkipForwardCircle', Cmp: SkipForwardCircleIcon },
+  { name: 'Skull', Cmp: SkullIcon },
+  { name: 'SkypeLogo', Cmp: SkypeLogoIcon },
+  { name: 'SlackLogo', Cmp: SlackLogoIcon },
+  { name: 'Sliders', Cmp: SlidersIcon },
+  { name: 'SlidersHorizontal', Cmp: SlidersHorizontalIcon },
+  { name: 'Slideshow', Cmp: SlideshowIcon },
+  { name: 'Smiley', Cmp: SmileyIcon },
+  { name: 'SmileyAngry', Cmp: SmileyAngryIcon },
+  { name: 'SmileyBlank', Cmp: SmileyBlankIcon },
+  { name: 'SmileyMeh', Cmp: SmileyMehIcon },
+  { name: 'SmileyMelting', Cmp: SmileyMeltingIcon },
+  { name: 'SmileyNervous', Cmp: SmileyNervousIcon },
+  { name: 'SmileySad', Cmp: SmileySadIcon },
+  { name: 'SmileySticker', Cmp: SmileyStickerIcon },
+  { name: 'SmileyWink', Cmp: SmileyWinkIcon },
+  { name: 'SmileyXEyes', Cmp: SmileyXEyesIcon },
+  { name: 'SnapchatLogo', Cmp: SnapchatLogoIcon },
+  { name: 'Sneaker', Cmp: SneakerIcon },
+  { name: 'SneakerMove', Cmp: SneakerMoveIcon },
+  { name: 'Snowflake', Cmp: SnowflakeIcon },
+  { name: 'SoccerBall', Cmp: SoccerBallIcon },
+  { name: 'Sock', Cmp: SockIcon },
+  { name: 'SolarPanel', Cmp: SolarPanelIcon },
+  { name: 'SolarRoof', Cmp: SolarRoofIcon },
+  { name: 'SortAscending', Cmp: SortAscendingIcon },
+  { name: 'SortDescending', Cmp: SortDescendingIcon },
+  { name: 'SoundcloudLogo', Cmp: SoundcloudLogoIcon },
+  { name: 'Spade', Cmp: SpadeIcon },
+  { name: 'Sparkle', Cmp: SparkleIcon },
+  { name: 'SpeakerHifi', Cmp: SpeakerHifiIcon },
+  { name: 'SpeakerHigh', Cmp: SpeakerHighIcon },
+  { name: 'SpeakerLow', Cmp: SpeakerLowIcon },
+  { name: 'SpeakerNone', Cmp: SpeakerNoneIcon },
+  { name: 'SpeakerSimpleHigh', Cmp: SpeakerSimpleHighIcon },
+  { name: 'SpeakerSimpleLow', Cmp: SpeakerSimpleLowIcon },
+  { name: 'SpeakerSimpleNone', Cmp: SpeakerSimpleNoneIcon },
+  { name: 'SpeakerSimpleSlash', Cmp: SpeakerSimpleSlashIcon },
+  { name: 'SpeakerSimpleX', Cmp: SpeakerSimpleXIcon },
+  { name: 'SpeakerSlash', Cmp: SpeakerSlashIcon },
+  { name: 'SpeakerX', Cmp: SpeakerXIcon },
+  { name: 'Speedometer', Cmp: SpeedometerIcon },
+  { name: 'Sphere', Cmp: SphereIcon },
+  { name: 'Spinner', Cmp: SpinnerIcon },
+  { name: 'SpinnerBall', Cmp: SpinnerBallIcon },
+  { name: 'SpinnerGap', Cmp: SpinnerGapIcon },
+  { name: 'Spiral', Cmp: SpiralIcon },
+  { name: 'SplitHorizontal', Cmp: SplitHorizontalIcon },
+  { name: 'SplitVertical', Cmp: SplitVerticalIcon },
+  { name: 'SpotifyLogo', Cmp: SpotifyLogoIcon },
+  { name: 'SprayBottle', Cmp: SprayBottleIcon },
+  { name: 'Square', Cmp: SquareIcon },
+  { name: 'SquareHalf', Cmp: SquareHalfIcon },
+  { name: 'SquareHalfBottom', Cmp: SquareHalfBottomIcon },
+  { name: 'SquareLogo', Cmp: SquareLogoIcon },
+  { name: 'SquaresFour', Cmp: SquaresFourIcon },
+  { name: 'SquareSplitHorizontal', Cmp: SquareSplitHorizontalIcon },
+  { name: 'SquareSplitVertical', Cmp: SquareSplitVerticalIcon },
+  { name: 'Stack', Cmp: StackIcon },
+  { name: 'StackMinus', Cmp: StackMinusIcon },
+  { name: 'StackOverflowLogo', Cmp: StackOverflowLogoIcon },
+  { name: 'StackPlus', Cmp: StackPlusIcon },
+  { name: 'StackSimple', Cmp: StackSimpleIcon },
+  { name: 'Stairs', Cmp: StairsIcon },
+  { name: 'Stamp', Cmp: StampIcon },
+  { name: 'StandardDefinition', Cmp: StandardDefinitionIcon },
+  { name: 'Star', Cmp: StarIcon },
+  { name: 'StarAndCrescent', Cmp: StarAndCrescentIcon },
+  { name: 'StarFour', Cmp: StarFourIcon },
+  { name: 'StarHalf', Cmp: StarHalfIcon },
+  { name: 'StarOfDavid', Cmp: StarOfDavidIcon },
+  { name: 'SteamLogo', Cmp: SteamLogoIcon },
+  { name: 'SteeringWheel', Cmp: SteeringWheelIcon },
+  { name: 'Steps', Cmp: StepsIcon },
+  { name: 'Stethoscope', Cmp: StethoscopeIcon },
+  { name: 'Sticker', Cmp: StickerIcon },
+  { name: 'Stool', Cmp: StoolIcon },
+  { name: 'Stop', Cmp: StopIcon },
+  { name: 'StopCircle', Cmp: StopCircleIcon },
+  { name: 'Storefront', Cmp: StorefrontIcon },
+  { name: 'Strategy', Cmp: StrategyIcon },
+  { name: 'StripeLogo', Cmp: StripeLogoIcon },
+  { name: 'Student', Cmp: StudentIcon },
+  { name: 'SubsetOf', Cmp: SubsetOfIcon },
+  { name: 'SubsetProperOf', Cmp: SubsetProperOfIcon },
+  { name: 'Subtitles', Cmp: SubtitlesIcon },
+  { name: 'SubtitlesSlash', Cmp: SubtitlesSlashIcon },
+  { name: 'Subtract', Cmp: SubtractIcon },
+  { name: 'SubtractSquare', Cmp: SubtractSquareIcon },
+  { name: 'Subway', Cmp: SubwayIcon },
+  { name: 'Suitcase', Cmp: SuitcaseIcon },
+  { name: 'SuitcaseRolling', Cmp: SuitcaseRollingIcon },
+  { name: 'SuitcaseSimple', Cmp: SuitcaseSimpleIcon },
+  { name: 'Sun', Cmp: SunIcon },
+  { name: 'SunDim', Cmp: SunDimIcon },
+  { name: 'Sunglasses', Cmp: SunglassesIcon },
+  { name: 'SunHorizon', Cmp: SunHorizonIcon },
+  { name: 'SupersetOf', Cmp: SupersetOfIcon },
+  { name: 'SupersetProperOf', Cmp: SupersetProperOfIcon },
+  { name: 'Swap', Cmp: SwapIcon },
+  { name: 'Swatches', Cmp: SwatchesIcon },
+  { name: 'SwimmingPool', Cmp: SwimmingPoolIcon },
+  { name: 'Sword', Cmp: SwordIcon },
+  { name: 'Synagogue', Cmp: SynagogueIcon },
+  { name: 'Syringe', Cmp: SyringeIcon },
+  { name: 'Table', Cmp: TableIcon },
+  { name: 'Tabs', Cmp: TabsIcon },
+  { name: 'Tag', Cmp: TagIcon },
+  { name: 'TagChevron', Cmp: TagChevronIcon },
+  { name: 'TagSimple', Cmp: TagSimpleIcon },
+  { name: 'Target', Cmp: TargetIcon },
+  { name: 'Taxi', Cmp: TaxiIcon },
+  { name: 'TeaBag', Cmp: TeaBagIcon },
+  { name: 'TelegramLogo', Cmp: TelegramLogoIcon },
+  { name: 'Television', Cmp: TelevisionIcon },
+  { name: 'TelevisionSimple', Cmp: TelevisionSimpleIcon },
+  { name: 'TennisBall', Cmp: TennisBallIcon },
+  { name: 'Tent', Cmp: TentIcon },
+  { name: 'Terminal', Cmp: TerminalIcon },
+  { name: 'TerminalWindow', Cmp: TerminalWindowIcon },
+  { name: 'TestTube', Cmp: TestTubeIcon },
+  { name: 'TextAa', Cmp: TextAaIcon },
+  { name: 'TextAlignCenter', Cmp: TextAlignCenterIcon },
+  { name: 'TextAlignJustify', Cmp: TextAlignJustifyIcon },
+  { name: 'TextAlignLeft', Cmp: TextAlignLeftIcon },
+  { name: 'TextAlignRight', Cmp: TextAlignRightIcon },
+  { name: 'TextAUnderline', Cmp: TextAUnderlineIcon },
+  { name: 'TextB', Cmp: TextBIcon },
+  { name: 'Textbox', Cmp: TextboxIcon },
+  { name: 'TextColumns', Cmp: TextColumnsIcon },
+  { name: 'TextH', Cmp: TextHIcon },
+  { name: 'TextHFive', Cmp: TextHFiveIcon },
+  { name: 'TextHFour', Cmp: TextHFourIcon },
+  { name: 'TextHOne', Cmp: TextHOneIcon },
+  { name: 'TextHSix', Cmp: TextHSixIcon },
+  { name: 'TextHThree', Cmp: TextHThreeIcon },
+  { name: 'TextHTwo', Cmp: TextHTwoIcon },
+  { name: 'TextIndent', Cmp: TextIndentIcon },
+  { name: 'TextItalic', Cmp: TextItalicIcon },
+  { name: 'TextOutdent', Cmp: TextOutdentIcon },
+  { name: 'TextStrikethrough', Cmp: TextStrikethroughIcon },
+  { name: 'TextSubscript', Cmp: TextSubscriptIcon },
+  { name: 'TextSuperscript', Cmp: TextSuperscriptIcon },
+  { name: 'TextT', Cmp: TextTIcon },
+  { name: 'TextTSlash', Cmp: TextTSlashIcon },
+  { name: 'TextUnderline', Cmp: TextUnderlineIcon },
+  { name: 'Thermometer', Cmp: ThermometerIcon },
+  { name: 'ThermometerCold', Cmp: ThermometerColdIcon },
+  { name: 'ThermometerHot', Cmp: ThermometerHotIcon },
+  { name: 'ThermometerSimple', Cmp: ThermometerSimpleIcon },
+  { name: 'ThreadsLogo', Cmp: ThreadsLogoIcon },
+  { name: 'ThreeD', Cmp: ThreeDIcon },
+  { name: 'ThumbsDown', Cmp: ThumbsDownIcon },
+  { name: 'ThumbsUp', Cmp: ThumbsUpIcon },
+  { name: 'Ticket', Cmp: TicketIcon },
+  { name: 'TidalLogo', Cmp: TidalLogoIcon },
+  { name: 'TiktokLogo', Cmp: TiktokLogoIcon },
+  { name: 'Tilde', Cmp: TildeIcon },
+  { name: 'Timer', Cmp: TimerIcon },
+  { name: 'Tipi', Cmp: TipiIcon },
+  { name: 'TipJar', Cmp: TipJarIcon },
+  { name: 'Tire', Cmp: TireIcon },
+  { name: 'ToggleLeft', Cmp: ToggleLeftIcon },
+  { name: 'ToggleRight', Cmp: ToggleRightIcon },
+  { name: 'Toilet', Cmp: ToiletIcon },
+  { name: 'ToiletPaper', Cmp: ToiletPaperIcon },
+  { name: 'Toolbox', Cmp: ToolboxIcon },
+  { name: 'Tooth', Cmp: ToothIcon },
+  { name: 'Tornado', Cmp: TornadoIcon },
+  { name: 'Tote', Cmp: ToteIcon },
+  { name: 'ToteSimple', Cmp: ToteSimpleIcon },
+  { name: 'Towel', Cmp: TowelIcon },
+  { name: 'Tractor', Cmp: TractorIcon },
+  { name: 'Trademark', Cmp: TrademarkIcon },
+  { name: 'TrademarkRegistered', Cmp: TrademarkRegisteredIcon },
+  { name: 'TrafficCone', Cmp: TrafficConeIcon },
+  { name: 'TrafficSign', Cmp: TrafficSignIcon },
+  { name: 'TrafficSignal', Cmp: TrafficSignalIcon },
+  { name: 'Train', Cmp: TrainIcon },
+  { name: 'TrainRegional', Cmp: TrainRegionalIcon },
+  { name: 'TrainSimple', Cmp: TrainSimpleIcon },
+  { name: 'Tram', Cmp: TramIcon },
+  { name: 'Translate', Cmp: TranslateIcon },
+  { name: 'Trash', Cmp: TrashIcon },
+  { name: 'TrashSimple', Cmp: TrashSimpleIcon },
+  { name: 'Tray', Cmp: TrayIcon },
+  { name: 'TrayArrowDown', Cmp: TrayArrowDownIcon },
+  { name: 'TrayArrowUp', Cmp: TrayArrowUpIcon },
+  { name: 'TreasureChest', Cmp: TreasureChestIcon },
+  { name: 'Tree', Cmp: TreeIcon },
+  { name: 'TreeEvergreen', Cmp: TreeEvergreenIcon },
+  { name: 'TreePalm', Cmp: TreePalmIcon },
+  { name: 'TreeStructure', Cmp: TreeStructureIcon },
+  { name: 'TreeView', Cmp: TreeViewIcon },
+  { name: 'TrendDown', Cmp: TrendDownIcon },
+  { name: 'TrendUp', Cmp: TrendUpIcon },
+  { name: 'Triangle', Cmp: TriangleIcon },
+  { name: 'TriangleDashed', Cmp: TriangleDashedIcon },
+  { name: 'Trolley', Cmp: TrolleyIcon },
+  { name: 'TrolleySuitcase', Cmp: TrolleySuitcaseIcon },
+  { name: 'Trophy', Cmp: TrophyIcon },
+  { name: 'Truck', Cmp: TruckIcon },
+  { name: 'TruckTrailer', Cmp: TruckTrailerIcon },
+  { name: 'TShirt', Cmp: TShirtIcon },
+  { name: 'TumblrLogo', Cmp: TumblrLogoIcon },
+  { name: 'TwitchLogo', Cmp: TwitchLogoIcon },
+  { name: 'TwitterLogo', Cmp: TwitterLogoIcon },
+  { name: 'Umbrella', Cmp: UmbrellaIcon },
+  { name: 'UmbrellaSimple', Cmp: UmbrellaSimpleIcon },
+  { name: 'Union', Cmp: UnionIcon },
+  { name: 'Unite', Cmp: UniteIcon },
+  { name: 'UniteSquare', Cmp: UniteSquareIcon },
+  { name: 'Upload', Cmp: UploadIcon },
+  { name: 'UploadSimple', Cmp: UploadSimpleIcon },
+  { name: 'Usb', Cmp: UsbIcon },
+  { name: 'User', Cmp: UserIcon },
+  { name: 'UserCheck', Cmp: UserCheckIcon },
+  { name: 'UserCircle', Cmp: UserCircleIcon },
+  { name: 'UserCircleCheck', Cmp: UserCircleCheckIcon },
+  { name: 'UserCircleDashed', Cmp: UserCircleDashedIcon },
+  { name: 'UserCircleGear', Cmp: UserCircleGearIcon },
+  { name: 'UserCircleMinus', Cmp: UserCircleMinusIcon },
+  { name: 'UserCirclePlus', Cmp: UserCirclePlusIcon },
+  { name: 'UserFocus', Cmp: UserFocusIcon },
+  { name: 'UserGear', Cmp: UserGearIcon },
+  { name: 'UserList', Cmp: UserListIcon },
+  { name: 'UserMinus', Cmp: UserMinusIcon },
+  { name: 'UserPlus', Cmp: UserPlusIcon },
+  { name: 'UserRectangle', Cmp: UserRectangleIcon },
+  { name: 'Users', Cmp: UsersIcon },
+  { name: 'UsersFour', Cmp: UsersFourIcon },
+  { name: 'UserSound', Cmp: UserSoundIcon },
+  { name: 'UserSquare', Cmp: UserSquareIcon },
+  { name: 'UsersThree', Cmp: UsersThreeIcon },
+  { name: 'UserSwitch', Cmp: UserSwitchIcon },
+  { name: 'Van', Cmp: VanIcon },
+  { name: 'Vault', Cmp: VaultIcon },
+  { name: 'VectorThree', Cmp: VectorThreeIcon },
+  { name: 'VectorTwo', Cmp: VectorTwoIcon },
+  { name: 'Vibrate', Cmp: VibrateIcon },
+  { name: 'Video', Cmp: VideoIcon },
+  { name: 'VideoCamera', Cmp: VideoCameraIcon },
+  { name: 'VideoCameraSlash', Cmp: VideoCameraSlashIcon },
+  { name: 'VideoConference', Cmp: VideoConferenceIcon },
+  { name: 'Vignette', Cmp: VignetteIcon },
+  { name: 'VinylRecord', Cmp: VinylRecordIcon },
+  { name: 'VirtualReality', Cmp: VirtualRealityIcon },
+  { name: 'Virus', Cmp: VirusIcon },
+  { name: 'Visor', Cmp: VisorIcon },
+  { name: 'Voicemail', Cmp: VoicemailIcon },
+  { name: 'Volleyball', Cmp: VolleyballIcon },
+  { name: 'Wall', Cmp: WallIcon },
+  { name: 'Wallet', Cmp: WalletIcon },
+  { name: 'Warehouse', Cmp: WarehouseIcon },
+  { name: 'Warning', Cmp: WarningIcon },
+  { name: 'WarningCircle', Cmp: WarningCircleIcon },
+  { name: 'WarningDiamond', Cmp: WarningDiamondIcon },
+  { name: 'WarningOctagon', Cmp: WarningOctagonIcon },
+  { name: 'WashingMachine', Cmp: WashingMachineIcon },
+  { name: 'Watch', Cmp: WatchIcon },
+  { name: 'Waveform', Cmp: WaveformIcon },
+  { name: 'WaveformSlash', Cmp: WaveformSlashIcon },
+  { name: 'Waves', Cmp: WavesIcon },
+  { name: 'WaveSawtooth', Cmp: WaveSawtoothIcon },
+  { name: 'WaveSine', Cmp: WaveSineIcon },
+  { name: 'WaveSquare', Cmp: WaveSquareIcon },
+  { name: 'WaveTriangle', Cmp: WaveTriangleIcon },
+  { name: 'Webcam', Cmp: WebcamIcon },
+  { name: 'WebcamSlash', Cmp: WebcamSlashIcon },
+  { name: 'WebhooksLogo', Cmp: WebhooksLogoIcon },
+  { name: 'WechatLogo', Cmp: WechatLogoIcon },
+  { name: 'WhatsappLogo', Cmp: WhatsappLogoIcon },
+  { name: 'Wheelchair', Cmp: WheelchairIcon },
+  { name: 'WheelchairMotion', Cmp: WheelchairMotionIcon },
+  { name: 'WifiHigh', Cmp: WifiHighIcon },
+  { name: 'WifiLow', Cmp: WifiLowIcon },
+  { name: 'WifiMedium', Cmp: WifiMediumIcon },
+  { name: 'WifiNone', Cmp: WifiNoneIcon },
+  { name: 'WifiSlash', Cmp: WifiSlashIcon },
+  { name: 'WifiX', Cmp: WifiXIcon },
+  { name: 'Wind', Cmp: WindIcon },
+  { name: 'Windmill', Cmp: WindmillIcon },
+  { name: 'WindowsLogo', Cmp: WindowsLogoIcon },
+  { name: 'Wine', Cmp: WineIcon },
+  { name: 'Wrench', Cmp: WrenchIcon },
+  { name: 'X', Cmp: XIcon },
+  { name: 'XCircle', Cmp: XCircleIcon },
+  { name: 'XLogo', Cmp: XLogoIcon },
+  { name: 'XSquare', Cmp: XSquareIcon },
+  { name: 'Yarn', Cmp: YarnIcon },
+  { name: 'YinYang', Cmp: YinYangIcon },
+  { name: 'YoutubeLogo', Cmp: YoutubeLogoIcon },
 ]
diff --git a/src/components/ds/ui/index.tsx b/src/components/ds/ui/index.tsx
index 37f03de90..aa1ad7632 100644
--- a/src/components/ds/ui/index.tsx
+++ b/src/components/ds/ui/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { Link } from '@tanstack/react-router'
-import { CaretDown, CircleNotch, User } from '@phosphor-icons/react'
+import { CaretDownIcon, CircleNotchIcon, UserIcon } from '@phosphor-icons/react'
 import type { MarkdownHeading } from '~/utils/markdown'
 import type { LibraryId } from '~/libraries/ids'
 import type { LibraryCategory } from '~/libraries/categories'
@@ -458,7 +458,7 @@ export function InlineCode({
 
 export function Spinner({ className }: { className?: string }) {
   return (
-    <CircleNotch
+    <CircleNotchIcon
       className={twMerge('h-6 w-6 animate-spin text-text-primary', className)}
       aria-label="Loading"
     />
@@ -531,7 +531,7 @@ export function Avatar({
         className,
       )}
     >
-      {initials || <User className="h-1/2 w-1/2 text-text-muted" />}
+      {initials || <UserIcon className="h-1/2 w-1/2 text-text-muted" />}
     </div>
   )
 }
@@ -675,7 +675,7 @@ export function Breadcrumbs({
               )}
             >
               <span>On this page</span>
-              <CaretDown className="h-3.5 w-3.5" />
+              <CaretDownIcon className="h-3.5 w-3.5" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="end" sideOffset={8} className={hiddenClass}>
diff --git a/src/components/game/ui/CompleteOverlay.tsx b/src/components/game/ui/CompleteOverlay.tsx
index 3470713d2..6a8995ab4 100644
--- a/src/components/game/ui/CompleteOverlay.tsx
+++ b/src/components/game/ui/CompleteOverlay.tsx
@@ -1,6 +1,10 @@
 import { Link } from '@tanstack/react-router'
 import { useGameStore } from '../hooks/useGameStore'
-import { Trophy, ArrowCounterClockwise, House } from '@phosphor-icons/react'
+import {
+  TrophyIcon,
+  ArrowCounterClockwiseIcon,
+  HouseIcon,
+} from '@phosphor-icons/react'
 
 export function CompleteOverlay() {
   const { phase, reset, setPhase } = useGameStore()
@@ -17,7 +21,7 @@ export function CompleteOverlay() {
       <div className="max-w-md mx-4 text-center">
         {/* Trophy */}
         <div className="w-24 h-24 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
-          <Trophy className="w-12 h-12 text-white" />
+          <TrophyIcon className="w-12 h-12 text-white" />
         </div>
 
         {/* Title */}
@@ -35,14 +39,14 @@ export function CompleteOverlay() {
             onClick={handlePlayAgain}
             className="flex items-center justify-center gap-2 px-6 py-3 bg-white text-orange-600 font-bold rounded-xl shadow-lg hover:bg-orange-50 hover:scale-105 transition-all duration-200"
           >
-            <ArrowCounterClockwise className="w-5 h-5" />
+            <ArrowCounterClockwiseIcon className="w-5 h-5" />
             Explore Again
           </button>
           <Link
             to="/"
             className="flex items-center justify-center gap-2 px-6 py-3 bg-white/20 text-white font-bold rounded-xl hover:bg-white/30 transition-all duration-200"
           >
-            <House className="w-5 h-5" />
+            <HouseIcon className="w-5 h-5" />
             Back to TanStack
           </Link>
         </div>
diff --git a/src/components/game/ui/GameHUD.tsx b/src/components/game/ui/GameHUD.tsx
index 9c9c18657..c24ff0202 100644
--- a/src/components/game/ui/GameHUD.tsx
+++ b/src/components/game/ui/GameHUD.tsx
@@ -2,10 +2,10 @@
 import { useEffect, useState } from 'react'
 import { useGameStore } from '../hooks/useGameStore'
 import {
-  MapTrifold,
-  Coins,
-  ShoppingBag,
-  Lightning,
+  MapTrifoldIcon,
+  CoinsIcon,
+  ShoppingBagIcon,
+  LightningIcon,
 } from '@phosphor-icons/react'
 
 export function GameHUD() {
@@ -161,14 +161,14 @@ export function GameHUD() {
           onClick={openShop}
           className="pointer-events-auto bg-black/30 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center gap-2 text-white hover:bg-black/40 transition-colors"
         >
-          <Coins className="w-5 h-5 text-yellow-400" />
+          <CoinsIcon className="w-5 h-5 text-yellow-400" />
           <span className="font-bold text-yellow-400">{coinsCollected}</span>
-          <ShoppingBag className="w-4 h-4 ml-1 text-white/60" />
+          <ShoppingBagIcon className="w-4 h-4 ml-1 text-white/60" />
         </button>
 
         {/* Island counter */}
         <div className="pointer-events-auto bg-black/30 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center gap-2 text-white ml-2">
-          <MapTrifold className="w-5 h-5" />
+          <MapTrifoldIcon className="w-5 h-5" />
           <span className="font-bold">
             {discoveredIslands.size} / {totalIslands}
           </span>
@@ -189,7 +189,7 @@ export function GameHUD() {
             className="md:hidden pointer-events-auto bg-red-500/80 backdrop-blur-sm rounded-full p-4 flex items-center justify-center text-white hover:bg-red-600/80 active:scale-95 transition-all shadow-lg"
             aria-label="Fire cannons"
           >
-            <Lightning className="w-6 h-6" />
+            <LightningIcon className="w-6 h-6" />
           </button>
           {/* Health bar */}
           <div
diff --git a/src/components/game/ui/StatsHUD.tsx b/src/components/game/ui/StatsHUD.tsx
index acff20c91..0b88635d3 100644
--- a/src/components/game/ui/StatsHUD.tsx
+++ b/src/components/game/ui/StatsHUD.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useGameStore } from '../hooks/useGameStore'
 import { getUpgradeTier, hasUnlock, type UpgradeType } from '../utils/upgrades'
-import { ArrowCounterClockwise } from '@phosphor-icons/react'
+import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react'
 
 // Convert number to roman numeral
 function toRoman(num: number): string {
@@ -162,7 +162,7 @@ export function StatsHUD() {
             onClick={() => setShowConfirm(true)}
             className="w-full flex items-center justify-center gap-1.5 text-[10px] text-white/30 hover:text-white/60 transition-colors"
           >
-            <ArrowCounterClockwise className="w-3 h-3" />
+            <ArrowCounterClockwiseIcon className="w-3 h-3" />
             <span>Reset</span>
           </button>
         ) : (
diff --git a/src/components/home/HomeCommunitySection.tsx b/src/components/home/HomeCommunitySection.tsx
index e8221824a..29c6cbfb7 100644
--- a/src/components/home/HomeCommunitySection.tsx
+++ b/src/components/home/HomeCommunitySection.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight } from '@phosphor-icons/react'
+import { ArrowRightIcon } from '@phosphor-icons/react'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { coreMaintainers } from '~/libraries/maintainers'
 import { Button } from '~/components/ds/ui'
@@ -60,7 +60,7 @@ function HomeCommunityContent() {
             color="gray"
           >
             View All Maintainers
-            <ArrowRight />
+            <ArrowRightIcon />
           </Button>
         </div>
       </div>
diff --git a/src/components/home/HomeNewsletterSection.tsx b/src/components/home/HomeNewsletterSection.tsx
index c2bbbafc1..0a0769f7d 100644
--- a/src/components/home/HomeNewsletterSection.tsx
+++ b/src/components/home/HomeNewsletterSection.tsx
@@ -1,4 +1,4 @@
-import { EnvelopeSimple } from '@phosphor-icons/react'
+import { EnvelopeSimpleIcon } from '@phosphor-icons/react'
 import { NewsletterSignup } from '~/components/NewsletterSignup'
 import { Footer } from '~/components/Footer'
 
@@ -12,7 +12,7 @@ export function HomeNewsletterSection() {
         <div className="corner-squircle grid overflow-hidden rounded-2xl border border-border-subtle bg-background-surface px-6 py-8 sm:p-10 lg:mt-[19px] lg:px-[76px] lg:py-[59px]">
           <div className="flex items-start gap-4 sm:gap-5">
             <div className="corner-squircle flex size-12 shrink-0 items-center justify-center rounded-xl border border-border-subtle bg-background-subtle text-text-secondary sm:size-14">
-              <EnvelopeSimple className="size-6 sm:size-7" weight="light" />
+              <EnvelopeSimpleIcon className="size-6 sm:size-7" weight="light" />
             </div>
             <div className="min-w-0">
               <p className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted">
diff --git a/src/components/home/HomeSocialProofSection.tsx b/src/components/home/HomeSocialProofSection.tsx
index 18237c772..97bd2669e 100644
--- a/src/components/home/HomeSocialProofSection.tsx
+++ b/src/components/home/HomeSocialProofSection.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
-import { ArrowRight } from '@phosphor-icons/react'
+import { ArrowRightIcon } from '@phosphor-icons/react'
 import { BlogPostCard } from '~/components/ds/ui/BlogPostCard'
 import { Button } from '~/components/ds/ui'
 import { PartnersSponsorsContent } from '~/components/PartnersSponsorsSection'
@@ -101,7 +101,7 @@ function HomeSocialProofContent({ recentPosts }: HomeSocialProofSectionProps) {
           <div className="flex justify-center mt-6">
             <Button as={Link} to="/blog" variant="subtle-link" color="gray">
               View All Posts
-              <ArrowRight />
+              <ArrowRightIcon />
             </Button>
           </div>
         </div>
diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index 5f8f9eae9..233a88fa8 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react'
 import {
-  BracketsCurly,
-  Bug,
-  Code,
-  Cube,
-  Database,
-  Microphone,
-  Plug,
-  Radio,
-  Robot,
-  Terminal,
-  Waveform,
+  BracketsCurlyIcon,
+  BugIcon,
+  CodeIcon,
+  CubeIcon,
+  DatabaseIcon,
+  MicrophoneIcon,
+  PlugIcon,
+  RadioIcon,
+  RobotIcon,
+  TerminalIcon,
+  WaveformIcon,
   type Icon,
 } from '@phosphor-icons/react'
 
@@ -169,7 +169,7 @@ export default function AiLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Two files"
-          icon={<Terminal aria-hidden="true" size={15} />}
+          icon={<TerminalIcon aria-hidden="true" size={15} />}
           title="An agent on your own server, end to end."
           body="One route on the server, one hook in the client, and the transport between them is yours. Nothing here is a wrapper around a service we run."
         />
@@ -180,7 +180,7 @@ export default function AiLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.92fr_1.08fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="The agent loop"
-            icon={<BracketsCurly aria-hidden="true" size={15} />}
+            icon={<BracketsCurlyIcon aria-hidden="true" size={15} />}
             title="An agent loop you can read, and stop where you want."
             body="chat() runs the cycle: the model calls a tool, the result goes back, it keeps reasoning. You decide the boundary. Client tools touch local UI state, server tools use your credentials, isomorphic tools share one definition. Stop conditions are plain (state) => boolean functions you compose. Mark a tool needsApproval and the run ends as an interrupt your UI resolves, then resumes exactly where it stopped, on a stateless server, no database required."
           />
@@ -193,7 +193,7 @@ export default function AiLanding() {
           <ProviderWorkbench />
           <LandingSectionIntro
             eyebrow="Provider types"
-            icon={<Plug aria-hidden="true" size={15} />}
+            icon={<PlugIcon aria-hidden="true" size={15} />}
             title="Swap the model. Keep the agent."
             body="OpenRouter, OpenAI, Anthropic, Gemini, Bedrock, Mistral, Groq, Grok, Ollama, ElevenLabs, and fal.ai ship as official adapters, and openaiCompatible covers any endpoint that speaks the same shape, including a model on your own hardware. Switching is a line of config, not a migration. And no adapter pretends every model is identical: write openaiText('gpt-5.5') and TypeScript narrows to that model's real options, capabilities, and input modalities."
           />
@@ -204,7 +204,7 @@ export default function AiLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Open protocol"
-          icon={<Radio aria-hidden="true" size={15} />}
+          icon={<RadioIcon aria-hidden="true" size={15} />}
           title="AG-UI compliant, in both directions."
           body="The client sends AG-UI requests and consumes AG-UI events, with no proprietary stream format and no translation layer in between. That is what makes the agent on the other end replaceable: point the same client at a Python, Go, or PHP AG-UI runtime and it keeps working. The transport is yours too, whether that is SSE, HTTP streams, XHR, RPC, a raw async iterable, or a fetcher you wrote. Nothing to sign up for, no key to hand over, no traffic through us."
         />
@@ -215,7 +215,7 @@ export default function AiLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:items-start lg:gap-16">
           <LandingSectionIntro
             eyebrow="The rest of the agent stack"
-            icon={<Cube aria-hidden="true" size={15} />}
+            icon={<CubeIcon aria-hidden="true" size={15} />}
             title="Sandboxes, code mode, MCP, memory. Shipped, not planned."
             body="An agent framework is more than a loop around a model. Each of these is a separate package you opt into, running on infrastructure you already own. Each ships an Agent Skill so your coding assistant wires it up correctly."
           />
@@ -227,7 +227,7 @@ export default function AiLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:items-start lg:gap-16">
           <LandingSectionIntro
             eyebrow="Beyond chat"
-            icon={<Microphone aria-hidden="true" size={15} />}
+            icon={<MicrophoneIcon aria-hidden="true" size={15} />}
             title="Not a chatbot library. Every modality, one runtime."
             body="Text and structured output sit beside image, video, speech, transcription, music, and realtime voice. One hook per activity, each a separate tree-shakeable import, none of it wrapped in a chat UI you have to accept. Middleware, devtools, and OpenTelemetry observe every run at the activity level."
           />
@@ -239,7 +239,7 @@ export default function AiLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:items-center lg:gap-16">
           <LandingSectionIntro
             eyebrow="Devtools"
-            icon={<Bug aria-hidden="true" size={15} />}
+            icon={<BugIcon aria-hidden="true" size={15} />}
             title="Watch the loop run instead of guessing."
             body="Agent bugs live between the turns: which tool ran, what came back, what memory injected, where the run stopped. The TanStack Devtools panel finds every AI hook on the page and gives each one a turn-by-turn timeline with tool inputs and outputs, state snapshots, and errors. You can even replay a tool from a saved fixture instead of prompting your way back to the same state."
           />
@@ -1047,25 +1047,25 @@ const agentStack: Array<RailItem> = [
     label: 'Code Mode',
     detail: '@tanstack/ai-code-mode',
     body: 'The model writes one TypeScript program that calls your tools with loops and Promise.all, instead of a round trip per call. It runs in a V8 isolate, QuickJS WASM, or a Cloudflare Worker, with no host filesystem, network, or process.',
-    icon: Code,
+    icon: CodeIcon,
   },
   {
     label: 'Coding-agent harnesses',
     detail: '@tanstack/ai-sandbox',
     body: 'Run Claude Code, Codex, OpenCode, Grok Build, or any ACP agent as a chat backend, inside a local process, Docker, Daytona, Vercel, Sprites, or Cloudflare sandbox. Their tool activity streams back as AG-UI events your UI already renders.',
-    icon: Terminal,
+    icon: TerminalIcon,
   },
   {
     label: 'MCP + MCP Apps',
     detail: '@tanstack/ai-mcp',
     body: 'A host-side MCP client with a type-generating CLI, provider-routed mcpTool(), and interactive ui:// widgets rendered from tool results across multiple servers.',
-    icon: Cube,
+    icon: CubeIcon,
   },
   {
     label: 'Memory + persistence',
     detail: '@tanstack/ai-memory · -persistence',
     body: 'memoryMiddleware recalls across sessions through Redis, mem0, Honcho, or Hindsight adapters. Persistence keeps an authoritative server thread, resumes a stream through a dropped connection, and survives a reload.',
-    icon: Database,
+    icon: DatabaseIcon,
   },
 ]
 
@@ -1074,25 +1074,25 @@ const modalities: Array<RailItem> = [
     label: 'Text, objects, reasoning',
     detail: 'chat · outputSchema · summarize',
     body: 'Structured output streams as a typed message part beside tool calls and is preserved per turn in history, not a separate one-shot call.',
-    icon: Robot,
+    icon: RobotIcon,
   },
   {
     label: 'Speech, transcription, music',
     detail: 'generateSpeech · generateTranscription · generateAudio',
     body: 'Six speech formats with speed control, transcription with word timestamps and diarization, plus music and sound effects.',
-    icon: Microphone,
+    icon: MicrophoneIcon,
   },
   {
     label: 'Realtime voice',
     detail: 'openaiRealtimeToken · RealtimeClient',
     body: 'OpenAI, Grok, and ElevenLabs with VAD modes and tool calling inside a live session.',
-    icon: Waveform,
+    icon: WaveformIcon,
   },
   {
     label: 'Images + video',
     detail: 'generateImage · generateVideo',
     body: 'Per-model typed options across OpenAI, Gemini, Grok, OpenRouter, and fal.ai, with an async job lifecycle for video.',
-    icon: Radio,
+    icon: RadioIcon,
   },
 ]
 
diff --git a/src/components/landing/ChartsCatalogGallery.tsx b/src/components/landing/ChartsCatalogGallery.tsx
index 4203819c2..6fe43d5d3 100644
--- a/src/components/landing/ChartsCatalogGallery.tsx
+++ b/src/components/landing/ChartsCatalogGallery.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import { ArrowRight, ArrowUpRight, Pause, Play } from '@phosphor-icons/react'
+import {
+  ArrowRightIcon,
+  ArrowUpRightIcon,
+  PauseIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
 
 import {
   ChartsCatalogChart,
@@ -157,11 +162,11 @@ export function CatalogChartsHero({
           }}
         >
           {reducedMotion ? (
-            <ArrowRight aria-hidden="true" className="size-4" />
+            <ArrowRightIcon aria-hidden="true" className="size-4" />
           ) : paused ? (
-            <Play aria-hidden="true" className="size-4 translate-x-px" />
+            <PlayIcon aria-hidden="true" className="size-4 translate-x-px" />
           ) : (
-            <Pause aria-hidden="true" className="size-4" />
+            <PauseIcon aria-hidden="true" className="size-4" />
           )}
         </button>
       </div>
@@ -227,7 +232,7 @@ function HeroChartTile({
             </div>
           ) : null}
         </div>
-        <ArrowUpRight
+        <ArrowUpRightIcon
           aria-hidden="true"
           className={`absolute right-4 top-4 size-5 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none ${
             theme === 'dark' ? 'text-white/70' : 'text-[#071219]/60'
@@ -331,7 +336,7 @@ function CatalogChartCard({
             {catalogCase.family}
           </p>
         </div>
-        <ArrowUpRight
+        <ArrowUpRightIcon
           aria-hidden="true"
           className="size-4 shrink-0 opacity-55 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none"
         />
diff --git a/src/components/landing/ChartsLandingGraphics.tsx b/src/components/landing/ChartsLandingGraphics.tsx
index f90e035ab..91505f526 100644
--- a/src/components/landing/ChartsLandingGraphics.tsx
+++ b/src/components/landing/ChartsLandingGraphics.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Pause, Play, Shuffle } from '@phosphor-icons/react'
+import { PauseIcon, PlayIcon, ShuffleIcon } from '@phosphor-icons/react'
 
 import { useIsDark } from '~/hooks/useIsDark'
 
@@ -523,9 +523,9 @@ export function KineticChartsHero() {
               }}
             >
               {autoPlay ? (
-                <Pause aria-hidden="true" className="size-3.5" />
+                <PauseIcon aria-hidden="true" className="size-3.5" />
               ) : (
-                <Play aria-hidden="true" className="size-3.5" />
+                <PlayIcon aria-hidden="true" className="size-3.5" />
               )}
             </button>
             <button
@@ -533,7 +533,7 @@ export function KineticChartsHero() {
               className="inline-flex min-h-9 items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] px-3 font-ds-mono text-ds-mono-caps-xs uppercase text-white/60 transition-[color,background-color,border-color] duration-200 hover:border-white/25 hover:bg-white/[0.08] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#61e8ff]"
               onClick={showNewVariation}
             >
-              <Shuffle aria-hidden="true" className="size-3.5" />
+              <ShuffleIcon aria-hidden="true" className="size-3.5" />
               <span className="hidden sm:inline">New variation</span>
             </button>
           </div>
diff --git a/src/components/landing/CliLanding.tsx b/src/components/landing/CliLanding.tsx
index c60d5091b..e5cc98bf7 100644
--- a/src/components/landing/CliLanding.tsx
+++ b/src/components/landing/CliLanding.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  FileCode,
-  GitDiff,
-  Package,
-  PuzzlePiece,
-  Robot,
-  Stack,
+  FileCodeIcon,
+  GitDiffIcon,
+  PackageIcon,
+  PuzzlePieceIcon,
+  RobotIcon,
+  StackIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -73,7 +73,7 @@ export default function CliLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Add-on contract"
-          icon={<PuzzlePiece aria-hidden="true" size={15} />}
+          icon={<PuzzlePieceIcon aria-hidden="true" size={15} />}
           title="An integration is more than a dependency."
           body="Add-ons can declare files, packages, environment variables, options, ordering hooks, dependencies, and conflicts. The CLI has enough structure to compose them deliberately instead of pasting setup snippets in sequence."
         />
@@ -85,7 +85,7 @@ export default function CliLanding() {
           <CatalogTerminal />
           <LandingSectionIntro
             eyebrow="Machine-readable context"
-            icon={<Robot aria-hidden="true" size={15} />}
+            icon={<RobotIcon aria-hidden="true" size={15} />}
             title="The same catalog works for humans and agents."
             body="Search documentation or inspect TanStack libraries, add-ons, and ecosystem entries from the terminal. JSON output preserves names, versions, categories, and source links without asking an agent to scrape a website."
           />
@@ -96,7 +96,7 @@ export default function CliLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:items-center lg:gap-16">
           <LandingSectionIntro
             eyebrow="Open composition"
-            icon={<Stack aria-hidden="true" size={15} />}
+            icon={<StackIcon aria-hidden="true" size={15} />}
             title="Start from TanStack’s catalog—or publish your own."
             body="A template owns the project baseline. Add-ons layer focused capabilities on top. Both stay inspectable, so teams can host private building blocks or contribute integrations without turning project generation into a black box."
           />
@@ -262,7 +262,7 @@ function BuilderHero() {
             </div>
           </div>
           <div className="mt-3 flex items-center gap-3 rounded-lg border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.12)] p-3">
-            <FileCode
+            <FileCodeIcon
               aria-hidden="true"
               className="shrink-0 text-[var(--landing-accent-bright)]"
               size={18}
@@ -296,7 +296,7 @@ function AddonAnatomy() {
     <div className="mx-auto mt-14 max-w-[72rem] overflow-hidden rounded-xl border border-border-default bg-background-surface">
       <div className="grid md:grid-cols-[0.76fr_1.24fr]">
         <div className="border-border-subtle p-6 md:border-r md:p-8">
-          <PuzzlePiece
+          <PuzzlePieceIcon
             aria-hidden="true"
             className="text-[var(--landing-accent-bright)]"
             size={32}
@@ -385,7 +385,7 @@ function TemplateVsAddon() {
       <div className="p-5 sm:p-6">
         <div className="grid gap-4 sm:grid-cols-[1fr_auto_1fr] sm:items-stretch">
           <div className="rounded-xl border border-border-default bg-background-subtle p-5">
-            <Package
+            <PackageIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={24}
@@ -403,7 +403,7 @@ function TemplateVsAddon() {
             />
           </div>
           <div className="rounded-xl border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.12)] p-5">
-            <PuzzlePiece
+            <PuzzlePieceIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={24}
@@ -416,7 +416,7 @@ function TemplateVsAddon() {
           </div>
         </div>
         <div className="mt-4 flex items-center gap-3 rounded-lg bg-background-subtle p-4">
-          <GitDiff
+          <GitDiffIcon
             aria-hidden="true"
             className="shrink-0 text-[var(--landing-accent-bright)]"
             size={18}
diff --git a/src/components/landing/ConfigLanding.tsx b/src/components/landing/ConfigLanding.tsx
index d13fb8bfb..ceb74e8a4 100644
--- a/src/components/landing/ConfigLanding.tsx
+++ b/src/components/landing/ConfigLanding.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  ClipboardText,
-  CloudArrowUp,
-  GitBranch,
-  Package,
-  ShieldCheck,
-  Terminal,
+  ClipboardTextIcon,
+  CloudArrowUpIcon,
+  GitBranchIcon,
+  PackageIcon,
+  ShieldCheckIcon,
+  TerminalIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -81,7 +81,7 @@ export default function ConfigLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.94fr_1.06fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Consumer boundary"
-            icon={<Package aria-hidden="true" size={15} />}
+            icon={<PackageIcon aria-hidden="true" size={15} />}
             title="The tarball is the product. Source is only its input."
             body="Consumers receive exports, JavaScript, declarations, metadata, and documentation—not your repository. The conventions keep that package boundary reviewable and use package checks such as publint before a release reaches npm."
           />
@@ -94,7 +94,7 @@ export default function ConfigLanding() {
           <AffectedGraph />
           <LandingSectionIntro
             eyebrow="Monorepo economics"
-            icon={<GitBranch aria-hidden="true" size={15} />}
+            icon={<GitBranchIcon aria-hidden="true" size={15} />}
             title="A pull request should pay only for what it can affect."
             body="Nx connects package dependencies to affected lint, test, and build tasks, then reuses cached work. pkg-pr-new closes the feedback loop by turning a pull request into packages maintainers can install before merging."
           />
@@ -105,7 +105,7 @@ export default function ConfigLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Release trust"
-          icon={<ShieldCheck aria-hidden="true" size={15} />}
+          icon={<ShieldCheckIcon aria-hidden="true" size={15} />}
           title="Release intent is reviewed. Publish credentials are temporary."
           body="Changesets record package-level release intent in the pull request. The release workflow turns that intent into versions and changelogs, while npm trusted publishing can exchange GitHub’s OIDC identity for short-lived publish access with provenance."
         />
@@ -243,7 +243,7 @@ function PackageXRay() {
           ))}
         </div>
         <div className="mt-4 flex items-center gap-3 rounded-lg border-l-2 border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.08)] p-4">
-          <ClipboardText
+          <ClipboardTextIcon
             aria-hidden="true"
             className="shrink-0 text-[var(--landing-accent-bright)]"
             size={18}
@@ -312,7 +312,7 @@ function AffectedGraph() {
 
         <div className="mt-5 grid gap-3 sm:grid-cols-2">
           <div className="rounded-lg bg-background-subtle p-4">
-            <Terminal
+            <TerminalIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={18}
@@ -322,7 +322,7 @@ function AffectedGraph() {
             </p>
           </div>
           <div className="rounded-lg bg-background-subtle p-4">
-            <Package
+            <PackageIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={18}
@@ -364,7 +364,7 @@ function ReleaseTrustPath() {
         ))}
       </ol>
       <div className="flex items-center gap-3 border-t border-border-subtle bg-background-subtle p-5">
-        <CloudArrowUp
+        <CloudArrowUpIcon
           aria-hidden="true"
           className="shrink-0 text-[var(--landing-accent-bright)]"
           size={20}
diff --git a/src/components/landing/DbLanding.tsx b/src/components/landing/DbLanding.tsx
index e186ccdf4..fd132b4c4 100644
--- a/src/components/landing/DbLanding.tsx
+++ b/src/components/landing/DbLanding.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import {
-  ArrowRight,
-  CheckCircle,
-  Database,
-  Funnel,
-  Lightning,
-  Network,
-  Plugs,
-  Stack,
-  XCircle,
+  ArrowRightIcon,
+  CheckCircleIcon,
+  DatabaseIcon,
+  FunnelIcon,
+  LightningIcon,
+  NetworkIcon,
+  PlugsIcon,
+  StackIcon,
+  XCircleIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -97,7 +97,7 @@ export default function DbLanding() {
         <LandingSectionIntro
           centered
           eyebrow="A third path"
-          icon={<Database aria-hidden="true" size={15} />}
+          icon={<DatabaseIcon aria-hidden="true" size={15} />}
           title="Stop choosing between endpoint sprawl and loading everything."
           body="Normalized collections keep the backend shape simple. Components can ask a fast local query engine for the exact joined, filtered, and aggregated view they need."
         />
@@ -109,7 +109,7 @@ export default function DbLanding() {
           <LiveQueryLab />
           <LandingSectionIntro
             eyebrow="Live relational queries"
-            icon={<Lightning aria-hidden="true" size={15} />}
+            icon={<LightningIcon aria-hidden="true" size={15} />}
             title="Describe the view. DB keeps the result current."
             body="Queries can filter, project, join, include, order, group, and aggregate across collections. Differential dataflow updates affected results incrementally as the underlying records change."
           />
@@ -120,7 +120,7 @@ export default function DbLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="On-demand sync"
-            icon={<Funnel aria-hidden="true" size={15} />}
+            icon={<FunnelIcon aria-hidden="true" size={15} />}
             title="The component query can shape the request."
             body="With on-demand sync, predicates, ordering, limits, and offsets can reach the collection loader. Translate them into API parameters and load only the subset active views require."
           />
@@ -132,7 +132,7 @@ export default function DbLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Brownfield by design"
-          icon={<Plugs aria-hidden="true" size={15} />}
+          icon={<PlugsIcon aria-hidden="true" size={15} />}
           title="Adopt collections without replacing the backend."
           body="Start from the data source already in production. Components use the same live-query model whether records arrive through TanStack Query, an API, local persistence, or a sync engine."
         />
@@ -244,14 +244,15 @@ function OptimisticWorkbench() {
                   className="inline-flex items-center gap-2 rounded-lg bg-action-primary px-3 py-2 text-ds-label-sm text-action-primary-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
                   onClick={() => setState('completed')}
                 >
-                  <CheckCircle aria-hidden="true" size={15} /> Server confirms
+                  <CheckCircleIcon aria-hidden="true" size={15} /> Server
+                  confirms
                 </button>
                 <button
                   type="button"
                   className="inline-flex items-center gap-2 rounded-lg border border-border-error px-3 py-2 text-ds-label-sm text-text-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error"
                   onClick={() => setState('failed')}
                 >
-                  <XCircle aria-hidden="true" size={15} /> Server rejects
+                  <XCircleIcon aria-hidden="true" size={15} /> Server rejects
                 </button>
               </>
             )}
@@ -431,17 +432,17 @@ function LiveQueryLab() {
 function QueryDrivenSync() {
   const steps = [
     {
-      icon: Funnel,
+      icon: FunnelIcon,
       label: 'active query',
       code: 'team = platform · limit 20',
     },
     {
-      icon: Network,
+      icon: NetworkIcon,
       label: 'load subset',
       code: 'ctx.meta.loadSubsetOptions',
     },
     {
-      icon: Database,
+      icon: DatabaseIcon,
       label: 'API request',
       code: 'GET /issues?team=platform&limit=20',
     },
@@ -490,7 +491,7 @@ function AdoptionPaths() {
           className="grid gap-5 border-b border-border-subtle p-5 last:border-b-0 md:grid-cols-[0.7fr_auto_1fr] md:items-center md:p-7"
         >
           <div className="flex items-center gap-3">
-            <Stack
+            <StackIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={20}
@@ -498,7 +499,7 @@ function AdoptionPaths() {
             <p className="text-ds-heading-5">{path.source}</p>
           </div>
           <div className="flex items-center gap-3 text-[var(--landing-accent-bright)]">
-            <ArrowRight
+            <ArrowRightIcon
               aria-hidden="true"
               className="rotate-90 md:rotate-0"
               size={18}
diff --git a/src/components/landing/DevtoolsLanding.tsx b/src/components/landing/DevtoolsLanding.tsx
index 935f7b6f1..583236a3f 100644
--- a/src/components/landing/DevtoolsLanding.tsx
+++ b/src/components/landing/DevtoolsLanding.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react'
 import {
-  AppWindow,
-  ArrowRight,
-  ArrowSquareOut,
-  Eye,
-  Gauge,
-  MagnifyingGlass,
-  Plug,
-  PuzzlePiece,
-  Sidebar,
-  Stack,
-  Terminal,
+  AppWindowIcon,
+  ArrowRightIcon,
+  ArrowSquareOutIcon,
+  EyeIcon,
+  GaugeIcon,
+  MagnifyingGlassIcon,
+  PlugIcon,
+  PuzzlePieceIcon,
+  SidebarIcon,
+  StackIcon,
+  TerminalIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -62,31 +62,35 @@ const inspectorPanels = [
 
 const shellParts = [
   {
-    icon: AppWindow,
+    icon: AppWindowIcon,
     label: 'Shell',
     detail: 'Trigger, panel, tabs, and settings',
   },
   {
-    icon: PuzzlePiece,
+    icon: PuzzlePieceIcon,
     label: 'Plugins',
     detail: 'Library and product inspectors',
   },
   {
-    icon: Plug,
+    icon: PlugIcon,
     label: 'Events',
     detail: 'Typed local, WebSocket, and SSE transport',
   },
   {
-    icon: Eye,
+    icon: EyeIcon,
     label: 'Source',
     detail: 'Element and log locations in the editor',
   },
   {
-    icon: Sidebar,
+    icon: SidebarIcon,
     label: 'Windowing',
     detail: 'Docking, persistence, hotkeys, and PiP',
   },
-  { icon: Stack, label: 'Adapters', detail: 'React, Vue, Solid, and Preact' },
+  {
+    icon: StackIcon,
+    label: 'Adapters',
+    detail: 'React, Vue, Solid, and Preact',
+  },
 ] as const
 
 export default function DevtoolsLanding() {
@@ -103,7 +107,7 @@ export default function DevtoolsLanding() {
         <LandingSectionIntro
           centered
           eyebrow="The shell is infrastructure"
-          icon={<AppWindow aria-hidden="true" size={15} />}
+          icon={<AppWindowIcon aria-hidden="true" size={15} />}
           title="Stop rebuilding everything around the useful panel."
           body="The trigger, tabs, window management, settings, persistence, hotkeys, source bridge, and transport are shared. Each library or product team can focus on the runtime truth it wants to expose."
         />
@@ -114,7 +118,7 @@ export default function DevtoolsLanding() {
         <div className="grid items-start gap-12 lg:grid-cols-[0.76fr_1.24fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Custom plugins"
-            icon={<PuzzlePiece aria-hidden="true" size={15} />}
+            icon={<PuzzlePieceIcon aria-hidden="true" size={15} />}
             title="Your product gets devtools too."
             body="Register a panel beside TanStack inspectors and communicate through a typed event client. Events can stay local or travel between browser and server over WebSocket or SSE."
           />
@@ -127,7 +131,7 @@ export default function DevtoolsLanding() {
           <ConsoleBridge />
           <LandingSectionIntro
             eyebrow="One debugging conversation"
-            icon={<Terminal aria-hidden="true" size={15} />}
+            icon={<TerminalIcon aria-hidden="true" size={15} />}
             title="See client and server logs without changing windows."
             body="The Vite integration can pipe browser logs into the terminal and server logs into the browser console, with enhanced source locations attached."
           />
@@ -138,7 +142,7 @@ export default function DevtoolsLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Development only"
-          icon={<MagnifyingGlass aria-hidden="true" size={15} />}
+          icon={<MagnifyingGlassIcon aria-hidden="true" size={15} />}
           title="Click straight to source. Ship none of the shell."
           body="Source injection connects elements and logs to their exact file and line during development. By default, the Vite plugin removes Devtools imports and matching JSX usage from production builds."
         />
@@ -177,7 +181,7 @@ function DevtoolsCockpit() {
               className="inline-flex items-center gap-1.5 rounded-md border border-border-strong px-2 py-1.5 font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary aria-pressed:border-[var(--landing-accent)] aria-pressed:text-[var(--landing-accent-bright)]"
               onClick={() => setIsInspecting((current) => !current)}
             >
-              <MagnifyingGlass aria-hidden="true" size={12} /> Inspect
+              <MagnifyingGlassIcon aria-hidden="true" size={12} /> Inspect
             </button>
           </div>
           <div className="mt-4 overflow-hidden rounded-lg border border-border-default bg-background-subtle">
@@ -377,7 +381,7 @@ function PluginEventLab() {
             className="mt-4 inline-flex items-center gap-2 rounded-lg bg-[var(--landing-accent)] px-3 py-2 text-ds-label-sm text-[var(--landing-accent-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
             onClick={() => setEventCount((current) => current + 1)}
           >
-            <Plug aria-hidden="true" size={15} /> Emit server event
+            <PlugIcon aria-hidden="true" size={15} /> Emit server event
           </button>
         </div>
       </div>
@@ -409,7 +413,7 @@ function ConsoleBridge() {
             )
           }
         >
-          <ArrowRight
+          <ArrowRightIcon
             aria-hidden="true"
             className={browserActive ? '' : 'rotate-180'}
             size={18}
@@ -451,7 +455,7 @@ function ConsolePane({
       }
     >
       <div className="flex items-center gap-2">
-        <Terminal
+        <TerminalIcon
           aria-hidden="true"
           className={
             active
@@ -482,14 +486,14 @@ function SourceToBuild() {
   return (
     <div className="mx-auto mt-14 grid max-w-[72rem] gap-5 lg:grid-cols-2">
       <div className="rounded-xl border border-border-default bg-background-surface p-6 md:p-8">
-        <LandingEyebrow icon={<Eye aria-hidden="true" size={14} />}>
+        <LandingEyebrow icon={<EyeIcon aria-hidden="true" size={14} />}>
           development
         </LandingEyebrow>
         <div className="mt-7 rounded-lg border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.12)] p-5">
           <p className="text-ds-heading-4">Project summary</p>
           <div className="mt-5 flex flex-wrap items-center justify-between gap-3 rounded bg-background-inverse px-3 py-2 font-ds-mono text-ds-mono-xs text-text-inverse">
             <span>Summary.tsx:14</span>
-            <ArrowSquareOut aria-hidden="true" size={15} />
+            <ArrowSquareOutIcon aria-hidden="true" size={15} />
           </div>
         </div>
         <p className="mt-5 text-ds-body-xs text-text-primary/35">
@@ -499,7 +503,7 @@ function SourceToBuild() {
       </div>
 
       <div className="rounded-xl border border-border-default bg-background-surface p-6 md:p-8">
-        <LandingEyebrow icon={<Gauge aria-hidden="true" size={14} />}>
+        <LandingEyebrow icon={<GaugeIcon aria-hidden="true" size={14} />}>
           production build
         </LandingEyebrow>
         <div className="mt-7 space-y-3 font-ds-mono text-ds-mono-2xs">
diff --git a/src/components/landing/FormLanding.tsx b/src/components/landing/FormLanding.tsx
index 1f6234562..a7784c85c 100644
--- a/src/components/landing/FormLanding.tsx
+++ b/src/components/landing/FormLanding.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import {
-  ArrowsSplit,
-  BracketsCurly,
-  CircleNotch,
-  Fingerprint,
+  ArrowsSplitIcon,
+  BracketsCurlyIcon,
+  CircleNotchIcon,
+  FingerprintIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -73,7 +73,7 @@ export default function FormLanding() {
           <LandingSectionIntro
             body="Create the field components and defaults your team agrees on, then compose product-specific forms without giving up inference or markup control."
             eyebrow="Composition"
-            icon={<BracketsCurly aria-hidden="true" size={17} />}
+            icon={<BracketsCurlyIcon aria-hidden="true" size={17} />}
             title="Build your form system once. Keep every form specific."
           />
 
@@ -108,7 +108,7 @@ export default function FormLanding() {
         <LandingSectionIntro
           body="Validation is not one callback. Put each rule at the event where it helps, debounce expensive checks, and expose pending state to the exact surface that needs it."
           eyebrow="Validation orchestration"
-          icon={<CircleNotch aria-hidden="true" size={17} />}
+          icon={<CircleNotchIcon aria-hidden="true" size={17} />}
           title="Run each rule at the speed of the user."
         />
 
@@ -141,7 +141,7 @@ export default function FormLanding() {
             <LandingSectionIntro
               body="A price preview can listen to the plan. A submit button can listen to canSubmit. Field feedback can listen to its own metadata. The rest of the form stays quiet."
               eyebrow="Granular subscriptions"
-              icon={<ArrowsSplit aria-hidden="true" size={17} />}
+              icon={<ArrowsSplitIcon aria-hidden="true" size={17} />}
               title="Large forms update in small pieces."
             />
             <div className="mt-8 grid grid-cols-3 gap-3">
@@ -183,7 +183,7 @@ export default function FormLanding() {
               </pre>
               <div className="mt-6 grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-center">
                 <StateNode label="form.state.canSubmit" status="changed" />
-                <ArrowsSplit
+                <ArrowsSplitIcon
                   aria-hidden="true"
                   className="mx-auto rotate-90 text-[var(--landing-accent-bright)] sm:rotate-0"
                   size={20}
@@ -283,7 +283,9 @@ function FormCockpit() {
         </div>
 
         <div className="flex flex-col p-5">
-          <LandingEyebrow icon={<Fingerprint aria-hidden="true" size={14} />}>
+          <LandingEyebrow
+            icon={<FingerprintIcon aria-hidden="true" size={14} />}
+          >
             live form state
           </LandingEyebrow>
           <dl className="mt-6 space-y-4">
diff --git a/src/components/landing/HighlightLanding.tsx b/src/components/landing/HighlightLanding.tsx
index 9eec2a9b4..a07249db9 100644
--- a/src/components/landing/HighlightLanding.tsx
+++ b/src/components/landing/HighlightLanding.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  Cube as Boxes,
-  BracketsCurly as Braces,
-  Check,
-  Gauge as CircleGauge,
-  Stack as Layers3,
-  Palette,
-  Scan as ScanText,
-  Lightning as Zap,
+  ArrowRightIcon,
+  CubeIcon as Boxes,
+  BracketsCurlyIcon as Braces,
+  CheckIcon,
+  GaugeIcon as CircleGauge,
+  StackIcon as Layers3,
+  PaletteIcon,
+  ScanIcon as ScanText,
+  LightningIcon as Zap,
 } from '@phosphor-icons/react'
 
 import { LibraryWordmark } from '~/components/LibraryWordmark'
@@ -96,7 +96,7 @@ export default function HighlightLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.76fr_1.24fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Semantic output"
-            icon={<Palette aria-hidden="true" size={15} />}
+            icon={<PaletteIcon aria-hidden="true" size={15} />}
             title="Change the palette. Keep the markup."
             body="Tokens carry stable semantic classes instead of theme colors. CSS variables recolor the same tree without a second highlighting pass."
           />
@@ -195,7 +195,7 @@ export default function HighlightLanding() {
             </p>
             <span className="mt-6 inline-flex items-center gap-2 text-ds-label-md">
               Explore Markdown
-              <ArrowRight
+              <ArrowRightIcon
                 aria-hidden="true"
                 className="transition-transform group-hover:translate-x-1"
                 size={16}
@@ -654,7 +654,7 @@ function ChoiceRow({ name, useWhen }: { name: string; useWhen: string }) {
   return (
     <div className="grid gap-2 border-b border-border-subtle px-5 py-5 last:border-b-0 sm:grid-cols-[12rem_1fr] sm:gap-5">
       <div className="inline-flex items-center gap-2 font-black">
-        <Check
+        <CheckIcon
           size={15}
           aria-hidden="true"
           className="text-[var(--landing-accent-bright)]"
diff --git a/src/components/landing/HotkeysLanding.tsx b/src/components/landing/HotkeysLanding.tsx
index e6c3d2cd5..36e489441 100644
--- a/src/components/landing/HotkeysLanding.tsx
+++ b/src/components/landing/HotkeysLanding.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import {
-  ArrowsLeftRight,
-  Clock,
-  Command,
-  Crosshair,
-  Keyboard,
-  Stack,
-  WarningCircle,
+  ArrowsLeftRightIcon,
+  ClockIcon,
+  CommandIcon,
+  CrosshairIcon,
+  KeyboardIcon,
+  StackIcon,
+  WarningCircleIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -61,19 +61,19 @@ const scopes = [
 
 const gestures = [
   {
-    icon: Command,
+    icon: CommandIcon,
     label: 'Chord',
     binding: 'Mod + Shift + P',
     body: 'Several keys resolve as one command.',
   },
   {
-    icon: ArrowsLeftRight,
+    icon: ArrowsLeftRightIcon,
     label: 'Sequence',
     binding: 'G then D',
     body: 'Ordered keys create a tiny command language.',
   },
   {
-    icon: Clock,
+    icon: ClockIcon,
     label: 'Held key',
     binding: 'Space · 400ms',
     body: 'Press duration can become part of the gesture.',
@@ -95,7 +95,7 @@ export default function HotkeysLanding() {
           <LandingSectionIntro
             body="The same key can mean one thing globally, another thing inside an editor, and nothing while the user is typing. Scopes make that context explicit."
             eyebrow="Command scope"
-            icon={<Crosshair aria-hidden="true" size={17} />}
+            icon={<CrosshairIcon aria-hidden="true" size={17} />}
             title="A shortcut needs an address."
           />
           <ScopeStack />
@@ -106,7 +106,7 @@ export default function HotkeysLanding() {
         <LandingSectionIntro
           body="A command palette chord is useful. So are Vim-like sequences, press-and-hold actions, key releases, and keys that remain active while the pointer moves."
           eyebrow="Gesture grammar"
-          icon={<Keyboard aria-hidden="true" size={17} />}
+          icon={<KeyboardIcon aria-hidden="true" size={17} />}
           title="Chords are only the first sentence."
         />
         <div className="mt-10 grid gap-4 md:grid-cols-3">
@@ -144,11 +144,11 @@ export default function HotkeysLanding() {
             <LandingSectionIntro
               body="Treat bindings as user data. Record a gesture, normalize it into a portable definition, format it for the current platform, and reuse it everywhere the command appears."
               eyebrow="Custom bindings"
-              icon={<ArrowsLeftRight aria-hidden="true" size={17} />}
+              icon={<ArrowsLeftRightIcon aria-hidden="true" size={17} />}
               title="Let users own the muscle memory."
             />
             <p className="mt-7 flex items-start gap-3 text-ds-body-xs text-text-primary/40">
-              <WarningCircle
+              <WarningCircleIcon
                 aria-hidden="true"
                 className="mt-0.5 shrink-0 text-[var(--landing-accent-bright)]"
                 size={17}
@@ -221,7 +221,7 @@ function ShortcutStudio() {
     <LandingWindow label="shortcut settings">
       <div className="grid min-h-[23rem] md:grid-cols-[0.92fr_1.08fr]">
         <div className="border-border-subtle p-4 md:border-r">
-          <LandingEyebrow icon={<Stack aria-hidden="true" size={14} />}>
+          <LandingEyebrow icon={<StackIcon aria-hidden="true" size={14} />}>
             commands
           </LandingEyebrow>
           <div className="mt-4 space-y-2">
diff --git a/src/components/landing/IntentLanding.tsx b/src/components/landing/IntentLanding.tsx
index 1c432e7c0..cf89cc879 100644
--- a/src/components/landing/IntentLanding.tsx
+++ b/src/components/landing/IntentLanding.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import {
-  CheckCircle,
-  ClockCounterClockwise,
-  FileMagnifyingGlass,
-  LockKey,
-  Package,
-  Robot,
-  Scan,
-  ShieldCheck,
+  CheckCircleIcon,
+  ClockCounterClockwiseIcon,
+  FileMagnifyingGlassIcon,
+  LockKeyIcon,
+  PackageIcon,
+  RobotIcon,
+  ScanIcon,
+  ShieldCheckIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -59,7 +59,7 @@ export default function IntentLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Consumer trust model"
-          icon={<ShieldCheck aria-hidden="true" size={15} />}
+          icon={<ShieldCheckIcon aria-hidden="true" size={15} />}
           title="Discovery can scan the workspace. Trust is still explicit."
           body="Intent can inspect workspace dependencies for static skill files without executing package code. An allowlist and exclusions decide which packages may contribute guidance, and the agent loads a skill only when the task calls for it."
         />
@@ -71,7 +71,7 @@ export default function IntentLanding() {
           <FreshnessWorkbench />
           <LandingSectionIntro
             eyebrow="Conservative freshness"
-            icon={<ClockCounterClockwise aria-hidden="true" size={15} />}
+            icon={<ClockCounterClockwiseIcon aria-hidden="true" size={15} />}
             title="A changed source is a review signal, not proof of bad guidance."
             body="Skills declare the documentation they depend on. intent stale can flag a skill when those sources move, but it does not pretend to understand whether the semantic advice is wrong. Maintainers make that call."
           />
@@ -82,7 +82,7 @@ export default function IntentLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.84fr_1.16fr] lg:items-center lg:gap-16">
           <LandingSectionIntro
             eyebrow="Maintainer loop"
-            icon={<Package aria-hidden="true" size={15} />}
+            icon={<PackageIcon aria-hidden="true" size={15} />}
             title="The skill releases with the code it explains."
             body="Generate or author guidance near the package, validate its structure and source references in CI, then include it in the npm tarball. The package version becomes the skill version; the public registry makes that history browsable after indexing."
           />
@@ -180,7 +180,7 @@ function SkillDiscoveryHero() {
                 setLoaded(false)
               }}
             >
-              <LockKey aria-hidden="true" size={16} />
+              <LockKeyIcon aria-hidden="true" size={16} />
               {allowed ? 'Allowed' : 'Allow package'}
             </button>
             <button
@@ -191,9 +191,9 @@ function SkillDiscoveryHero() {
               onClick={() => setLoaded((current) => !current)}
             >
               {loaded ? (
-                <CheckCircle aria-hidden="true" size={16} />
+                <CheckCircleIcon aria-hidden="true" size={16} />
               ) : (
-                <Robot aria-hidden="true" size={16} />
+                <RobotIcon aria-hidden="true" size={16} />
               )}
               {loaded ? 'Guidance loaded' : 'Load for task'}
             </button>
@@ -207,22 +207,22 @@ function SkillDiscoveryHero() {
 function TrustPath() {
   const steps = [
     {
-      icon: Scan,
+      icon: ScanIcon,
       label: 'Scan',
       detail: 'Read package metadata and static skill files.',
     },
     {
-      icon: LockKey,
+      icon: LockKeyIcon,
       label: 'Allow',
       detail: 'Match package names against your allowlist and exclusions.',
     },
     {
-      icon: FileMagnifyingGlass,
+      icon: FileMagnifyingGlassIcon,
       label: 'Inspect',
       detail: 'Keep source references and skill content visible.',
     },
     {
-      icon: Robot,
+      icon: RobotIcon,
       label: 'Load',
       detail: 'Give only relevant guidance to the active agent task.',
     },
@@ -347,7 +347,7 @@ function PublicationTimeline() {
                   {detail}
                 </p>
               </div>
-              <CheckCircle
+              <CheckCircleIcon
                 aria-hidden="true"
                 className="text-icon-success"
                 size={17}
diff --git a/src/components/landing/LandingCopyPromptButton.tsx b/src/components/landing/LandingCopyPromptButton.tsx
index 3ea9362bc..8eeefddf2 100644
--- a/src/components/landing/LandingCopyPromptButton.tsx
+++ b/src/components/landing/LandingCopyPromptButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CheckCircle, Copy } from '@phosphor-icons/react'
+import { CheckCircleIcon, CopyIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 
@@ -61,9 +61,9 @@ export function LandingCopyPromptButton({
       }}
     >
       {status === 'copied' ? (
-        <CheckCircle size={16} aria-hidden="true" />
+        <CheckCircleIcon size={16} aria-hidden="true" />
       ) : (
-        <Copy size={16} aria-hidden="true" />
+        <CopyIcon size={16} aria-hidden="true" />
       )}
       {status === 'copied'
         ? 'Copied'
diff --git a/src/components/landing/LibraryLanding.tsx b/src/components/landing/LibraryLanding.tsx
index 0dcbc03e1..04a5ebf99 100644
--- a/src/components/landing/LibraryLanding.tsx
+++ b/src/components/landing/LibraryLanding.tsx
@@ -2,13 +2,13 @@ import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link, useParams } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  ArrowsClockwise,
-  CalendarDots,
-  DownloadSimple,
-  Plus,
-  Star,
-  Swap,
+  ArrowRightIcon,
+  ArrowsClockwiseIcon,
+  CalendarDotsIcon,
+  DownloadSimpleIcon,
+  PlusIcon,
+  StarIcon,
+  SwapIcon,
   type Icon,
 } from '@phosphor-icons/react'
 
@@ -298,7 +298,7 @@ export function LibraryLandingShell({
                   }}
                 >
                   Docs
-                  <ArrowRight aria-hidden="true" size={20} weight="bold" />
+                  <ArrowRightIcon aria-hidden="true" size={20} weight="bold" />
                 </Link>
                 <LandingCopyPromptButton
                   className="rounded-xl border-[var(--landing-accent)] bg-transparent px-5 py-3 font-ds-mono text-ds-mono-caps uppercase text-[var(--landing-accent-bright)] hover:border-[var(--landing-accent-bright)] hover:bg-[color:rgb(var(--landing-glow)/0.1)] sm:w-auto"
@@ -501,7 +501,7 @@ function LandingWorkbench({
                 )
               }
             >
-              <Plus aria-hidden="true" size={13} weight="bold" />
+              <PlusIcon aria-hidden="true" size={13} weight="bold" />
               {config.actionLabel}
             </button>
           </div>
@@ -541,19 +541,19 @@ function LandingStats({ libraryId }: { libraryId: LibraryLandingId }) {
   const metrics = [
     {
       href: 'https://www.npmjs.com/org/tanstack',
-      icon: DownloadSimple,
+      icon: DownloadSimpleIcon,
       label: 'total downloads',
       value: formatCompactNumber(stats?.npm?.totalDownloads),
     },
     {
       href: 'https://www.npmjs.com/org/tanstack',
-      icon: CalendarDots,
+      icon: CalendarDotsIcon,
       label: 'weekly downloads',
       value: formatFullNumber(downloads?.weeklyDownloads),
     },
     {
       href: `https://github.com/${library.repo}`,
-      icon: Star,
+      icon: StarIcon,
       label: 'GitHub stars',
       value: formatFullNumber(stats?.github?.starCount),
     },
@@ -619,7 +619,9 @@ function FeatureSection({
   return (
     <section className="border-b border-border-subtle bg-background-default px-5 py-16 md:px-10 lg:px-12 lg:py-20 2xl:px-20">
       <div className="mx-auto w-full max-w-[96rem]">
-        <LandingEyebrow icon={<ArrowsClockwise aria-hidden="true" size={14} />}>
+        <LandingEyebrow
+          icon={<ArrowsClockwiseIcon aria-hidden="true" size={14} />}
+        >
           {distinction}
         </LandingEyebrow>
 
@@ -708,7 +710,7 @@ function LifecycleSection({
       <div className="mx-auto grid w-full max-w-[90rem] items-center gap-14 lg:grid-cols-[minmax(18rem,0.9fr)_minmax(32rem,1.1fr)] lg:gap-16">
         <div className="max-w-[36rem]">
           <LandingEyebrow
-            icon={<ArrowsClockwise aria-hidden="true" size={14} />}
+            icon={<ArrowsClockwiseIcon aria-hidden="true" size={14} />}
           >
             {lifecycle.label}
           </LandingEyebrow>
@@ -754,7 +756,7 @@ function FlowSection({ flow }: { flow: LibraryLandingConfig['flow'] }) {
   return (
     <section className="min-h-[37.5rem] border-b border-border-subtle bg-background-default px-5 py-16 md:px-10 lg:px-12 lg:py-20 2xl:px-20">
       <div className="mx-auto flex w-full max-w-[70rem] flex-col items-center text-center">
-        <LandingEyebrow icon={<Swap aria-hidden="true" size={16} />}>
+        <LandingEyebrow icon={<SwapIcon aria-hidden="true" size={16} />}>
           {flow.label}
         </LandingEyebrow>
         <h2 className="mt-6 max-w-[47rem] text-ds-heading-1 md:text-ds-display-sm">
diff --git a/src/components/landing/MarkdownLanding.tsx b/src/components/landing/MarkdownLanding.tsx
index 068b5088d..9277cc963 100644
--- a/src/components/landing/MarkdownLanding.tsx
+++ b/src/components/landing/MarkdownLanding.tsx
@@ -5,19 +5,19 @@ import { renderDocument, renderHtml } from '@tanstack/markdown/html'
 import { Markdown } from '@tanstack/markdown/react'
 import { streamingMarkdownExtension } from '@tanstack/markdown/extensions/streaming'
 import {
-  ArrowRight,
-  BracketsCurly as Braces,
-  Check,
-  FileText,
-  Highlighter,
-  LockKey as LockKeyhole,
-  Package as PackageOpen,
-  Pause,
-  Play,
-  Radio,
-  ArrowCounterClockwise as RotateCcw,
-  ShieldCheck,
-  X,
+  ArrowRightIcon,
+  BracketsCurlyIcon as Braces,
+  CheckIcon,
+  FileTextIcon,
+  HighlighterIcon,
+  LockKeyIcon as LockKeyhole,
+  PackageIcon as PackageOpen,
+  PauseIcon,
+  PlayIcon,
+  RadioIcon,
+  ArrowCounterClockwiseIcon as RotateCcw,
+  ShieldCheckIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 
 import { LibraryWordmark } from '~/components/LibraryWordmark'
@@ -183,7 +183,7 @@ export default function MarkdownLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Accumulated AI responses"
-            icon={<Radio aria-hidden="true" size={15} />}
+            icon={<RadioIcon aria-hidden="true" size={15} />}
             title="Stream the text. Keep the parser stateless."
             body="Append each chunk and pass the complete string through Markdown. The optional streaming profile reparses synchronously, with no incremental state to coordinate or recover."
           />
@@ -195,7 +195,7 @@ export default function MarkdownLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="A deliberate profile"
-            icon={<FileText aria-hidden="true" size={15} />}
+            icon={<FileTextIcon aria-hidden="true" size={15} />}
             title="It does less Markdown on purpose."
             body="Technical docs need a known vocabulary, not an open-ended compiler platform. New syntax has to justify its bytes, ambiguity, and maintenance cost."
           />
@@ -215,7 +215,7 @@ export default function MarkdownLanding() {
         <div className="mt-12 grid items-center gap-12 border-t border-border-subtle pt-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Boundary behavior"
-            icon={<ShieldCheck aria-hidden="true" size={15} />}
+            icon={<ShieldCheckIcon aria-hidden="true" size={15} />}
             title="Unsafe surprises are opt-in."
             body="Raw HTML starts escaped, executable URL schemes are stripped, and text, attributes, and code are encoded at render time."
           />
@@ -239,7 +239,7 @@ export default function MarkdownLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[1.08fr_0.92fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Content, then color"
-            icon={<Highlighter aria-hidden="true" size={15} />}
+            icon={<HighlighterIcon aria-hidden="true" size={15} />}
             title="Syntax highlighting stays outside the parser."
             body="Code fences carry language and metadata. An explicit highlighter renders them later, so the core never silently imports a grammar engine."
           />
@@ -260,7 +260,7 @@ export default function MarkdownLanding() {
             </p>
             <span className="mt-6 inline-flex items-center gap-2 text-ds-label-md">
               Explore Highlight
-              <ArrowRight
+              <ArrowRightIcon
                 aria-hidden="true"
                 className="transition-transform group-hover:translate-x-1"
                 size={16}
@@ -568,9 +568,9 @@ function StreamingReplay() {
           {isComplete ? (
             <RotateCcw size={13} aria-hidden="true" />
           ) : isPlaying ? (
-            <Pause size={13} aria-hidden="true" />
+            <PauseIcon size={13} aria-hidden="true" />
           ) : (
-            <Play size={13} aria-hidden="true" />
+            <PlayIcon size={13} aria-hidden="true" />
           )}
           {isComplete ? 'Replay stream' : isPlaying ? 'Pause' : 'Resume'}
         </button>
@@ -645,13 +645,13 @@ function SyntaxList({
         {items.map((item) => (
           <li key={item} className="flex items-start gap-3 text-sm font-bold">
             {included ? (
-              <Check
+              <CheckIcon
                 size={16}
                 aria-hidden="true"
                 className="mt-0.5 shrink-0 text-emerald-600"
               />
             ) : (
-              <X
+              <XIcon
                 size={16}
                 aria-hidden="true"
                 className="mt-0.5 shrink-0 text-zinc-400"
diff --git a/src/components/landing/PacerLanding.tsx b/src/components/landing/PacerLanding.tsx
index 7fb1a9c5c..73451804a 100644
--- a/src/components/landing/PacerLanding.tsx
+++ b/src/components/landing/PacerLanding.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react'
-import { ArrowsSplit, Clock, Gauge, Rows } from '@phosphor-icons/react'
+import {
+  ArrowsSplitIcon,
+  ClockIcon,
+  GaugeIcon,
+  RowsIcon,
+} from '@phosphor-icons/react'
 
 import {
   LandingEyebrow,
@@ -73,7 +78,7 @@ export default function PacerLanding() {
         <LandingSectionIntro
           body="Each policy answers a different product question. Pick one by deciding whether work may be dropped, delayed, sampled, or grouped—not by reaching for the timer you remember."
           eyebrow="Policy map"
-          icon={<ArrowsSplit aria-hidden="true" size={17} />}
+          icon={<ArrowsSplitIcon aria-hidden="true" size={17} />}
           title="Choose by what you can afford to lose."
         />
         <PolicyMap />
@@ -85,7 +90,7 @@ export default function PacerLanding() {
             <LandingSectionIntro
               body="Queues turn a pile of promises into explicit traffic: order, priority, concurrency, expiration, retries, and cancellation all have a place in the model."
               eyebrow="Async traffic control"
-              icon={<Rows aria-hidden="true" size={17} />}
+              icon={<RowsIcon aria-hidden="true" size={17} />}
               title="Backpressure becomes product behavior."
             />
             <div className="mt-8 grid grid-cols-3 gap-3">
@@ -149,7 +154,7 @@ export default function PacerLanding() {
           <LandingSectionIntro
             body="Timing state should not disappear inside a closure. Subscribe to execution counts, pending work, errors, and status; inspect the same model in devtools; adopt the core alone when that is all you need."
             eyebrow="Observable by design"
-            icon={<Gauge aria-hidden="true" size={17} />}
+            icon={<GaugeIcon aria-hidden="true" size={17} />}
             title="The timer is no longer a black box."
           />
         </div>
@@ -357,7 +362,7 @@ function QueueControl() {
     <LandingWindow label="upload queue">
       <div className="p-4 sm:p-5">
         <div className="flex items-center justify-between gap-4">
-          <LandingEyebrow icon={<Clock aria-hidden="true" size={14} />}>
+          <LandingEyebrow icon={<ClockIcon aria-hidden="true" size={14} />}>
             concurrency / 2
           </LandingEyebrow>
           <button
diff --git a/src/components/landing/QueryLanding.tsx b/src/components/landing/QueryLanding.tsx
index a9d6855ed..ebf747b52 100644
--- a/src/components/landing/QueryLanding.tsx
+++ b/src/components/landing/QueryLanding.tsx
@@ -1,4 +1,9 @@
-import { EyeClosed, Key, Lightning, Skull } from '@phosphor-icons/react'
+import {
+  EyeClosedIcon,
+  KeyIcon,
+  LightningIcon,
+  SkullIcon,
+} from '@phosphor-icons/react'
 
 import { LibraryLanding, type LibraryLandingConfig } from './LibraryLanding'
 
@@ -43,25 +48,25 @@ const queryLanding = {
   },
   features: [
     {
-      icon: Skull,
+      icon: SkullIcon,
       label: 'Deadly defaults',
       title: 'Deadly defaults kill boring work.',
       body: 'Caching, request deduplication, retries, background refetching, window-focus updates, and garbage collection arrive wired for real applications.',
     },
     {
-      icon: Key,
+      icon: KeyIcon,
       label: 'Query keys',
       title: 'Keys become the cache contract.',
       body: 'Model the resource, inputs, filters, and scope once so reads, writes, invalidation, prefetching, and devtools all speak the same language.',
     },
     {
-      icon: Lightning,
+      icon: LightningIcon,
       label: 'State Management',
       title: 'Writes get a real lifecycle.',
       body: 'Pending UI, optimistic updates, rollback, targeted invalidation, and background reconciliation stay explicit instead of scattering through components.',
     },
     {
-      icon: EyeClosed,
+      icon: EyeClosedIcon,
       label: 'Devtools',
       title: 'See what the cache is doing.',
       body: 'Inspect keys, observers, freshness, retries, errors, mutations, and cache contents while the application is actually running.',
diff --git a/src/components/landing/RangerLanding.tsx b/src/components/landing/RangerLanding.tsx
index e0115757b..43b68c9f8 100644
--- a/src/components/landing/RangerLanding.tsx
+++ b/src/components/landing/RangerLanding.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import {
-  ArrowsLeftRight,
-  BracketsCurly,
-  Palette,
-  Ruler,
-  SlidersHorizontal,
+  ArrowsLeftRightIcon,
+  BracketsCurlyIcon,
+  PaletteIcon,
+  RulerIcon,
+  SlidersHorizontalIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -60,7 +60,7 @@ export default function RangerLanding() {
           <LandingSectionIntro
             body="Prices, audio gain, risk scores, and timelines do not all move through value space the same way. Supply the interpolation instead of forcing the product into a linear track."
             eyebrow="Custom interpolation"
-            icon={<Ruler aria-hidden="true" size={17} />}
+            icon={<RulerIcon aria-hidden="true" size={17} />}
             title="Not every useful scale is linear."
           />
           <ScaleLab />
@@ -71,7 +71,7 @@ export default function RangerLanding() {
         <LandingSectionIntro
           body="A set of values produces handles. The spaces around them produce meaningful regions: selected, excluded, buffered, safe, risky, or already played."
           eyebrow="Multi-value geometry"
-          icon={<ArrowsLeftRight aria-hidden="true" size={17} />}
+          icon={<ArrowsLeftRightIcon aria-hidden="true" size={17} />}
           title="Values become handles. Gaps become segments."
         />
 
@@ -116,7 +116,7 @@ export default function RangerLanding() {
           <LandingSectionIntro
             body="Ranger provides positions, ticks, segments, and event handlers. Your interface decides whether those numbers become a price filter, a timeline, a color ramp, or something nobody has shipped yet."
             eyebrow="Headless boundary"
-            icon={<Palette aria-hidden="true" size={17} />}
+            icon={<PaletteIcon aria-hidden="true" size={17} />}
             title="The engine ends where the product begins."
           />
 
@@ -143,7 +143,7 @@ export default function RangerLanding() {
               />
             </div>
             <div className="border-t border-border-subtle px-5 py-4 font-ds-mono text-ds-mono-2xs text-text-primary/35">
-              <BracketsCurly
+              <BracketsCurlyIcon
                 aria-hidden="true"
                 className="mr-2 inline text-[var(--landing-accent-bright)]"
                 size={15}
@@ -319,7 +319,7 @@ function ScaleLab() {
           </svg>
           <div>
             <LandingEyebrow
-              icon={<SlidersHorizontal aria-hidden="true" size={14} />}
+              icon={<SlidersHorizontalIcon aria-hidden="true" size={14} />}
             >
               position → value
             </LandingEyebrow>
diff --git a/src/components/landing/RouterLanding.tsx b/src/components/landing/RouterLanding.tsx
index 5a8d3f841..a28308b3b 100644
--- a/src/components/landing/RouterLanding.tsx
+++ b/src/components/landing/RouterLanding.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import {
-  ArrowRight,
-  BracketsCurly,
-  CheckCircle,
-  CursorClick,
-  Link as LinkIcon,
-  MagnifyingGlass,
-  Path,
-  TreeStructure,
+  ArrowRightIcon,
+  BracketsCurlyIcon,
+  CheckCircleIcon,
+  CursorClickIcon,
+  LinkIcon,
+  MagnifyingGlassIcon,
+  PathIcon,
+  TreeStructureIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -61,19 +61,19 @@ const contractNodes = [
     detail: 'Navigation autocompletes against the route tree.',
   },
   {
-    icon: Path,
+    icon: PathIcon,
     label: 'Match',
     code: 'beforeLoad({ params })',
     detail: 'Path, search, and inherited context narrow together.',
   },
   {
-    icon: BracketsCurly,
+    icon: BracketsCurlyIcon,
     label: 'Load',
     code: 'loader({ deps })',
     detail: 'Typed dependencies start before the component renders.',
   },
   {
-    icon: CheckCircle,
+    icon: CheckCircleIcon,
     label: 'Render',
     code: 'Route.useLoaderData()',
     detail: 'The component receives the exact loader result.',
@@ -95,7 +95,7 @@ export default function RouterLanding() {
           <SearchStateLab />
           <LandingSectionIntro
             eyebrow="URL state"
-            icon={<MagnifyingGlass aria-hidden="true" size={15} />}
+            icon={<MagnifyingGlassIcon aria-hidden="true" size={15} />}
             title="The URL is a state manager, not a string bucket."
             body="Search params are parsed, validated, inherited, and typed. Filters, pagination, and tabs survive refreshes, back navigation, bookmarks, and shared links without hand-written serialization."
           />
@@ -106,7 +106,7 @@ export default function RouterLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.88fr_1.12fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Preloading"
-            icon={<CursorClick aria-hidden="true" size={15} />}
+            icon={<CursorClickIcon aria-hidden="true" size={15} />}
             title="Navigation can begin before the click."
             body="Intent, viewport, and render strategies can preload route code and data. By the time navigation commits, the next screen can already be waiting."
           />
@@ -118,7 +118,7 @@ export default function RouterLanding() {
         <LandingSectionIntro
           centered
           eyebrow="One contract"
-          icon={<TreeStructure aria-hidden="true" size={15} />}
+          icon={<TreeStructureIcon aria-hidden="true" size={15} />}
           title="Types survive the whole trip."
           body="The destination, matched route, loader dependencies, and rendered data all derive from the same route definition. Refactors fail in the editor instead of after deployment."
         />
@@ -214,7 +214,7 @@ function RouteContractHero() {
             className="mt-4 inline-flex items-center gap-2 rounded-lg border border-[var(--landing-accent)] px-3 py-2 text-ds-label-sm text-[var(--landing-accent-bright)] transition-colors hover:bg-[color:rgb(var(--landing-glow)/0.14)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-bright)]"
             onClick={() => setUsesRefactoredParam((current) => !current)}
           >
-            <BracketsCurly aria-hidden="true" size={16} />
+            <BracketsCurlyIcon aria-hidden="true" size={16} />
             {usesRefactoredParam ? 'Restore param name' : 'Refactor param name'}
           </button>
         </div>
@@ -225,7 +225,7 @@ function RouteContractHero() {
               routeTree.gen.ts
             </p>
             <span className="inline-flex items-center gap-1.5 text-ds-body-xs text-text-primary/35">
-              <CheckCircle
+              <CheckCircleIcon
                 aria-hidden="true"
                 className="text-icon-success"
                 size={15}
@@ -364,7 +364,7 @@ function PreloadTrace() {
               Hover or focus to preload. Click to navigate.
             </span>
           </span>
-          <ArrowRight
+          <ArrowRightIcon
             aria-hidden="true"
             className="shrink-0 text-[var(--landing-accent-bright)] transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
             size={22}
diff --git a/src/components/landing/StartLanding.tsx b/src/components/landing/StartLanding.tsx
index 439ad458f..82523bfb6 100644
--- a/src/components/landing/StartLanding.tsx
+++ b/src/components/landing/StartLanding.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 import {
-  ArrowRight,
-  BracketsCurly,
-  Cloud,
-  Code,
-  GitBranch,
-  HardDrives,
-  Network,
-  Rocket,
-  ShieldCheck,
-  Stack,
+  ArrowRightIcon,
+  BracketsCurlyIcon,
+  CloudIcon,
+  CodeIcon,
+  GitBranchIcon,
+  HardDrivesIcon,
+  NetworkIcon,
+  RocketIcon,
+  ShieldCheckIcon,
+  StackIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -110,7 +110,7 @@ export default function StartLanding() {
         <div className="grid items-center gap-14 lg:grid-cols-[0.82fr_1.18fr] lg:gap-20">
           <LandingSectionIntro
             eyebrow="Router at the core"
-            icon={<GitBranch aria-hidden="true" size={15} />}
+            icon={<GitBranchIcon aria-hidden="true" size={15} />}
             title="The framework does not replace the application model."
             body="Routes, params, search schemas, loaders, links, pending states, and boundaries stay TanStack Router. Start adds the server and build layers around that same tree."
           />
@@ -122,7 +122,7 @@ export default function StartLanding() {
         <div className="grid items-start gap-12 lg:grid-cols-[0.75fr_1.25fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Explicit boundaries"
-            icon={<ShieldCheck aria-hidden="true" size={15} />}
+            icon={<ShieldCheckIcon aria-hidden="true" size={15} />}
             title="Server work is visible in the code that calls it."
             body="Use server functions for type-safe app calls, server routes for outside callers, and composable middleware for authentication, context, logging, and policy."
           />
@@ -134,7 +134,7 @@ export default function StartLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Portable application model"
-          icon={<Rocket aria-hidden="true" size={15} />}
+          icon={<RocketIcon aria-hidden="true" size={15} />}
           title="Keep the routes. Change the output."
           body="Start supports Vite and Rsbuild and is designed for different hosting providers and runtimes. Deployment configuration changes; route authoring and server boundaries do not."
         />
@@ -182,19 +182,19 @@ function ExecutionMapHero() {
           aria-live="polite"
         >
           <RuntimeColumn
-            icon={<HardDrives aria-hidden="true" size={17} />}
+            icon={<HardDrivesIcon aria-hidden="true" size={17} />}
             label="server"
             steps={mode.server}
           />
           <div className="flex items-center justify-center py-1 text-[var(--landing-accent-bright)] md:px-1">
-            <ArrowRight
+            <ArrowRightIcon
               aria-hidden="true"
               className="rotate-90 md:rotate-0"
               size={22}
             />
           </div>
           <RuntimeColumn
-            icon={<Code aria-hidden="true" size={17} />}
+            icon={<CodeIcon aria-hidden="true" size={17} />}
             label="browser"
             steps={mode.browser}
           />
@@ -252,19 +252,19 @@ function RouterFoundation() {
     {
       label: 'Start server layer',
       detail: 'SSR · streaming · server functions · routes · middleware',
-      icon: HardDrives,
+      icon: HardDrivesIcon,
       accent: true,
     },
     {
       label: 'TanStack Router',
       detail: 'route tree · URL state · loaders · links · boundaries',
-      icon: Network,
+      icon: NetworkIcon,
       accent: false,
     },
     {
       label: 'Your application',
       detail: 'components · data clients · product behavior',
-      icon: Stack,
+      icon: StackIcon,
       accent: false,
     },
   ] as const
@@ -375,7 +375,7 @@ function DeploymentSelector() {
             onClick={() => setActiveIndex(index)}
           >
             <span className="text-ds-label-md">{target.label}</span>
-            <Cloud aria-hidden="true" className="shrink-0" size={19} />
+            <CloudIcon aria-hidden="true" className="shrink-0" size={19} />
           </button>
         ))}
       </div>
@@ -387,7 +387,7 @@ function DeploymentSelector() {
               <LandingEyebrow>selected target</LandingEyebrow>
               <h3 className="mt-4 text-ds-heading-2">{active.label}</h3>
             </div>
-            <Rocket
+            <RocketIcon
               aria-hidden="true"
               className="text-[var(--landing-accent-bright)]"
               size={30}
@@ -423,7 +423,7 @@ function DeploymentSelector() {
                 key={item}
                 className="flex items-center gap-2 rounded-lg border border-border-subtle bg-background-default px-3 py-2.5 font-ds-mono text-ds-mono-2xs text-text-primary/55"
               >
-                <BracketsCurly
+                <BracketsCurlyIcon
                   aria-hidden="true"
                   className="text-[var(--landing-accent-bright)]"
                   size={14}
diff --git a/src/components/landing/StoreLanding.tsx b/src/components/landing/StoreLanding.tsx
index b81e6832c..06df096ce 100644
--- a/src/components/landing/StoreLanding.tsx
+++ b/src/components/landing/StoreLanding.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  ArrowsClockwise,
-  BracketsCurly,
-  CirclesFour,
-  Cpu,
-  Radio,
-  Stack,
+  ArrowsClockwiseIcon,
+  BracketsCurlyIcon,
+  CirclesFourIcon,
+  CpuIcon,
+  RadioIcon,
+  StackIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -104,7 +104,7 @@ export default function StoreLanding() {
         <div className="grid items-center gap-14 lg:grid-cols-[0.82fr_1.18fr] lg:gap-20">
           <LandingSectionIntro
             eyebrow="Infrastructure, not architecture"
-            icon={<Cpu aria-hidden="true" size={15} />}
+            icon={<CpuIcon aria-hidden="true" size={15} />}
             title="Small enough to sit underneath the product."
             body="Store powers state inside framework-agnostic TanStack libraries and can stand alone in an application. It provides the reactive primitive without prescribing a product-wide state architecture."
           />
@@ -116,7 +116,7 @@ export default function StoreLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Four focused primitives"
-          icon={<BracketsCurly aria-hidden="true" size={15} />}
+          icon={<BracketsCurlyIcon aria-hidden="true" size={15} />}
           title="Write, derive, batch, and select."
           body="The core stays intentionally direct: update a value, compute from other stores, group related writes, and subscribe at the granularity the renderer needs."
         />
@@ -128,7 +128,7 @@ export default function StoreLanding() {
           <AdapterField />
           <LandingSectionIntro
             eyebrow="Framework adapters"
-            icon={<Stack aria-hidden="true" size={15} />}
+            icon={<StackIcon aria-hidden="true" size={15} />}
             title="The binding changes. The state model does not."
             body="Use the same framework-agnostic core from vanilla TypeScript, then connect it to React, Preact, Solid, Vue, Angular, Svelte, or Lit through a thin adapter."
           />
@@ -139,7 +139,7 @@ export default function StoreLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Use the smallest state tool"
-          icon={<CirclesFour aria-hidden="true" size={15} />}
+          icon={<CirclesFourIcon aria-hidden="true" size={15} />}
           title="Store owns one clear part of the stack."
           body="Reach for Store when state is local to the client and benefits from reactive derivation. Keep navigation, remote resources, and relational API data in the tools designed for them."
         />
@@ -321,7 +321,7 @@ function SignalTopology() {
           ))}
         </div>
         <div className="flex size-28 flex-col items-center justify-center rounded-full border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.22)] text-center shadow-[0_0_60px_rgb(var(--landing-glow)/0.18)] sm:size-36">
-          <Cpu
+          <CpuIcon
             aria-hidden="true"
             className="text-[var(--landing-accent-bright)]"
             size={28}
@@ -387,7 +387,7 @@ function PrimitiveLab() {
         </div>
         <div className="flex min-h-44 items-center justify-center border-t border-border-subtle bg-[color:rgb(var(--landing-glow)/0.12)] p-8 lg:border-t-0 lg:border-l">
           <div className="text-center">
-            <ArrowsClockwise
+            <ArrowsClockwiseIcon
               aria-hidden="true"
               className="mx-auto text-[var(--landing-accent-bright)]"
               size={30}
@@ -408,7 +408,7 @@ function AdapterField() {
     <LandingWindow label="one store core">
       <div className="p-6">
         <div className="mx-auto flex size-28 items-center justify-center rounded-full border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.18)] shadow-[0_0_55px_rgb(var(--landing-glow)/0.18)]">
-          <Radio
+          <RadioIcon
             aria-hidden="true"
             className="text-[var(--landing-accent-bright)]"
             size={34}
diff --git a/src/components/landing/TableLanding.tsx b/src/components/landing/TableLanding.tsx
index e193baa3c..b7f948d27 100644
--- a/src/components/landing/TableLanding.tsx
+++ b/src/components/landing/TableLanding.tsx
@@ -14,15 +14,15 @@ import {
   type VisibilityState,
 } from '@tanstack/react-table'
 import {
-  ArrowsHorizontal,
-  CaretDown,
-  CaretUp,
-  Funnel,
-  GridNine,
-  MagnifyingGlass,
-  Rows,
-  SlidersHorizontal,
-  Stack,
+  ArrowsHorizontalIcon,
+  CaretDownIcon,
+  CaretUpIcon,
+  FunnelIcon,
+  GridNineIcon,
+  MagnifyingGlassIcon,
+  RowsIcon,
+  SlidersHorizontalIcon,
+  StackIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -115,24 +115,24 @@ const statusFilters: Array<{ label: string; value: StatusFilter }> = [
 ]
 
 const rowModels = [
-  { label: 'Core', code: 'getCoreRowModel()', rows: '8 rows', icon: Rows },
+  { label: 'Core', code: 'getCoreRowModel()', rows: '8 rows', icon: RowsIcon },
   {
     label: 'Filter',
     code: 'getFilteredRowModel()',
     rows: '5 rows',
-    icon: Funnel,
+    icon: FunnelIcon,
   },
   {
     label: 'Sort',
     code: 'getSortedRowModel()',
     rows: '5 rows',
-    icon: ArrowsHorizontal,
+    icon: ArrowsHorizontalIcon,
   },
   {
     label: 'Page',
     code: 'getPaginationRowModel()',
     rows: '4 rows',
-    icon: Stack,
+    icon: StackIcon,
   },
 ] as const
 
@@ -172,7 +172,7 @@ export default function TableLanding() {
           <LandingSectionIntro
             body="Start with core rows, then opt into only the transformations the product needs. Each row model has one job, a visible input, and a visible output."
             eyebrow="Row-model pipeline"
-            icon={<ArrowsHorizontal aria-hidden="true" size={17} />}
+            icon={<ArrowsHorizontalIcon aria-hidden="true" size={17} />}
             title="Compose behavior instead of buying a grid monolith."
           />
           <RowPipeline />
@@ -183,7 +183,7 @@ export default function TableLanding() {
         <LandingSectionIntro
           body="Column definitions and row models describe behavior, not elements. Feed the same model into semantic rows, responsive cards, or a dense operational view."
           eyebrow="Headless rendering"
-          icon={<GridNine aria-hidden="true" size={17} />}
+          icon={<GridNineIcon aria-hidden="true" size={17} />}
           title="One engine. Whatever surface the job calls for."
         />
         <div className="mt-10 space-y-4">
@@ -197,7 +197,7 @@ export default function TableLanding() {
           <LandingSectionIntro
             body="Let Table manage state until another part of the product needs it. Then lift only sorting, filters, selection, visibility, or pagination into the component, URL, or server."
             eyebrow="State ownership"
-            icon={<SlidersHorizontal aria-hidden="true" size={17} />}
+            icon={<SlidersHorizontalIcon aria-hidden="true" size={17} />}
             title="Control exactly the state that has somewhere else to be."
           />
           <StateSwitchboard />
@@ -314,7 +314,7 @@ function TableWorkbench() {
       <div className="p-4">
         <div className="grid gap-3 lg:grid-cols-[1fr_auto]">
           <label className="flex min-w-0 items-center gap-2 rounded-lg border border-border-subtle bg-text-primary/[0.025] px-3 py-2">
-            <MagnifyingGlass
+            <MagnifyingGlassIcon
               aria-hidden="true"
               className="shrink-0 text-[var(--landing-accent-bright)]"
               size={15}
@@ -412,9 +412,9 @@ function TableWorkbench() {
                               header.getContext(),
                             )}
                             {sort === 'asc' ? (
-                              <CaretUp aria-hidden="true" size={11} />
+                              <CaretUpIcon aria-hidden="true" size={11} />
                             ) : sort === 'desc' ? (
-                              <CaretDown aria-hidden="true" size={11} />
+                              <CaretDownIcon aria-hidden="true" size={11} />
                             ) : null}
                           </button>
                         ) : (
diff --git a/src/components/landing/VirtualLanding.tsx b/src/components/landing/VirtualLanding.tsx
index 67102f25a..62111595e 100644
--- a/src/components/landing/VirtualLanding.tsx
+++ b/src/components/landing/VirtualLanding.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import {
-  ArrowCounterClockwise,
-  ChatCircleDots,
-  Columns,
-  DeviceMobile,
-  Eye,
-  FloppyDisk,
-  GridFour,
-  Rows,
-  Ruler,
+  ArrowCounterClockwiseIcon,
+  ChatCircleDotsIcon,
+  ColumnsIcon,
+  DeviceMobileIcon,
+  EyeIcon,
+  FloppyDiskIcon,
+  GridFourIcon,
+  RowsIcon,
+  RulerIcon,
 } from '@phosphor-icons/react'
 
 import {
@@ -29,22 +29,22 @@ const OVERSCAN = 4
 
 const surfaces = [
   {
-    icon: Rows,
+    icon: RowsIcon,
     label: 'Element list',
     body: 'Logs, search results, menus',
   },
   {
-    icon: DeviceMobile,
+    icon: DeviceMobileIcon,
     label: 'Window feed',
     body: 'Documents and full-page feeds',
   },
   {
-    icon: GridFour,
+    icon: GridFourIcon,
     label: 'Grid + lanes',
     body: 'Galleries, calendars, boards',
   },
   {
-    icon: Columns,
+    icon: ColumnsIcon,
     label: 'Two-axis grid',
     body: 'Tables and spreadsheet surfaces',
   },
@@ -65,7 +65,7 @@ export default function VirtualLanding() {
           <LandingSectionIntro
             body="An estimate makes the full scroll range available immediately. Real measurements refine that model as content enters the window—without turning every offscreen item into a DOM node."
             eyebrow="Dynamic measurement"
-            icon={<Ruler aria-hidden="true" size={17} />}
+            icon={<RulerIcon aria-hidden="true" size={17} />}
             title="The hard part starts when rows are not the same height."
           />
           <MeasurementLab />
@@ -78,7 +78,7 @@ export default function VirtualLanding() {
           <LandingSectionIntro
             body="A chat viewport follows new messages only when the reader is already at the end. Loading older history must preserve the current message. Streaming content changes height without stealing the anchor."
             eyebrow="End-anchored lists"
-            icon={<ChatCircleDots aria-hidden="true" size={17} />}
+            icon={<ChatCircleDotsIcon aria-hidden="true" size={17} />}
             title="Chat turns scrolling into a contract."
           />
         </div>
@@ -88,7 +88,7 @@ export default function VirtualLanding() {
         <LandingSectionIntro
           body="Virtualization is a coordinate system, not a list component. Use it with the page, an element, rows and columns, sticky regions, or lanes—and snapshot that coordinate system when navigation needs an exact return."
           eyebrow="Scroll surfaces"
-          icon={<Eye aria-hidden="true" size={17} />}
+          icon={<EyeIcon aria-hidden="true" size={17} />}
           title="One virtualizer idea. Many kinds of viewport."
         />
         <div className="mt-10 grid gap-4 lg:grid-cols-[1fr_1.1fr]">
@@ -210,7 +210,7 @@ function VirtualizerLab() {
         </div>
 
         <div className="flex flex-col p-4">
-          <LandingEyebrow icon={<Eye aria-hidden="true" size={14} />}>
+          <LandingEyebrow icon={<EyeIcon aria-hidden="true" size={14} />}>
             dom budget
           </LandingEyebrow>
           <dl className="mt-6 space-y-4" aria-live="polite">
@@ -266,7 +266,7 @@ function MeasurementLab() {
           ))}
         </div>
         <div className="flex flex-col">
-          <LandingEyebrow icon={<Ruler aria-hidden="true" size={14} />}>
+          <LandingEyebrow icon={<RulerIcon aria-hidden="true" size={14} />}>
             {measured ? 'measured' : 'estimated'}
           </LandingEyebrow>
           <dl className="mt-6 space-y-4">
@@ -391,7 +391,7 @@ function SnapshotPanel() {
   return (
     <LandingWindow label="navigation snapshot">
       <div className="flex h-full flex-col p-5 sm:p-6">
-        <LandingEyebrow icon={<FloppyDisk aria-hidden="true" size={14} />}>
+        <LandingEyebrow icon={<FloppyDiskIcon aria-hidden="true" size={14} />}>
           leave → return
         </LandingEyebrow>
         <div className="mt-7 rounded-lg border border-border-subtle bg-background-subtle p-4">
@@ -430,7 +430,7 @@ function SnapshotPanel() {
           onClick={() => setRestored((value) => !value)}
           type="button"
         >
-          <ArrowCounterClockwise aria-hidden="true" size={15} />
+          <ArrowCounterClockwiseIcon aria-hidden="true" size={15} />
           {restored ? 'Clear snapshot' : 'Restore position'}
         </button>
       </div>
diff --git a/src/components/landing/WorkflowLanding.tsx b/src/components/landing/WorkflowLanding.tsx
index fe8c36809..e66af4cb4 100644
--- a/src/components/landing/WorkflowLanding.tsx
+++ b/src/components/landing/WorkflowLanding.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import {
-  ArrowCounterClockwise,
-  FlowArrow,
-  GitBranch,
-  HandPalm,
-  Hourglass,
-  Network,
-  PlayCircle,
-  ShieldCheck,
+  ArrowCounterClockwiseIcon,
+  FlowArrowIcon,
+  GitBranchIcon,
+  HandPalmIcon,
+  HourglassIcon,
+  NetworkIcon,
+  PlayCircleIcon,
+  ShieldCheckIcon,
 } from '@phosphor-icons/react'
 import { Badge } from '~/ui/Badge'
 
@@ -62,7 +62,7 @@ export default function WorkflowLanding() {
           <WorkflowCode />
           <LandingSectionIntro
             eyebrow="Code is the process"
-            icon={<FlowArrow aria-hidden="true" size={15} />}
+            icon={<FlowArrowIcon aria-hidden="true" size={15} />}
             title="Control flow stays in plain async TypeScript."
             body="Conditionals, loops, variables, and errors remain language features. The workflow context adds durable boundaries only where time, retries, side effects, or external input need to survive beyond the current process."
           />
@@ -73,7 +73,7 @@ export default function WorkflowLanding() {
         <div className="grid gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:items-center lg:gap-16">
           <LandingSectionIntro
             eyebrow="Time and outside input"
-            icon={<Hourglass aria-hidden="true" size={15} />}
+            icon={<HourglassIcon aria-hidden="true" size={15} />}
             title="Waiting is a stored state, not a worker doing nothing."
             body="A workflow can sleep until later, wait for an external event, or request human approval. Host-delivered signal IDs make retries idempotent, while recorded time and UUID primitives keep decisions deterministic when the function runs again."
           />
@@ -85,7 +85,7 @@ export default function WorkflowLanding() {
         <LandingSectionIntro
           centered
           eyebrow="Durability boundary"
-          icon={<Network aria-hidden="true" size={15} />}
+          icon={<NetworkIcon aria-hidden="true" size={15} />}
           title="Bring the runtime and store that fit your application."
           body="The workflow definition is application code. A runtime adapter executes it, and a durable store preserves the append-only history needed for recovery. Current runtimes and adapters are experimental, so deployment and version routing remain explicit choices."
         />
@@ -336,17 +336,17 @@ function WaitLab() {
 function RuntimeBoundary() {
   const layers = [
     {
-      icon: GitBranch,
+      icon: GitBranchIcon,
       label: 'Workflow definition',
       detail: 'Versioned TypeScript and stable step IDs',
     },
     {
-      icon: PlayCircle,
+      icon: PlayCircleIcon,
       label: 'Runtime adapter',
       detail: 'Executes, schedules, retries, and receives signals',
     },
     {
-      icon: ShieldCheck,
+      icon: ShieldCheckIcon,
       label: 'Durable store',
       detail: 'Persists history outside the worker process',
     },
@@ -383,7 +383,7 @@ function RuntimeBoundary() {
       </div>
       <div className="mt-5 grid gap-3 md:grid-cols-2">
         <div className="flex items-start gap-3 rounded-lg border border-border-default bg-background-surface p-5">
-          <ArrowCounterClockwise
+          <ArrowCounterClockwiseIcon
             aria-hidden="true"
             className="mt-0.5 shrink-0 text-[var(--landing-accent-bright)]"
             size={19}
@@ -394,7 +394,7 @@ function RuntimeBoundary() {
           </p>
         </div>
         <div className="flex items-start gap-3 rounded-lg border border-border-default bg-background-surface p-5">
-          <HandPalm
+          <HandPalmIcon
             aria-hidden="true"
             className="mt-0.5 shrink-0 text-[var(--landing-accent-bright)]"
             size={19}
diff --git a/src/components/markdown/CodeBlockView.tsx b/src/components/markdown/CodeBlockView.tsx
index 14f05ce23..27d8cd1d5 100644
--- a/src/components/markdown/CodeBlockView.tsx
+++ b/src/components/markdown/CodeBlockView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Copy } from '@phosphor-icons/react'
+import { CopyIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
 import { Button } from '~/ui'
@@ -62,7 +62,7 @@ export function CodeBlockView({
             {copied.active ? (
               <span className="text-xs">Copied!</span>
             ) : (
-              <Copy className="w-4 h-4" />
+              <CopyIcon className="w-4 h-4" />
             )}
           </Button>
         </div>
diff --git a/src/components/markdown/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
index e0e1256e0..ea6a82009 100644
--- a/src/components/markdown/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react'
-import { CaretDown, Copy, PencilSimpleLine } from '@phosphor-icons/react'
+import {
+  CaretDownIcon,
+  CopyIcon,
+  PencilSimpleLineIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { ButtonGroup } from '~/components/ButtonGroup'
 import { DocTitle } from '~/components/DocTitle'
@@ -47,7 +51,7 @@ function CopyPageDropdownFallback() {
         className="border-0"
         disabled
       >
-        <Copy className="w-3 h-3" />
+        <CopyIcon className="w-3 h-3" />
         Copy page
       </Button>
       <Button
@@ -58,7 +62,7 @@ function CopyPageDropdownFallback() {
         disabled
         aria-label="More copy actions"
       >
-        <CaretDown className="w-3 h-3" />
+        <CaretDownIcon className="w-3 h-3" />
       </Button>
     </ButtonGroup>
   )
@@ -164,7 +168,7 @@ export function MarkdownContent({
           as="a"
           href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
         >
-          <PencilSimpleLine className="w-3.5 h-3.5" />
+          <PencilSimpleLineIcon className="w-3.5 h-3.5" />
           Edit on GitHub
         </Button>
       </div>
diff --git a/src/components/npm-stats/BaselineSection.tsx b/src/components/npm-stats/BaselineSection.tsx
index bbea9863b..c634fb33a 100644
--- a/src/components/npm-stats/BaselineSection.tsx
+++ b/src/components/npm-stats/BaselineSection.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import {
-  PushPin as Pin,
-  PushPinSlash as PinOff,
-  Plus,
-  X,
-  CaretDown as ChevronDown,
-  Eye,
-  EyeSlash as EyeOff,
+  PushPinIcon as Pin,
+  PushPinSlashIcon as PinOff,
+  PlusIcon,
+  XIcon,
+  CaretDownIcon as ChevronDown,
+  EyeIcon,
+  EyeSlashIcon as EyeOff,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -109,7 +109,7 @@ export function BaselineSection({
             className="flex items-center gap-1.5 hover:brightness-110"
           >
             {isBaselineShown ? (
-              <Eye className="w-3 h-3 text-blue-600 dark:text-blue-300" />
+              <EyeIcon className="w-3 h-3 text-blue-600 dark:text-blue-300" />
             ) : (
               <EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-500" />
             )}
@@ -128,7 +128,7 @@ export function BaselineSection({
           className="text-gray-500 hover:text-red-500"
           aria-label="Clear all baselines"
         >
-          <X className="w-3 h-3" />
+          <XIcon className="w-3 h-3" />
         </button>
       </Tooltip>
     </div>
@@ -141,7 +141,7 @@ export function BaselineSection({
         className="flex items-center gap-1 px-1.5 py-0.5 text-xs rounded
           text-blue-700 dark:text-blue-300 hover:bg-blue-500/10 font-medium"
       >
-        <Plus className="w-3 h-3" />
+        <PlusIcon className="w-3 h-3" />
         Add
       </button>
     </Tooltip>
@@ -262,7 +262,7 @@ export function BaselineSection({
                 onClick={() => setShowSearch(false)}
                 className="p-0.5 sm:p-1 hover:text-red-500"
               >
-                <X className="w-4 h-4 sm:w-5 sm:h-5" />
+                <XIcon className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
             </div>
             <PackageSearch
diff --git a/src/components/npm-stats/ChartControls.tsx b/src/components/npm-stats/ChartControls.tsx
index 488047444..24fbba6c0 100644
--- a/src/components/npm-stats/ChartControls.tsx
+++ b/src/components/npm-stats/ChartControls.tsx
@@ -1,17 +1,17 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import {
-  SortDescending as ArrowDownWideNarrow,
-  ChartLineUp as ChartArea,
-  ChartBar,
-  ChartBar as ChartBarStacked,
-  ChartLine,
-  Clock as Clock3,
-  Columns as Columns3,
-  ClockCounterClockwise as History,
-  Stack as Layers,
-  Rows as Rows3,
-  Waves,
+  SortDescendingIcon as ArrowDownWideNarrow,
+  ChartLineUpIcon as ChartArea,
+  ChartBarIcon,
+  ChartBarIcon as ChartBarStacked,
+  ChartLineIcon,
+  ClockIcon as Clock3,
+  ColumnsIcon as Columns3,
+  ClockCounterClockwiseIcon as History,
+  StackIcon as Layers,
+  RowsIcon as Rows3,
+  WavesIcon,
   type Icon as LucideIcon,
 } from '@phosphor-icons/react'
 import {
@@ -55,11 +55,11 @@ const iconSegmentedButtonStyles =
   'flex size-5 items-center justify-center rounded'
 
 const chartTypeIcons = {
-  line: ChartLine,
+  line: ChartLineIcon,
   stacked: Layers,
   'stacked-area': ChartArea,
-  'stacked-stream': Waves,
-  bar: ChartBar,
+  'stacked-stream': WavesIcon,
+  bar: ChartBarIcon,
   'stacked-bar': ChartBarStacked,
 } as const satisfies Partial<Record<ChartType, LucideIcon>>
 
@@ -230,7 +230,7 @@ export function ChartControls({
       {/* Chart Type */}
       <div aria-label="Chart type" className={segmentedControlStyles}>
         {chartTypeOptions.map(({ value, label }) => {
-          const Icon = chartTypeIcons[value] ?? ChartBar
+          const Icon = chartTypeIcons[value] ?? ChartBarIcon
 
           return (
             <Tooltip content={label} key={value}>
diff --git a/src/components/npm-stats/DisabledChartActions.tsx b/src/components/npm-stats/DisabledChartActions.tsx
index ac3dd013f..fe24b035c 100644
--- a/src/components/npm-stats/DisabledChartActions.tsx
+++ b/src/components/npm-stats/DisabledChartActions.tsx
@@ -1,4 +1,4 @@
-import { Download, List } from '@phosphor-icons/react'
+import { DownloadIcon, ListIcon } from '@phosphor-icons/react'
 import { Tooltip } from '~/components/Tooltip'
 
 const disabledChartActionButtonStyles =
@@ -14,7 +14,7 @@ export function DisabledChartActions() {
           disabled={true}
           type="button"
         >
-          <Download className="size-3" />
+          <DownloadIcon className="size-3" />
         </button>
       </Tooltip>
       <Tooltip content="Plot legend available after render">
@@ -25,7 +25,7 @@ export function DisabledChartActions() {
           disabled={true}
           type="button"
         >
-          <List className="size-3" />
+          <ListIcon className="size-3" />
         </button>
       </Tooltip>
     </div>
diff --git a/src/components/npm-stats/LatestBucketNavigator.tsx b/src/components/npm-stats/LatestBucketNavigator.tsx
index aad3fff24..67cecaad9 100644
--- a/src/components/npm-stats/LatestBucketNavigator.tsx
+++ b/src/components/npm-stats/LatestBucketNavigator.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import {
-  Check,
-  CaretDown as ChevronDown,
-  CaretLeft as ChevronLeft,
-  CaretRight as ChevronRight,
-  CaretDoubleLeft as ChevronsLeft,
-  CaretDoubleRight as ChevronsRight,
-  DotsThree as MoreHorizontal,
-  Pause,
-  Play,
+  CheckIcon,
+  CaretDownIcon as ChevronDown,
+  CaretLeftIcon as ChevronLeft,
+  CaretRightIcon as ChevronRight,
+  CaretDoubleLeftIcon as ChevronsLeft,
+  CaretDoubleRightIcon as ChevronsRight,
+  DotsThreeIcon as MoreHorizontal,
+  PauseIcon,
+  PlayIcon,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -247,9 +247,9 @@ export function LatestBucketNavigator({
           type="button"
         >
           {isPlaying ? (
-            <Pause className="size-3.5" />
+            <PauseIcon className="size-3.5" />
           ) : (
-            <Play className="size-3.5" />
+            <PlayIcon className="size-3.5" />
           )}
         </button>
         <DropdownMenu>
@@ -277,7 +277,7 @@ export function LatestBucketNavigator({
                 key={option.intervalMs}
                 onSelect={() => onPlaybackIntervalChange(option.intervalMs)}
               >
-                <Check
+                <CheckIcon
                   className={
                     option.intervalMs === playbackIntervalMs
                       ? 'size-3 opacity-100'
@@ -311,7 +311,7 @@ export function LatestBucketNavigator({
               className={menuItemStyles}
               onSelect={() => onLoopingChange(!isLooping)}
             >
-              <Check
+              <CheckIcon
                 className={
                   isLooping ? 'size-3 opacity-100' : 'size-3 opacity-0'
                 }
diff --git a/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx
index c2700303d..6380f98a6 100644
--- a/src/components/npm-stats/NPMStatsChart.tsx
+++ b/src/components/npm-stats/NPMStatsChart.tsx
@@ -20,11 +20,11 @@ import { tooltip } from '@tanstack/charts/tooltip'
 import { Chart } from '@tanstack/react-charts'
 import { GIFEncoder, applyPalette, quantize } from 'gifenc'
 import {
-  Check,
-  Code as Code2,
-  Copy,
-  Download,
-  List,
+  CheckIcon,
+  CodeIcon as Code2,
+  CopyIcon,
+  DownloadIcon,
+  ListIcon,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -1540,7 +1540,7 @@ function ChartActions({
               disabled={disabled}
               type="button"
             >
-              <Download className="size-3" />
+              <DownloadIcon className="size-3" />
             </button>
           </DropdownMenuTrigger>
         </Tooltip>
@@ -1589,7 +1589,7 @@ function ChartActions({
           onClick={onToggleLegend}
           type="button"
         >
-          <List className="size-3" />
+          <ListIcon className="size-3" />
         </button>
       </Tooltip>
       {embedConfig ? <EmbedChartAction embedConfig={embedConfig} /> : null}
@@ -1621,7 +1621,11 @@ function CopyButton({
       onClick={onCopy}
       type="button"
     >
-      {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+      {copied ? (
+        <CheckIcon className="size-3" />
+      ) : (
+        <CopyIcon className="size-3" />
+      )}
       {copied ? 'Copied' : label}
     </button>
   )
diff --git a/src/components/npm-stats/PackagePills.tsx b/src/components/npm-stats/PackagePills.tsx
index 8babc9b4b..bb3e1861c 100644
--- a/src/components/npm-stats/PackagePills.tsx
+++ b/src/components/npm-stats/PackagePills.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import {
-  X,
-  Plus,
-  Eye,
-  EyeSlash as EyeOff,
-  DotsThreeVertical as EllipsisVertical,
+  XIcon,
+  PlusIcon,
+  EyeIcon,
+  EyeSlashIcon as EyeOff,
+  DotsThreeVerticalIcon as EllipsisVertical,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -188,7 +188,7 @@ export function PackagePill({
                       {isGroupHidden ? (
                         <EyeOff className="text-sm" />
                       ) : (
-                        <Eye className="text-sm" />
+                        <EyeIcon className="text-sm" />
                       )}
                       {isGroupHidden ? 'Show Package' : 'Hide Package'}
                     </DropdownMenuItem>
@@ -228,7 +228,7 @@ export function PackagePill({
                                 {subPackage.hidden ? (
                                   <EyeOff className="text-sm" />
                                 ) : (
-                                  <Eye className="text-sm" />
+                                  <EyeIcon className="text-sm" />
                                 )}
                                 <span
                                   className={
@@ -248,7 +248,7 @@ export function PackagePill({
                                 }}
                                 className="p-1 text-gray-400 hover:text-red-500"
                               >
-                                <X className="w-3 h-3" />
+                                <XIcon className="w-3 h-3" />
                               </button>
                             </div>
                           </DropdownMenuItem>
@@ -263,7 +263,7 @@ export function PackagePill({
                         }}
                         className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
                       >
-                        <Plus className="text-sm" />
+                        <PlusIcon className="text-sm" />
                         Add Packages
                       </DropdownMenuItem>
                     )}
@@ -277,7 +277,7 @@ export function PackagePill({
             onClick={() => onRemove(index)}
             className="ml-auto pl-0.5 text-gray-500 hover:text-red-500"
           >
-            <X className="size-3.5" />
+            <XIcon className="size-3.5" />
           </button>
         </div>
       </div>
diff --git a/src/components/npm-stats/PackageSearch.tsx b/src/components/npm-stats/PackageSearch.tsx
index 9bb9175fa..ee389a6cd 100644
--- a/src/components/npm-stats/PackageSearch.tsx
+++ b/src/components/npm-stats/PackageSearch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useDebouncedValue } from '@tanstack/react-pacer'
-import { MagnifyingGlass as Search } from '@phosphor-icons/react'
+import { MagnifyingGlassIcon as Search } from '@phosphor-icons/react'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { Command } from 'cmdk'
 import { twMerge } from 'tailwind-merge'
diff --git a/src/components/npm-stats/StatsTable.tsx b/src/components/npm-stats/StatsTable.tsx
index de9a3b510..51ded9680 100644
--- a/src/components/npm-stats/StatsTable.tsx
+++ b/src/components/npm-stats/StatsTable.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as d3 from 'd3'
-import { X, EyeSlash } from '@phosphor-icons/react'
+import { XIcon, EyeSlashIcon } from '@phosphor-icons/react'
 import { Tooltip } from '~/components/Tooltip'
 import { binningOptionsByType } from './binning'
 import {
@@ -229,7 +229,7 @@ export function StatsTable({
                           <span className={stat.hidden ? 'opacity-50' : ''}>
                             {stat.package}
                           </span>
-                          {stat.hidden ? <EyeSlash className="" /> : null}
+                          {stat.hidden ? <EyeSlashIcon className="" /> : null}
                         </button>
                       </Tooltip>
                       <Tooltip content="Remove package">
@@ -237,7 +237,7 @@ export function StatsTable({
                           onClick={() => onRemove(stat.index)}
                           className="p-0.5 text-gray-500 hover:text-red-500"
                         >
-                          <X className="" />
+                          <XIcon className="" />
                         </button>
                       </Tooltip>
                     </div>
diff --git a/src/components/shop/CartDrawer.tsx b/src/components/shop/CartDrawer.tsx
index 020176204..a4bfeabe0 100644
--- a/src/components/shop/CartDrawer.tsx
+++ b/src/components/shop/CartDrawer.tsx
@@ -1,6 +1,12 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { Link } from '@tanstack/react-router'
-import { Minus, Plus, ShoppingCart, Trash, X } from '@phosphor-icons/react'
+import {
+  MinusIcon,
+  PlusIcon,
+  ShoppingCartIcon,
+  TrashIcon,
+  XIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { useCart, useRemoveCartLine, useUpdateCartLine } from '~/hooks/useCart'
 import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
@@ -47,7 +53,7 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
               aria-label="Close cart"
               className="p-1 rounded-md text-shop-text-2 hover:text-shop-text"
             >
-              <X className="w-3.5 h-3.5" />
+              <XIcon className="w-3.5 h-3.5" />
             </Dialog.Close>
           </header>
 
@@ -76,7 +82,7 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
 function DrawerEmpty({ onClose }: { onClose: () => void }) {
   return (
     <div className="flex-1 flex flex-col items-center justify-center gap-4 p-8 text-center text-shop-text-2">
-      <ShoppingCart className="w-10 h-10 text-shop-muted" />
+      <ShoppingCartIcon className="w-10 h-10 text-shop-muted" />
       <p>Your cart is empty.</p>
       <Link
         to="/shop"
@@ -207,7 +213,7 @@ function DrawerCartLine({
               aria-label="Decrease quantity"
               className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
             >
-              <Minus className="w-3 h-3" />
+              <MinusIcon className="w-3 h-3" />
             </button>
             <span className="font-shop-mono text-shop-text min-w-[1.5rem] text-center">
               {line.quantity}
@@ -224,7 +230,7 @@ function DrawerCartLine({
               aria-label="Increase quantity"
               className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
             >
-              <Plus className="w-3 h-3" />
+              <PlusIcon className="w-3 h-3" />
             </button>
           </div>
           <div className="flex items-center gap-2">
@@ -241,7 +247,7 @@ function DrawerCartLine({
               aria-label="Remove from cart"
               className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
             >
-              <Trash className="w-3.5 h-3.5" />
+              <TrashIcon className="w-3.5 h-3.5" />
             </button>
           </div>
         </div>
diff --git a/src/components/shop/ui/Qty.tsx b/src/components/shop/ui/Qty.tsx
index 950099d9b..05c02766d 100644
--- a/src/components/shop/ui/Qty.tsx
+++ b/src/components/shop/ui/Qty.tsx
@@ -1,4 +1,4 @@
-import { Minus, Plus } from '@phosphor-icons/react'
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 
 type Props = {
@@ -47,7 +47,7 @@ export function ShopQty({
           cell,
         )}
       >
-        <Minus />
+        <MinusIcon />
       </button>
       <span className="font-shop-mono text-[13px] text-shop-text min-w-[1.5rem] text-center select-none">
         {quantity}
@@ -62,7 +62,7 @@ export function ShopQty({
           cell,
         )}
       >
-        <Plus />
+        <PlusIcon />
       </button>
     </div>
   )
diff --git a/src/components/stack/CategoryArticle.tsx b/src/components/stack/CategoryArticle.tsx
index dc22713e4..800de91ca 100644
--- a/src/components/stack/CategoryArticle.tsx
+++ b/src/components/stack/CategoryArticle.tsx
@@ -3,23 +3,23 @@ import { Link } from '@tanstack/react-router'
 import { useLibrariesOverlay } from '~/contexts/LibrariesOverlayContext'
 import { twMerge } from 'tailwind-merge'
 import {
-  ArrowRight,
-  BracketsCurly,
-  CheckCircle,
-  CaretRight,
-  Clock,
-  Database,
-  Keyboard,
-  Newspaper,
-  Package,
-  Rocket,
-  MagnifyingGlass,
-  SlidersHorizontal,
-  Sparkle,
-  Table as TableIcon,
-  Terminal,
-  Wrench,
-  Lightning,
+  ArrowRightIcon,
+  BracketsCurlyIcon,
+  CheckCircleIcon,
+  CaretRightIcon,
+  ClockIcon,
+  DatabaseIcon,
+  KeyboardIcon,
+  NewspaperIcon,
+  PackageIcon,
+  RocketIcon,
+  MagnifyingGlassIcon,
+  SlidersHorizontalIcon,
+  SparkleIcon,
+  TableIcon,
+  TerminalIcon,
+  WrenchIcon,
+  LightningIcon,
 } from '@phosphor-icons/react'
 
 import { LibraryWordmark } from '~/components/LibraryWordmark'
@@ -114,7 +114,7 @@ function Breadcrumb({ categoryName }: { categoryName: string }) {
         <Link to="/" className="hover:text-zinc-950 dark:hover:text-white">
           Home
         </Link>
-        <CaretRight size={12} aria-hidden="true" />
+        <CaretRightIcon size={12} aria-hidden="true" />
         <button
           type="button"
           onClick={() => openLibraries()}
@@ -122,7 +122,7 @@ function Breadcrumb({ categoryName }: { categoryName: string }) {
         >
           Libraries
         </button>
-        <CaretRight size={12} aria-hidden="true" />
+        <CaretRightIcon size={12} aria-hidden="true" />
         <span className="font-semibold text-zinc-700 dark:text-zinc-300">
           {categoryName}
         </span>
@@ -146,7 +146,7 @@ function FrameworkCategory({
       <section className="border-b border-cyan-950/10 bg-[#f6fbfb] dark:border-cyan-300/10 dark:bg-[#041010]">
         <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 lg:grid-cols-[0.88fr_1.12fr] lg:items-start lg:py-12">
           <div className="max-w-3xl">
-            <SectionKicker icon={<Sparkle size={14} />}>
+            <SectionKicker icon={<SparkleIcon size={14} />}>
               Framework
             </SectionKicker>
             <h1 className={heroTitleClassName}>
@@ -250,7 +250,7 @@ function FrameworkPlanPanel() {
           </p>
         </div>
         <span className="inline-flex items-center gap-1 rounded-md border border-cyan-200 bg-cyan-50 px-2 py-1 text-xs font-semibold text-cyan-800 dark:border-cyan-800 dark:bg-cyan-950/50 dark:text-cyan-200">
-          <Rocket size={13} aria-hidden="true" />
+          <RocketIcon size={13} aria-hidden="true" />
           App-ready
         </span>
       </div>
@@ -301,7 +301,7 @@ function StateCategory({
       <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
         <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
           <div>
-            <SectionKicker icon={<Database size={14} />}>
+            <SectionKicker icon={<DatabaseIcon size={14} />}>
               Data & State Management
             </SectionKicker>
             <h1 className={heroTitleClassName}>
@@ -458,13 +458,13 @@ function UiCategory({
             />
             <UiSurfaceCard
               detail="Field state, validation, submission, and async checks without losing control of inputs."
-              icon={<SlidersHorizontal size={18} />}
+              icon={<SlidersHorizontalIcon size={18} />}
               library={form}
               title="Input confidence"
             />
             <UiSurfaceCard
               detail="Scopes, sequences, key state, and command surfaces for keyboard-first flows."
-              icon={<Keyboard size={18} />}
+              icon={<KeyboardIcon size={18} />}
               library={hotkeys}
               title="Keyboard flow"
             />
@@ -601,7 +601,7 @@ function FormSample() {
         </div>
       ))}
       <div className="flex items-center gap-1.5 text-yellow-800 dark:text-yellow-200">
-        <CheckCircle size={14} aria-hidden="true" />
+        <CheckCircleIcon size={14} aria-hidden="true" />
         Schema and field state agree
       </div>
     </div>
@@ -641,7 +641,7 @@ function PerformanceCategory({
       <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-[#0b0d08]">
         <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
           <div>
-            <SectionKicker icon={<Lightning size={14} />}>
+            <SectionKicker icon={<LightningIcon size={14} />}>
               Performance
             </SectionKicker>
             <h1 className={heroTitleClassName}>
@@ -684,7 +684,7 @@ function FrameBudgetLab() {
     <div className="rounded-lg border border-zinc-200 bg-white p-5 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
       <div className="mb-5 flex items-center justify-between gap-3">
         <p className="font-bold">16ms frame lab</p>
-        <Clock className="text-lime-700 dark:text-lime-300" size={18} />
+        <ClockIcon className="text-lime-700 dark:text-lime-300" size={18} />
       </div>
       <div className="grid gap-4 md:grid-cols-2">
         <div
@@ -813,7 +813,9 @@ function ToolingCategory({
       <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
         <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.88fr_1.12fr] lg:items-center">
           <div>
-            <SectionKicker icon={<Wrench size={14} />}>Tooling</SectionKicker>
+            <SectionKicker icon={<WrenchIcon size={14} />}>
+              Tooling
+            </SectionKicker>
             <h1 className={heroTitleClassName}>
               The tools around TanStack apps and packages.
             </h1>
@@ -835,25 +837,25 @@ function ToolingCategory({
           <div className="mt-6 grid gap-4 lg:grid-cols-4">
             <ToolingStep
               detail="Create Start apps, search docs, and export prompts."
-              icon={<Terminal size={18} />}
+              icon={<TerminalIcon size={18} />}
               library={cli}
               step="Create"
             />
             <ToolingStep
               detail="Lint, build, test, version, and publish packages."
-              icon={<Package size={18} />}
+              icon={<PackageIcon size={18} />}
               library={config}
               step="Package"
             />
             <ToolingStep
               detail="Inspect TanStack libraries through one dockable panel."
-              icon={<MagnifyingGlass size={18} />}
+              icon={<MagnifyingGlassIcon size={18} />}
               library={devtools}
               step="Inspect"
             />
             <ToolingStep
               detail="Ship package-scoped guidance for assistants."
-              icon={<BracketsCurly size={18} />}
+              icon={<BracketsCurlyIcon size={18} />}
               library={intent}
               step="Remember"
             />
@@ -878,22 +880,22 @@ function ToolingWorkbench() {
       <div className="grid gap-3 md:grid-cols-2">
         <WorkbenchCell
           code={['create app workspace', 'template: app + data']}
-          icon={<Terminal size={16} />}
+          icon={<TerminalIcon size={16} />}
           label="Create"
         />
         <WorkbenchCell
           code={['shared lint/build/test', 'publish: versions ready']}
-          icon={<Package size={16} />}
+          icon={<PackageIcon size={16} />}
           label="Package"
         />
         <WorkbenchCell
           code={['runtime panel open', 'custom dock: app metrics']}
-          icon={<MagnifyingGlass size={16} />}
+          icon={<MagnifyingGlassIcon size={16} />}
           label="Inspect"
         />
         <WorkbenchCell
           code={['package notes installed', 'context: dependency-scoped']}
-          icon={<BracketsCurly size={16} />}
+          icon={<BracketsCurlyIcon size={16} />}
           label="Remember"
         />
       </div>
@@ -963,7 +965,7 @@ function RelatedPostsBlock({ items }: { items: Array<RelatedPost> }) {
   return (
     <section className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
       <div className="mx-auto max-w-7xl px-4 py-12">
-        <SectionKicker icon={<Newspaper size={14} />}>
+        <SectionKicker icon={<NewspaperIcon size={14} />}>
           From the team
         </SectionKicker>
         <h2 className="mt-3 text-2xl font-black leading-tight sm:text-3xl">
@@ -1104,7 +1106,7 @@ function OpenLibraryCta({
       )}
     >
       Open {shortName(library)}
-      <ArrowRight size={13} aria-hidden="true" />
+      <ArrowRightIcon size={13} aria-hidden="true" />
     </span>
   )
 }
@@ -1141,7 +1143,7 @@ function LibraryButton({
           colorProduct={false}
         />
       ) : null}
-      <ArrowRight size={15} aria-hidden="true" />
+      <ArrowRightIcon size={15} aria-hidden="true" />
     </Link>
   )
 }
diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx
index c84d1bd44..9fe92abe2 100644
--- a/src/libraries/ai.tsx
+++ b/src/libraries/ai.tsx
@@ -1,5 +1,5 @@
 import { Library } from '.'
-import { Plug, Lightning, Gear } from '@phosphor-icons/react'
+import { PlugIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { ai } from './libraries'
 
@@ -13,7 +13,7 @@ export const aiProject = {
   featureHighlights: [
     {
       title: 'A Real Agent Loop',
-      icon: <Gear className={twMerge(textStyles)} />,
+      icon: <GearIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           <code>chat()</code> drives the loop and you control every part of it:
@@ -26,7 +26,7 @@ export const aiProject = {
     },
     {
       title: 'Bring Your Own Everything',
-      icon: <Plug className={twMerge(textStyles)} />,
+      icon: <PlugIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Your provider, server, transport, auth, and deploy target. Adapters
@@ -39,7 +39,7 @@ export const aiProject = {
     },
     {
       title: 'Headless, Not Opinionated',
-      icon: <Lightning className={twMerge(textStyles)} />,
+      icon: <LightningIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           A framework-free core with React, Vue, Solid, Svelte, Preact, Angular,
diff --git a/src/libraries/cli.tsx b/src/libraries/cli.tsx
index de11efc14..fab961714 100644
--- a/src/libraries/cli.tsx
+++ b/src/libraries/cli.tsx
@@ -1,9 +1,9 @@
 import {
-  Robot,
-  Stack,
-  PuzzlePiece,
-  Rocket,
-  Terminal,
+  RobotIcon,
+  StackIcon,
+  PuzzlePieceIcon,
+  RocketIcon,
+  TerminalIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { cli } from './libraries'
@@ -15,7 +15,7 @@ export const cliProject = {
   featureHighlights: [
     {
       title: 'MCP Server',
-      icon: <Robot className={textStyles} />,
+      icon: <RobotIcon className={textStyles} />,
       description: (
         <div>
           Connect your AI assistant to TanStack via the{' '}
@@ -29,7 +29,7 @@ export const cliProject = {
     },
     {
       title: 'Modular Integrations',
-      icon: <PuzzlePiece className={textStyles} />,
+      icon: <PuzzlePieceIcon className={textStyles} />,
       description: (
         <div>
           Choose from a growing ecosystem of{' '}
@@ -42,7 +42,7 @@ export const cliProject = {
     },
     {
       title: 'Interactive Builder',
-      icon: <Stack className={textStyles} />,
+      icon: <StackIcon className={textStyles} />,
       description: (
         <div>
           Use the{' '}
@@ -56,7 +56,7 @@ export const cliProject = {
     },
     {
       title: 'Zero to Production',
-      icon: <Terminal className={textStyles} />,
+      icon: <TerminalIcon className={textStyles} />,
       description: (
         <div>
           Go from{' '}
@@ -70,7 +70,7 @@ export const cliProject = {
     },
     {
       title: 'Deploy Anywhere',
-      icon: <Rocket className={textStyles} />,
+      icon: <RocketIcon className={textStyles} />,
       description: (
         <div>
           Built-in deployment integrations for{' '}
diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx
index 1aa3bee78..adbb9aaa5 100644
--- a/src/libraries/config.tsx
+++ b/src/libraries/config.tsx
@@ -1,4 +1,4 @@
-import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
+import { MagicWandIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { config } from './libraries'
 
@@ -11,7 +11,7 @@ export const configProject = {
   featureHighlights: [
     {
       title: 'Intuitive Configuration',
-      icon: <MagicWand className="text-category-tooling" />,
+      icon: <MagicWandIcon className="text-category-tooling" />,
       description: (
         <div>
           TanStack Config offers a seamless and intuitive configuration
@@ -27,7 +27,7 @@ export const configProject = {
     },
     {
       title: 'Vite-Powered Builds',
-      icon: <Lightning className="text-category-tooling" />,
+      icon: <LightningIcon className="text-category-tooling" />,
       description: (
         <div>
           TanStack Config's build configuration harnesses the Vite ecosystem.
@@ -44,7 +44,7 @@ export const configProject = {
     },
     {
       title: 'Effortless Publication',
-      icon: <Gear className="text-category-tooling" />,
+      icon: <GearIcon className="text-category-tooling" />,
       description: (
         <div>
           Say goodbye to the complexities of code publishing. This package
diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx
index ee93576ee..c9ba6e35c 100644
--- a/src/libraries/db.tsx
+++ b/src/libraries/db.tsx
@@ -1,4 +1,4 @@
-import { Stack, Lightning, Gear } from '@phosphor-icons/react'
+import { StackIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { db } from './libraries'
 
@@ -12,7 +12,7 @@ export const dbProject = {
   featureHighlights: [
     {
       title: 'Collections',
-      icon: <Stack className={twMerge(textStyles)} />,
+      icon: <StackIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Collections are typed sets of objects. Sync or load data into them.
@@ -23,7 +23,7 @@ export const dbProject = {
     },
     {
       title: 'Live Queries',
-      icon: <Lightning className={twMerge(textStyles)} />,
+      icon: <LightningIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Live queries run reactively against and across collections. They're
@@ -34,7 +34,7 @@ export const dbProject = {
     },
     {
       title: 'Optimistic mutations',
-      icon: <Gear className={twMerge(textStyles)} />,
+      icon: <GearIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Batch and stage instant local changes across collections. Sync
diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx
index 51090a8c6..6423ba93b 100644
--- a/src/libraries/devtools.tsx
+++ b/src/libraries/devtools.tsx
@@ -1,4 +1,4 @@
-import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
+import { MagicWandIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { devtools } from './libraries'
 
@@ -11,7 +11,7 @@ export const devtoolsProject = {
   featureHighlights: [
     {
       title: 'Unified Devtools Panel',
-      icon: <MagicWand className="text-category-tooling" />,
+      icon: <MagicWandIcon className="text-category-tooling" />,
       description: (
         <div>
           TanStack Devtools provides a centralized panel that houses all
@@ -26,7 +26,7 @@ export const devtoolsProject = {
     },
     {
       title: 'Framework Agnostic',
-      icon: <Lightning className="text-category-tooling" />,
+      icon: <LightningIcon className="text-category-tooling" />,
       description: (
         <div>
           Built with Solid.js for lightweight performance, but designed to work
@@ -41,7 +41,7 @@ export const devtoolsProject = {
     },
     {
       title: 'Custom Devtools Support',
-      icon: <Gear className="text-category-tooling" />,
+      icon: <GearIcon className="text-category-tooling" />,
       description: (
         <div>
           Extend the devtools panel with your own custom devtools. The platform
diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx
index 12d680332..759d8dc3e 100644
--- a/src/libraries/form.tsx
+++ b/src/libraries/form.tsx
@@ -1,4 +1,4 @@
-import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
+import { MagicWandIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { form } from './libraries'
 
@@ -34,7 +34,7 @@ export const formProject = {
   featureHighlights: [
     {
       title: 'First-Class TypeScript Support',
-      icon: <MagicWand className="text-category-ui" />,
+      icon: <MagicWandIcon className="text-category-ui" />,
       description: (
         <div>
           TanStack Form touts first-class TypeScript support with outstanding
@@ -51,7 +51,7 @@ export const formProject = {
     },
     {
       title: 'Headless and Framework Agnostic',
-      icon: <Lightning className="text-category-ui" />,
+      icon: <LightningIcon className="text-category-ui" />,
       description: (
         <div>
           Form's headless and framework agnostic approach ensures maximum
@@ -68,7 +68,7 @@ export const formProject = {
     },
     {
       title: 'Granular Reactive Performance',
-      icon: <Gear className="text-category-ui" />,
+      icon: <GearIcon className="text-category-ui" />,
       description: (
         <div>
           When it comes to performance, TanStack Form delivers amazing speed and
diff --git a/src/libraries/hotkeys.tsx b/src/libraries/hotkeys.tsx
index d2ee0febd..d5b9ab4a4 100644
--- a/src/libraries/hotkeys.tsx
+++ b/src/libraries/hotkeys.tsx
@@ -1,4 +1,8 @@
-import { Keyboard, ListNumbers, MagicWand } from '@phosphor-icons/react'
+import {
+  KeyboardIcon,
+  ListNumbersIcon,
+  MagicWandIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { hotkeys } from './libraries'
 
@@ -12,7 +16,7 @@ export const hotkeysProject = {
   featureHighlights: [
     {
       title: 'Type-Safe & Cross-Platform',
-      icon: <Keyboard className={twMerge(textStyles)} />,
+      icon: <KeyboardIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Define keyboard shortcuts with a{' '}
@@ -27,7 +31,7 @@ export const hotkeysProject = {
     },
     {
       title: 'Better Defaults',
-      icon: <MagicWand className={twMerge(textStyles)} />,
+      icon: <MagicWandIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Ships with{' '}
@@ -44,7 +48,7 @@ export const hotkeysProject = {
     },
     {
       title: 'Sequences & Recording',
-      icon: <ListNumbers className={twMerge(textStyles)} />,
+      icon: <ListNumbersIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Build{' '}
diff --git a/src/libraries/icons.ts b/src/libraries/icons.ts
index 8749b3bf8..1ae1e4cb0 100644
--- a/src/libraries/icons.ts
+++ b/src/libraries/icons.ts
@@ -1,24 +1,24 @@
 import {
-  Brain,
-  ChartLineUp,
-  ClipboardText,
-  Crosshair,
-  Database,
-  Dresser,
-  GearSix,
-  Goggles,
-  Highlighter,
-  MarkdownLogo,
-  PencilRuler,
-  SealQuestion,
-  Sliders,
-  SmileyMelting,
-  SunHorizon,
-  Table,
-  Target,
-  TerminalWindow,
-  Timer,
-  TrafficSign,
+  BrainIcon,
+  ChartLineUpIcon,
+  ClipboardTextIcon,
+  CrosshairIcon,
+  DatabaseIcon,
+  DresserIcon,
+  GearSixIcon,
+  GogglesIcon,
+  HighlighterIcon,
+  MarkdownLogoIcon,
+  PencilRulerIcon,
+  SealQuestionIcon,
+  SlidersIcon,
+  SmileyMeltingIcon,
+  SunHorizonIcon,
+  TableIcon,
+  TargetIcon,
+  TerminalWindowIcon,
+  TimerIcon,
+  TrafficSignIcon,
   type Icon,
 } from '@phosphor-icons/react'
 
@@ -29,26 +29,26 @@ import {
  * "Mega Menu" design (e.g. Devtools = PencilRuler, Intent = Crosshair).
  */
 export const libraryIcons: Record<string, Icon> = {
-  start: SunHorizon,
-  router: TrafficSign,
-  query: SealQuestion,
-  db: Database,
-  store: Dresser,
-  ai: Brain,
-  table: Table,
-  charts: ChartLineUp,
-  form: ClipboardText,
-  hotkeys: SmileyMelting,
-  markdown: MarkdownLogo,
-  highlight: Highlighter,
-  virtual: Goggles,
-  pacer: Timer,
-  devtools: PencilRuler,
-  config: GearSix,
-  cli: TerminalWindow,
-  intent: Crosshair,
-  ranger: Sliders,
+  start: SunHorizonIcon,
+  router: TrafficSignIcon,
+  query: SealQuestionIcon,
+  db: DatabaseIcon,
+  store: DresserIcon,
+  ai: BrainIcon,
+  table: TableIcon,
+  charts: ChartLineUpIcon,
+  form: ClipboardTextIcon,
+  hotkeys: SmileyMeltingIcon,
+  markdown: MarkdownLogoIcon,
+  highlight: HighlighterIcon,
+  virtual: GogglesIcon,
+  pacer: TimerIcon,
+  devtools: PencilRulerIcon,
+  config: GearSixIcon,
+  cli: TerminalWindowIcon,
+  intent: CrosshairIcon,
+  ranger: SlidersIcon,
 }
 
 /** Fallback icon for libraries without a specific mapping. */
-export const fallbackLibraryIcon: Icon = Target
+export const fallbackLibraryIcon: Icon = TargetIcon
diff --git a/src/libraries/intent.tsx b/src/libraries/intent.tsx
index 12c4c8871..7d4707ff4 100644
--- a/src/libraries/intent.tsx
+++ b/src/libraries/intent.tsx
@@ -1,5 +1,9 @@
 import { Library } from '.'
-import { BookOpen, Package, ArrowsClockwise } from '@phosphor-icons/react'
+import {
+  BookOpenIcon,
+  PackageIcon,
+  ArrowsClockwiseIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { intent } from './libraries'
 
@@ -10,7 +14,7 @@ export const intentProject = {
   featureHighlights: [
     {
       title: 'Agent Skills in npm',
-      icon: <Package className={twMerge(textStyles)} />,
+      icon: <PackageIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Ship{' '}
@@ -25,7 +29,7 @@ export const intentProject = {
     },
     {
       title: 'Automatic Discovery',
-      icon: <BookOpen className={twMerge(textStyles)} />,
+      icon: <BookOpenIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Agents discover skills automatically from{' '}
@@ -39,7 +43,7 @@ export const intentProject = {
     },
     {
       title: 'Staleness Detection',
-      icon: <ArrowsClockwise className={twMerge(textStyles)} />,
+      icon: <ArrowsClockwiseIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Each skill declares its source docs. When those docs change,{' '}
diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx
index 3c5372922..63fddca31 100644
--- a/src/libraries/pacer.tsx
+++ b/src/libraries/pacer.tsx
@@ -1,4 +1,8 @@
-import { ArrowsLeftRight, Gauge, MagicWand } from '@phosphor-icons/react'
+import {
+  ArrowsLeftRightIcon,
+  GaugeIcon,
+  MagicWandIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { pacer } from './libraries'
 
@@ -12,7 +16,7 @@ export const pacerProject = {
   featureHighlights: [
     {
       title: 'Flexible & Type-Safe',
-      icon: <MagicWand className={twMerge(textStyles)} />,
+      icon: <MagicWandIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Pacer provides an intuitive and flexible API that works
@@ -28,7 +32,7 @@ export const pacerProject = {
     },
     {
       title: 'Optimize Performance',
-      icon: <Gauge className={twMerge(textStyles)} />,
+      icon: <GaugeIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Enhance your application's efficiency with flexible utilities for{' '}
@@ -45,7 +49,7 @@ export const pacerProject = {
     },
     {
       title: 'Async or Sync',
-      icon: <ArrowsLeftRight className={twMerge(textStyles)} />,
+      icon: <ArrowsLeftRightIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Choose between async or sync execution for each utility based on your
diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx
index 684c280c6..0710dc739 100644
--- a/src/libraries/query.tsx
+++ b/src/libraries/query.tsx
@@ -1,4 +1,4 @@
-import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
+import { MagicWandIcon, LightningIcon, GearIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { query } from './libraries'
 
@@ -59,7 +59,7 @@ export const queryProject = {
     {
       title: 'Declarative & Automatic',
       icon: (
-        <MagicWand
+        <MagicWandIcon
           className={twMerge('motion-safe:animate-pulse', textStyles)}
           style={{
             animationDuration: '5s',
@@ -83,7 +83,7 @@ export const queryProject = {
     {
       title: 'Simple & Familiar',
       icon: (
-        <Lightning
+        <LightningIcon
           className={twMerge('motion-safe:animate-bounce', textStyles)}
           style={{
             animationDuration: '2s',
@@ -107,7 +107,7 @@ export const queryProject = {
     {
       title: 'Extensible',
       icon: (
-        <Gear
+        <GearIcon
           className={twMerge('motion-safe:animate-spin', textStyles)}
           style={{
             animationDuration: '10s',
diff --git a/src/libraries/ranger.tsx b/src/libraries/ranger.tsx
index aa2c46542..07a8fb054 100644
--- a/src/libraries/ranger.tsx
+++ b/src/libraries/ranger.tsx
@@ -1,4 +1,8 @@
-import { ChatCircleDots, Plugs, ArrowClockwise } from '@phosphor-icons/react'
+import {
+  ChatCircleDotsIcon,
+  PlugsIcon,
+  ArrowClockwiseIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { ranger } from './libraries'
 
@@ -12,7 +16,7 @@ export const rangerProject = {
     {
       title: 'Typesafe & powerful, yet familiarly simple',
       icon: (
-        <Plugs className={twMerge('scale-125 animate-pulse', textStyles)} />
+        <PlugsIcon className={twMerge('scale-125 animate-pulse', textStyles)} />
       ),
       description: (
         <div>
@@ -27,7 +31,7 @@ export const rangerProject = {
     {
       title: '"Headless" UI library',
       icon: (
-        <ArrowClockwise
+        <ArrowClockwiseIcon
           className={twMerge('animate-spin', textStyles)}
           style={{
             animationDuration: '3s',
@@ -48,7 +52,7 @@ export const rangerProject = {
     },
     {
       title: 'Extensible',
-      icon: <ChatCircleDots className={twMerge('', textStyles)} />,
+      icon: <ChatCircleDotsIcon className={twMerge('', textStyles)} />,
       description: (
         <div>
           Designed with maximum inversion of control in mind, Ranger is built to
diff --git a/src/libraries/router.tsx b/src/libraries/router.tsx
index ff0de74c0..a26967c5b 100644
--- a/src/libraries/router.tsx
+++ b/src/libraries/router.tsx
@@ -1,4 +1,8 @@
-import { Database, ChatCircleDots, Plugs } from '@phosphor-icons/react'
+import {
+  DatabaseIcon,
+  ChatCircleDotsIcon,
+  PlugsIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { router } from './libraries'
 
@@ -64,7 +68,7 @@ export const routerProject = {
   featureHighlights: [
     {
       title: 'Typesafe & powerful, yet familiarly simple',
-      icon: <Plugs className={twMerge('scale-125', textStyles)} />,
+      icon: <PlugsIcon className={twMerge('scale-125', textStyles)} />,
       description: (
         <div>
           TanStack Router builds on modern routing patterns made popular by
@@ -79,7 +83,7 @@ export const routerProject = {
     {
       title: 'Built-in Data Fetching with Caching',
       icon: (
-        <Database
+        <DatabaseIcon
           className={twMerge('motion-safe:animate-spin', textStyles)}
           style={{
             animationDuration: '3s',
@@ -101,7 +105,7 @@ export const routerProject = {
     },
     {
       title: 'Search Param APIs to make your state-manager jealous',
-      icon: <ChatCircleDots className={twMerge('', textStyles)} />,
+      icon: <ChatCircleDotsIcon className={twMerge('', textStyles)} />,
       description: (
         <div>
           Instead of throwing you to the URLSearchParam wolves, TanStack Router
diff --git a/src/libraries/start.tsx b/src/libraries/start.tsx
index c89f4a3e2..05809eb99 100644
--- a/src/libraries/start.tsx
+++ b/src/libraries/start.tsx
@@ -1,4 +1,4 @@
-import { Network, Rocket, Warning } from '@phosphor-icons/react'
+import { NetworkIcon, RocketIcon, WarningIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { redirect } from '@tanstack/react-router'
 import { YinYangIcon } from '~/components/icons/YinYangIcon'
@@ -53,7 +53,7 @@ export const startProject = {
     {
       title: 'Enterprise-Grade Routing',
       icon: (
-        <Network
+        <NetworkIcon
           className={twMerge('motion-safe:animate-pulse', textStyles)}
           style={{
             animationDuration: '5s',
@@ -77,7 +77,7 @@ export const startProject = {
     {
       title: 'SSR, Streaming and Server RPCs',
       icon: (
-        <Warning
+        <WarningIcon
           className={twMerge('motion-safe:animate-ping', textStyles)}
           style={{
             animationDuration: '2s',
@@ -127,7 +127,7 @@ export const startProject = {
     {
       title: 'Deploy Anywhere',
       icon: (
-        <Rocket
+        <RocketIcon
           className={twMerge('motion-safe:animate-bounce', textStyles)}
           style={{
             animationDuration: '2.5s',
diff --git a/src/libraries/store.tsx b/src/libraries/store.tsx
index cf08b9034..e8ebcb20b 100644
--- a/src/libraries/store.tsx
+++ b/src/libraries/store.tsx
@@ -1,4 +1,4 @@
-import { MagicWand } from '@phosphor-icons/react'
+import { MagicWandIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { store } from './libraries'
 
@@ -12,7 +12,7 @@ export const storeProject = {
   featureHighlights: [
     {
       title: 'Battle-Tested',
-      icon: <MagicWand className={twMerge(textStyles)} />,
+      icon: <MagicWandIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Store is widely adopted across the TanStack ecosystem,
@@ -28,7 +28,7 @@ export const storeProject = {
     },
     {
       title: 'Tiny Bundle Size',
-      icon: <MagicWand className={twMerge(textStyles)} />,
+      icon: <MagicWandIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Designed with a focus on performance and efficiency, boasting a{' '}
@@ -43,7 +43,7 @@ export const storeProject = {
     },
     {
       title: 'Framework Agnostic',
-      icon: <MagicWand className={twMerge(textStyles)} />,
+      icon: <MagicWandIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Store is{' '}
diff --git a/src/libraries/table.tsx b/src/libraries/table.tsx
index 668d0b408..825d9c28b 100644
--- a/src/libraries/table.tsx
+++ b/src/libraries/table.tsx
@@ -1,4 +1,8 @@
-import { PersonSimple, Lightning, Gear } from '@phosphor-icons/react'
+import {
+  PersonSimpleIcon,
+  LightningIcon,
+  GearIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { table } from './libraries'
 
@@ -45,7 +49,7 @@ export const tableProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <PersonSimple className={twMerge(textStyles)} />
+          <PersonSimpleIcon className={twMerge(textStyles)} />
         </div>
       ),
       description: (
@@ -62,7 +66,7 @@ export const tableProject = {
     },
     {
       title: 'Big Power, Small Package',
-      icon: <Lightning className={twMerge(textStyles)} />,
+      icon: <LightningIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Don't be fooled by the small bundle size. TanStack Table is a
@@ -78,7 +82,7 @@ export const tableProject = {
     },
     {
       title: 'Extensible',
-      icon: <Gear className={twMerge(textStyles)} />,
+      icon: <GearIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack table ships with excellent defaults to get you off the ground
diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx
index 3cccda9c0..b1a4aedf4 100644
--- a/src/libraries/virtual.tsx
+++ b/src/libraries/virtual.tsx
@@ -1,4 +1,8 @@
-import { PersonSimple, Lightning, Gear } from '@phosphor-icons/react'
+import {
+  PersonSimpleIcon,
+  LightningIcon,
+  GearIcon,
+} from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { virtual } from './libraries'
 
@@ -38,7 +42,7 @@ export const virtualProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <PersonSimple className="text-category-performance" />
+          <PersonSimpleIcon className="text-category-performance" />
         </div>
       ),
       description: (
@@ -54,7 +58,7 @@ export const virtualProject = {
     },
     {
       title: 'Big Power, Small Package',
-      icon: <Lightning className="text-category-performance" />,
+      icon: <LightningIcon className="text-category-performance" />,
       description: (
         <div>
           Don't be fooled by the small bundle size. TanStack Virtual uses every
@@ -69,7 +73,7 @@ export const virtualProject = {
     },
     {
       title: 'Maximum Composability',
-      icon: <Gear className="text-category-performance" />,
+      icon: <GearIcon className="text-category-performance" />,
       description: (
         <div>
           With a single function/hook, you'll get limitless virtualization for{' '}
diff --git a/src/libraries/workflow.tsx b/src/libraries/workflow.tsx
index 4e37841dc..425cdcd54 100644
--- a/src/libraries/workflow.tsx
+++ b/src/libraries/workflow.tsx
@@ -1,7 +1,7 @@
 import {
-  GitBranch,
-  ArrowCounterClockwise,
-  ShieldCheck,
+  GitBranchIcon,
+  ArrowCounterClockwiseIcon,
+  ShieldCheckIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { workflow } from './libraries'
@@ -15,7 +15,7 @@ export const workflowProject = {
   featureHighlights: [
     {
       title: 'Typed Workflows',
-      icon: <GitBranch className={twMerge(textStyles)} />,
+      icon: <GitBranchIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Model each step with TypeScript-first inputs, outputs, and shared
@@ -29,7 +29,7 @@ export const workflowProject = {
     },
     {
       title: 'Durable Execution',
-      icon: <ShieldCheck className={twMerge(textStyles)} />,
+      icon: <ShieldCheckIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Keep critical business processes moving through deploys, restarts, and
@@ -43,7 +43,7 @@ export const workflowProject = {
     },
     {
       title: 'Retries & Recovery',
-      icon: <ArrowCounterClockwise className={twMerge(textStyles)} />,
+      icon: <ArrowCounterClockwiseIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Configure retries, backoff, and recovery behavior close to the work
diff --git a/src/routes/_library/$libraryId/$version.docs.blog.tsx b/src/routes/_library/$libraryId/$version.docs.blog.tsx
index 76df89640..0d5e687d1 100644
--- a/src/routes/_library/$libraryId/$version.docs.blog.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.blog.tsx
@@ -1,6 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
-import { ArrowLeft } from '@phosphor-icons/react'
+import { ArrowLeftIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
@@ -50,7 +50,7 @@ function RouteComponent() {
             to="/blog"
             className="inline-flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors mb-4"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeftIcon className="w-4 h-4" />
             Back to all posts
           </Link>
 
diff --git a/src/routes/_library/$libraryId/$version.docs.contributors.tsx b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
index 8c73f1750..9a8956c36 100644
--- a/src/routes/_library/$libraryId/$version.docs.contributors.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
@@ -11,7 +11,7 @@ import {
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
 import { useState } from 'react'
-import { GridFour, GridNine, Rows } from '@phosphor-icons/react'
+import { GridFourIcon, GridNineIcon, RowsIcon } from '@phosphor-icons/react'
 
 export const Route = createFileRoute(
   '/_library/$libraryId/$version/docs/contributors',
@@ -65,7 +65,7 @@ function RouteComponent() {
                   }`}
                   title="Compact cards"
                 >
-                  <GridNine className="w-5 h-5" />
+                  <GridNineIcon className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('full')}
@@ -76,7 +76,7 @@ function RouteComponent() {
                   }`}
                   title="Full cards"
                 >
-                  <GridFour className="w-5 h-5" />
+                  <GridFourIcon className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('row')}
@@ -87,7 +87,7 @@ function RouteComponent() {
                   }`}
                   title="Row cards"
                 >
-                  <Rows className="w-5 h-5" />
+                  <RowsIcon className="w-5 h-5" />
                 </button>
               </div>
             </div>
diff --git a/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index e40db2ccb..bbb92b44c 100644
--- a/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -18,7 +18,7 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import * as v from 'valibot'
 import { CodeExplorer } from '~/components/CodeExplorer'
 import type { GitHubFileNode } from '~/utils/documents.server'
-import { ArrowSquareOut } from '@phosphor-icons/react'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react'
 import {
   ExampleDeployDialog,
   type DeployProvider,
@@ -412,7 +412,7 @@ function PageComponent() {
               className="flex gap-1 items-center"
               rel="noreferrer"
             >
-              <ArrowSquareOut /> GitHub
+              <ArrowSquareOutIcon /> GitHub
             </a>
             {!library.hideStackblitzUrl ? (
               <a
@@ -421,7 +421,7 @@ function PageComponent() {
                 className="flex gap-1 items-center"
                 rel="noreferrer"
               >
-                <ArrowSquareOut /> StackBlitz
+                <ArrowSquareOutIcon /> StackBlitz
               </a>
             ) : null}
             {!library.hideCodesandboxUrl ? (
@@ -431,7 +431,7 @@ function PageComponent() {
                 className="flex gap-1 items-center"
                 rel="noreferrer"
               >
-                <ArrowSquareOut /> CodeSandbox
+                <ArrowSquareOutIcon /> CodeSandbox
               </a>
             ) : null}
           </div>
diff --git a/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx b/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx
index d4efeb884..4df97a637 100644
--- a/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createFileRoute, notFound } from '@tanstack/react-router'
 import * as v from 'valibot'
 import { useThrottledCallback, useThrottler } from '@tanstack/react-pacer'
-import { Plus } from '@phosphor-icons/react'
+import { PlusIcon } from '@phosphor-icons/react'
 import { useQuery } from '@tanstack/react-query'
 import { twMerge } from 'tailwind-merge'
 
@@ -827,7 +827,7 @@ function RouteComponent() {
                     onClick={() => handleAddPackage(packageName, color)}
                     className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
                   >
-                    <Plus className="w-3 h-3" />
+                    <PlusIcon className="w-3 h-3" />
                     <span className="font-medium" style={{ color }}>
                       🌴 {frameworkMeta[framework]?.name ?? framework}-
                       {library.id.charAt(0).toUpperCase() + library.id.slice(1)}
@@ -854,7 +854,7 @@ function RouteComponent() {
                       onClick={() => handleAddPackage(mainPackage, color)}
                       className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
                     >
-                      <Plus className="w-3 h-3" />
+                      <PlusIcon className="w-3 h-3" />
                       <span className="font-medium" style={{ color }}>
                         {mainPackage}
                       </span>
diff --git a/src/routes/account/feedback.tsx b/src/routes/account/feedback.tsx
index abb340715..ffc3b7737 100644
--- a/src/routes/account/feedback.tsx
+++ b/src/routes/account/feedback.tsx
@@ -6,7 +6,7 @@ import { PaginationControls } from '~/components/PaginationControls'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { DocFeedbackNote } from '~/components/DocFeedbackNote'
 import { Spinner } from '~/components/Spinner'
-import { Medal, ArrowSquareOut } from '@phosphor-icons/react'
+import { MedalIcon, ArrowSquareOutIcon } from '@phosphor-icons/react'
 
 export const Route = createFileRoute('/account/feedback')({
   component: AccountFeedbackPage,
@@ -54,7 +54,7 @@ function AccountFeedbackPage() {
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
-              <Medal className="text-2xl text-blue-600 dark:text-blue-400" />
+              <MedalIcon className="text-2xl text-blue-600 dark:text-blue-400" />
               <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                 Feedback Points
               </h3>
@@ -98,7 +98,7 @@ function AccountFeedbackPage() {
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1"
           >
             View Leaderboard
-            <ArrowSquareOut className="text-xs" />
+            <ArrowSquareOutIcon className="text-xs" />
           </Link>
         </div>
       </div>
@@ -134,7 +134,7 @@ function AccountFeedbackPage() {
                   >
                     {item.libraryId}
                     {item.pagePath}
-                    <ArrowSquareOut className="text-[10px]" />
+                    <ArrowSquareOutIcon className="text-[10px]" />
                   </Link>
 
                   {/* Feedback card */}
diff --git a/src/routes/account/index.tsx b/src/routes/account/index.tsx
index 8d78b35eb..1d8327bfd 100644
--- a/src/routes/account/index.tsx
+++ b/src/routes/account/index.tsx
@@ -12,7 +12,12 @@ import { hasCapability } from '~/db/types'
 import { useToast } from '~/components/ToastProvider'
 import { updateAdPreference } from '~/utils/users.functions'
 import { getMyStreak } from '~/utils/activity.functions'
-import { SignOut, Flame, Trophy, Calendar } from '@phosphor-icons/react'
+import {
+  SignOutIcon,
+  FlameIcon,
+  TrophyIcon,
+  CalendarIcon,
+} from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { Button } from '~/ui'
 
@@ -150,7 +155,7 @@ function AccountSettingsPage() {
         ) : streakQuery.data ? (
           <div className="grid grid-cols-3 gap-3 text-sm">
             <div className="flex flex-col items-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-              <Flame className="w-5 h-5 text-orange-500 mb-1" />
+              <FlameIcon className="w-5 h-5 text-orange-500 mb-1" />
               <span className="text-2xl font-bold text-gray-900 dark:text-white">
                 {streakQuery.data.currentStreak}
               </span>
@@ -159,7 +164,7 @@ function AccountSettingsPage() {
               </span>
             </div>
             <div className="flex flex-col items-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-              <Trophy className="w-5 h-5 text-yellow-500 mb-1" />
+              <TrophyIcon className="w-5 h-5 text-yellow-500 mb-1" />
               <span className="text-2xl font-bold text-gray-900 dark:text-white">
                 {streakQuery.data.longestStreak}
               </span>
@@ -168,7 +173,7 @@ function AccountSettingsPage() {
               </span>
             </div>
             <div className="flex flex-col items-center p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-              <Calendar className="w-5 h-5 text-blue-500 mb-1" />
+              <CalendarIcon className="w-5 h-5 text-blue-500 mb-1" />
               <span className="text-2xl font-bold text-gray-900 dark:text-white">
                 {streakQuery.data.totalActiveDays}
               </span>
@@ -181,7 +186,7 @@ function AccountSettingsPage() {
       </div>
       <div>
         <Button variant="ghost" size="xs" onClick={signOut}>
-          <SignOut className="w-3.5 h-3.5" />
+          <SignOutIcon className="w-3.5 h-3.5" />
           Logout
         </Button>
       </div>
diff --git a/src/routes/account/integrations.tsx b/src/routes/account/integrations.tsx
index 072081384..e2cf9283f 100644
--- a/src/routes/account/integrations.tsx
+++ b/src/routes/account/integrations.tsx
@@ -16,15 +16,15 @@ import { useToast } from '~/components/ToastProvider'
 import { Card } from '~/components/Card'
 import { Button, FormInput } from '~/ui'
 import {
-  Key,
-  Plus,
-  Trash,
-  Prohibit,
-  Copy,
-  Check,
-  Warning,
-  Clock,
-  LinkSimple,
+  KeyIcon,
+  PlusIcon,
+  TrashIcon,
+  ProhibitIcon,
+  CopyIcon,
+  CheckIcon,
+  WarningIcon,
+  ClockIcon,
+  LinkSimpleIcon,
 } from '@phosphor-icons/react'
 export const Route = createFileRoute('/account/integrations')({
   component: IntegrationsPage,
@@ -169,7 +169,7 @@ function IntegrationsPage() {
         </div>
         {!isCreating && (
           <Button variant="ghost" size="xs" onClick={() => setIsCreating(true)}>
-            <Plus className="w-3.5 h-3.5" />
+            <PlusIcon className="w-3.5 h-3.5" />
             New Key
           </Button>
         )}
@@ -178,7 +178,7 @@ function IntegrationsPage() {
       {newlyCreatedKey && (
         <Card className="p-4 border-green-500 dark:border-green-600 bg-green-50 dark:bg-green-950/30">
           <div className="flex items-start gap-3">
-            <Key className="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
+            <KeyIcon className="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
             <div className="flex-1 min-w-0">
               <p className="font-medium text-green-800 dark:text-green-200 text-sm">
                 Your new API key
@@ -192,9 +192,9 @@ function IntegrationsPage() {
                 </code>
                 <Button onClick={handleCopy} className="shrink-0">
                   {copied.active ? (
-                    <Check className="w-3.5 h-3.5 text-green-600" />
+                    <CheckIcon className="w-3.5 h-3.5 text-green-600" />
                   ) : (
-                    <Copy className="w-3.5 h-3.5" />
+                    <CopyIcon className="w-3.5 h-3.5" />
                   )}
                   {copied.active ? 'Copied' : 'Copy'}
                 </Button>
@@ -283,7 +283,7 @@ function IntegrationsPage() {
           <div className="p-4 text-sm text-gray-500">Loading...</div>
         ) : keysQuery.data?.length === 0 ? (
           <div className="p-8 text-center">
-            <Key className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+            <KeyIcon className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
             <p className="text-gray-500 dark:text-gray-400 text-sm">
               No API keys yet
             </p>
@@ -305,7 +305,7 @@ function IntegrationsPage() {
                       : 'bg-blue-50 dark:bg-blue-950/30'
                   }`}
                 >
-                  <Key
+                  <KeyIcon
                     className={`w-4 h-4 ${
                       !key.isActive || isExpired(key.expiresAt)
                         ? 'text-gray-400'
@@ -325,7 +325,7 @@ function IntegrationsPage() {
                     )}
                     {key.isActive && isExpired(key.expiresAt) && (
                       <span className="text-xs px-1.5 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded flex items-center gap-1">
-                        <Warning className="w-3 h-3" />
+                        <WarningIcon className="w-3 h-3" />
                         Expired
                       </span>
                     )}
@@ -333,7 +333,7 @@ function IntegrationsPage() {
                   <div className="flex items-center gap-3 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                     <code className="font-mono">{key.keyPrefix}...</code>
                     <span className="flex items-center gap-1">
-                      <Clock className="w-3 h-3" />
+                      <ClockIcon className="w-3 h-3" />
                       Created {formatDate(key.createdAt)}
                     </span>
                     {key.lastUsedAt && (
@@ -354,7 +354,7 @@ function IntegrationsPage() {
                     disabled={revokeMutation.isPending}
                     title="Revoke key"
                   >
-                    <Prohibit className="w-3.5 h-3.5" />
+                    <ProhibitIcon className="w-3.5 h-3.5" />
                     Revoke
                   </Button>
                 )}
@@ -366,7 +366,7 @@ function IntegrationsPage() {
                   title="Delete key"
                   className="text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30"
                 >
-                  <Trash className="w-3.5 h-3.5" />
+                  <TrashIcon className="w-3.5 h-3.5" />
                 </Button>
               </div>
             </div>
@@ -391,7 +391,7 @@ function IntegrationsPage() {
           <div className="p-4 text-sm text-gray-500">Loading...</div>
         ) : connectedAppsQuery.data?.length === 0 ? (
           <div className="p-8 text-center">
-            <LinkSimple className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+            <LinkSimpleIcon className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
             <p className="text-gray-500 dark:text-gray-400 text-sm">
               No connected apps
             </p>
@@ -407,7 +407,7 @@ function IntegrationsPage() {
             >
               <div className="flex items-center gap-3 min-w-0">
                 <div className="p-2 rounded-lg bg-purple-50 dark:bg-purple-950/30">
-                  <LinkSimple className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+                  <LinkSimpleIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                 </div>
                 <div className="min-w-0">
                   <div className="flex items-center gap-2">
@@ -417,7 +417,7 @@ function IntegrationsPage() {
                   </div>
                   <div className="flex items-center gap-3 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                     <span className="flex items-center gap-1">
-                      <Clock className="w-3 h-3" />
+                      <ClockIcon className="w-3 h-3" />
                       Connected {formatDate(app.createdAt)}
                     </span>
                     {app.lastUsedAt && (
@@ -437,7 +437,7 @@ function IntegrationsPage() {
                   title="Revoke access"
                   className="text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30"
                 >
-                  <Prohibit className="w-3.5 h-3.5" />
+                  <ProhibitIcon className="w-3.5 h-3.5" />
                   Revoke
                 </Button>
               </div>
diff --git a/src/routes/account/notes.tsx b/src/routes/account/notes.tsx
index b9760b040..e3ce540ca 100644
--- a/src/routes/account/notes.tsx
+++ b/src/routes/account/notes.tsx
@@ -6,7 +6,7 @@ import { PaginationControls } from '~/components/PaginationControls'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { DocFeedbackNote } from '~/components/DocFeedbackNote'
 import { Spinner } from '~/components/Spinner'
-import { ArrowSquareOut } from '@phosphor-icons/react'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react'
 
 export const Route = createFileRoute('/account/notes')({
   component: AccountNotesPage,
@@ -80,7 +80,7 @@ function AccountNotesPage() {
                   >
                     {item.libraryId}
                     {item.pagePath}
-                    <ArrowSquareOut className="text-[10px]" />
+                    <ArrowSquareOutIcon className="text-[10px]" />
                   </Link>
 
                   {/* Feedback card */}
diff --git a/src/routes/account/submissions.tsx b/src/routes/account/submissions.tsx
index 1e6fab7da..2a48ade07 100644
--- a/src/routes/account/submissions.tsx
+++ b/src/routes/account/submissions.tsx
@@ -7,13 +7,13 @@ import { libraries } from '~/libraries'
 import { useToast } from '~/components/ToastProvider'
 import { seo } from '~/utils/seo'
 import {
-  Plus,
-  Trash,
-  ArrowSquareOut,
-  Clock,
-  Check,
-  X,
-  Pencil,
+  PlusIcon,
+  TrashIcon,
+  ArrowSquareOutIcon,
+  ClockIcon,
+  CheckIcon,
+  XIcon,
+  PencilIcon,
 } from '@phosphor-icons/react'
 import type { Showcase } from '~/db/types'
 import { Badge, Button } from '~/ui'
@@ -80,21 +80,21 @@ function AccountSubmissionsPage() {
       case 'pending':
         return (
           <Badge variant="warning" className="gap-1">
-            <Clock className="w-3 h-3" />
+            <ClockIcon className="w-3 h-3" />
             Pending Review
           </Badge>
         )
       case 'approved':
         return (
           <Badge variant="success" className="gap-1">
-            <Check className="w-3 h-3" />
+            <CheckIcon className="w-3 h-3" />
             Approved
           </Badge>
         )
       case 'denied':
         return (
           <Badge variant="error" className="gap-1">
-            <X className="w-3 h-3" />
+            <XIcon className="w-3 h-3" />
             Denied
           </Badge>
         )
@@ -113,7 +113,7 @@ function AccountSubmissionsPage() {
           to="/showcase/submit"
           className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg border-none"
         >
-          <Plus className="w-4 h-4" />
+          <PlusIcon className="w-4 h-4" />
           New Submission
         </Button>
       </div>
@@ -196,17 +196,17 @@ function AccountSubmissionsPage() {
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <ArrowSquareOut className="w-3 h-3" />
+                      <ArrowSquareOutIcon className="w-3 h-3" />
                       Visit
                     </Button>
                     <Link to="/showcase/edit/$id" params={{ id: showcase.id }}>
                       <Button variant="ghost" size="xs">
-                        <Pencil className="w-3 h-3" />
+                        <PencilIcon className="w-3 h-3" />
                         Edit
                       </Button>
                     </Link>
                     <Button onClick={() => handleDelete(showcase.id)}>
-                      <Trash className="w-3 h-3" />
+                      <TrashIcon className="w-3 h-3" />
                       Delete
                     </Button>
                   </div>
@@ -225,7 +225,7 @@ function AccountSubmissionsPage() {
             to="/showcase/submit"
             className="mt-4 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg border-none"
           >
-            <Plus className="w-5 h-5" />
+            <PlusIcon className="w-5 h-5" />
             Submit Your First Project
           </Button>
         </div>
diff --git a/src/routes/admin/audit.tsx b/src/routes/admin/audit.tsx
index 3781ed103..5dc8c153e 100644
--- a/src/routes/admin/audit.tsx
+++ b/src/routes/admin/audit.tsx
@@ -20,7 +20,7 @@ import {
 } from '@tanstack/react-table'
 import * as v from 'valibot'
 import { listAuditLogs } from '~/utils/audit.functions'
-import { Shield, CaretDown, CaretUp } from '@phosphor-icons/react'
+import { ShieldIcon, CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'
 import {
   AdminAccessDenied,
   AdminLoading,
@@ -132,9 +132,9 @@ function DetailsCell({ details }: { details: string | null }) {
         className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
       >
         {expanded ? (
-          <CaretUp className="w-3 h-3" />
+          <CaretUpIcon className="w-3 h-3" />
         ) : (
-          <CaretDown className="w-3 h-3" />
+          <CaretDownIcon className="w-3 h-3" />
         )}
         {expanded ? 'Hide' : 'Show'} Details
       </button>
@@ -378,7 +378,7 @@ function AuditPage() {
     <div className="w-full p-4">
       <div className="flex flex-col gap-4">
         <AdminPageHeader
-          icon={<Shield />}
+          icon={<ShieldIcon />}
           title="Audit Logs"
           isLoading={auditQuery.isFetching}
         />
@@ -451,7 +451,7 @@ function AuditPage() {
 
           {(!auditQuery.data || auditQuery.data?.page.length === 0) && (
             <AdminEmptyState
-              icon={<Shield className="w-12 h-12" />}
+              icon={<ShieldIcon className="w-12 h-12" />}
               title="No audit records found"
               description="Admin actions will be recorded here."
             />
diff --git a/src/routes/admin/feedback_.$id.tsx b/src/routes/admin/feedback_.$id.tsx
index 2d770a57a..ae87b458e 100644
--- a/src/routes/admin/feedback_.$id.tsx
+++ b/src/routes/admin/feedback_.$id.tsx
@@ -6,15 +6,15 @@ import {
 } from '~/utils/docFeedback.functions'
 import { libraries } from '~/libraries'
 import {
-  ArrowLeft,
-  ChatCentered,
-  User,
-  Calendar,
-  FileText,
-  Check,
-  X,
-  Clock,
-  Warning,
+  ArrowLeftIcon,
+  ChatCenteredIcon,
+  UserIcon,
+  CalendarIcon,
+  FileTextIcon,
+  CheckIcon,
+  XIcon,
+  ClockIcon,
+  WarningIcon,
 } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { Badge, Button } from '~/ui'
@@ -68,7 +68,7 @@ function FeedbackDetailPage() {
       <div className="w-full p-4">
         <div className="max-w-4xl mx-auto">
           <div className="text-center py-12">
-            <ChatCentered className="mx-auto h-12 w-12 text-gray-400" />
+            <ChatCenteredIcon className="mx-auto h-12 w-12 text-gray-400" />
             <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               Feedback not found
             </h3>
@@ -79,7 +79,7 @@ function FeedbackDetailPage() {
               to="/admin/feedback"
               className="mt-4 inline-flex items-center gap-2 text-blue-600 hover:text-blue-700"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeftIcon className="w-4 h-4" />
               Back to Feedback
             </Link>
           </div>
@@ -111,13 +111,13 @@ function FeedbackDetailPage() {
             to="/admin/feedback"
             className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-4"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeftIcon className="w-4 h-4" />
             Back to Feedback
           </Link>
 
           <div className="flex items-start gap-4">
             <div className="w-12 h-12 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-              <ChatCentered className="w-6 h-6 text-gray-400" />
+              <ChatCenteredIcon className="w-6 h-6 text-gray-400" />
             </div>
             <div className="flex-1">
               <div className="flex items-center gap-3 flex-wrap">
@@ -140,7 +140,7 @@ function FeedbackDetailPage() {
                 </Badge>
                 {feedback.isDetached && (
                   <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
-                    <Warning className="w-3 h-3" />
+                    <WarningIcon className="w-3 h-3" />
                     Detached
                   </span>
                 )}
@@ -189,7 +189,7 @@ function FeedbackDetailPage() {
             <dl className="space-y-4">
               <div>
                 <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <FileText className="w-4 h-4" />
+                  <FileTextIcon className="w-4 h-4" />
                   Page Path
                 </dt>
                 <dd className="mt-1 text-sm text-gray-900 dark:text-white font-mono">
@@ -208,7 +208,7 @@ function FeedbackDetailPage() {
               )}
               <div>
                 <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <Calendar className="w-4 h-4" />
+                  <CalendarIcon className="w-4 h-4" />
                   Submitted
                 </dt>
                 <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -237,7 +237,7 @@ function FeedbackDetailPage() {
                   />
                 ) : (
                   <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                    <User className="w-5 h-5 text-gray-400" />
+                    <UserIcon className="w-5 h-5 text-gray-400" />
                   </div>
                 )}
                 <div>
@@ -259,7 +259,7 @@ function FeedbackDetailPage() {
         {feedback.status === 'pending' && (
           <Card className="p-6 mt-6">
             <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-              <Clock className="w-5 h-5" />
+              <ClockIcon className="w-5 h-5" />
               Pending Review
             </h2>
             <div className="flex gap-4">
@@ -268,7 +268,7 @@ function FeedbackDetailPage() {
                 disabled={moderateMutation.isPending}
                 className="bg-green-600 hover:bg-green-700"
               >
-                <Check className="w-4 h-4 mr-2" />
+                <CheckIcon className="w-4 h-4 mr-2" />
                 Approve
               </Button>
               <Button
@@ -281,7 +281,7 @@ function FeedbackDetailPage() {
                 disabled={moderateMutation.isPending}
                 className="bg-red-600 hover:bg-red-700"
               >
-                <X className="w-4 h-4 mr-2" />
+                <XIcon className="w-4 h-4 mr-2" />
                 Deny
               </Button>
             </div>
diff --git a/src/routes/admin/github-stats.tsx b/src/routes/admin/github-stats.tsx
index 31bd13cb6..bf952b3c7 100644
--- a/src/routes/admin/github-stats.tsx
+++ b/src/routes/admin/github-stats.tsx
@@ -23,7 +23,12 @@ import {
 } from '~/utils/stats-admin.functions'
 import { formatDistanceToNow } from '~/utils/dates'
 import { GithubIcon } from '~/components/icons/GithubIcon'
-import { Package, ArrowsClockwise, Star, Users } from '@phosphor-icons/react'
+import {
+  PackageIcon,
+  ArrowsClockwiseIcon,
+  StarIcon,
+  UsersIcon,
+} from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { Button } from '~/ui'
 
@@ -107,7 +112,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <Star className="text-yellow-500" />
+                <StarIcon className="text-yellow-500" />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.starCount.toLocaleString()}
                 </span>
@@ -133,7 +138,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <Users className="text-blue-500" />
+                <UsersIcon className="text-blue-500" />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.contributorCount.toLocaleString()}
                 </span>
@@ -170,7 +175,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <Package className="text-purple-500" />
+                <PackageIcon className="text-purple-500" />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.dependentCount.toLocaleString()}
                 </span>
@@ -292,7 +297,9 @@ function GitHubStatsAdmin() {
               }}
               disabled={isRefreshing || refreshAllMutation.isPending}
             >
-              <ArrowsClockwise className={isRefreshing ? 'animate-spin' : ''} />
+              <ArrowsClockwiseIcon
+                className={isRefreshing ? 'animate-spin' : ''}
+              />
               Refresh
             </Button>
           )
@@ -330,7 +337,7 @@ function GitHubStatsAdmin() {
             onClick={() => refreshAllMutation.mutate()}
             disabled={refreshAllMutation.isPending || refreshingKey !== null}
           >
-            <ArrowsClockwise
+            <ArrowsClockwiseIcon
               className={refreshAllMutation.isPending ? 'animate-spin' : ''}
             />
             Refresh All
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index de06172f2..f9a558697 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -11,19 +11,19 @@ import {
 } from '~/utils/activity.functions'
 import { Suspense, lazy, useState } from 'react'
 import {
-  ArrowDown,
-  ArrowUp,
-  ChartLine,
-  EyeSlash,
-  Flame,
-  SquaresFour,
-  List,
-  Lock,
-  SignIn,
-  Minus,
-  Shield,
-  Trophy,
-  Users,
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChartLineIcon,
+  EyeSlashIcon,
+  FlameIcon,
+  SquaresFourIcon,
+  ListIcon,
+  LockIcon,
+  SignInIcon,
+  MinusIcon,
+  ShieldIcon,
+  TrophyIcon,
+  UsersIcon,
 } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { Badge, Button } from '~/ui'
@@ -94,7 +94,7 @@ function AdminPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
+          <LockIcon className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -152,10 +152,10 @@ function AdminDashboard() {
   }
 
   const tabs = [
-    { id: 'overview', label: 'Overview', icon: <SquaresFour /> },
-    { id: 'users', label: 'Users', icon: <Users /> },
-    { id: 'activity', label: 'Activity', icon: <SignIn /> },
-    { id: 'ads', label: 'Ads', icon: <EyeSlash /> },
+    { id: 'overview', label: 'Overview', icon: <SquaresFourIcon /> },
+    { id: 'users', label: 'Users', icon: <UsersIcon /> },
+    { id: 'activity', label: 'Activity', icon: <SignInIcon /> },
+    { id: 'ads', label: 'Ads', icon: <EyeSlashIcon /> },
   ] as const
 
   return (
@@ -163,7 +163,7 @@ function AdminDashboard() {
       <div className="max-w-7xl mx-auto">
         <div className="mb-6">
           <div className="flex items-center gap-3 mb-2">
-            <ChartLine className="text-2xl text-blue-500" />
+            <ChartLineIcon className="text-2xl text-blue-500" />
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
               Dashboard
             </h1>
@@ -331,7 +331,7 @@ function OverviewTab({
         {activityStats && (
           <Card className="p-6">
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-              <SignIn className="text-cyan-500" />
+              <SignInIcon className="text-cyan-500" />
               Login Activity
             </h3>
             <div className="grid grid-cols-3 gap-4">
@@ -368,7 +368,7 @@ function OverviewTab({
           <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <Trophy className="text-amber-500" />
+                <TrophyIcon className="text-amber-500" />
                 Top Streaks
               </h3>
               <Link
@@ -411,7 +411,7 @@ function OverviewTab({
                     </span>
                   </div>
                   <div className="flex items-center gap-1 text-orange-600 dark:text-orange-400 font-bold">
-                    <Flame className="w-4 h-4" />
+                    <FlameIcon className="w-4 h-4" />
                     {user.currentStreak}
                   </div>
                 </div>
@@ -827,7 +827,7 @@ function ActivityTab({
                             />
                           ) : (
                             <div className="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                              <Users className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                              <UsersIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
                             </div>
                           )}
                         </div>
@@ -852,7 +852,7 @@ function ActivityTab({
       {dauStats && dauStats.streakLeaderboard.length > 0 && (
         <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
           <div className="flex items-center gap-3 mb-4">
-            <Trophy className="text-2xl text-amber-500" />
+            <TrophyIcon className="text-2xl text-amber-500" />
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
               Streak Leaderboard
             </h3>
@@ -886,7 +886,7 @@ function ActivityTab({
                       />
                     ) : (
                       <div className="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                        <Users className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                        <UsersIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
                       </div>
                     )}
                   </div>
@@ -901,7 +901,7 @@ function ActivityTab({
                 </div>
                 <div className="text-right">
                   <div className="flex items-center gap-1 text-lg font-bold text-orange-600 dark:text-orange-400">
-                    <Flame className="w-4 h-4" />
+                    <FlameIcon className="w-4 h-4" />
                     {user.currentStreak}
                   </div>
                   <div className="text-xs text-gray-500 dark:text-gray-400">
@@ -919,7 +919,7 @@ function ActivityTab({
         <Card className="bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800 p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <Shield className="text-2xl text-orange-500" />
+              <ShieldIcon className="text-2xl text-orange-500" />
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                 Admin Activity
               </h3>
@@ -999,7 +999,7 @@ function AdsTab({
       {/* Waitlist Demand - Primary Focus */}
       <Card className="bg-linear-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-purple-200 dark:border-purple-800 p-6">
         <div className="flex items-center gap-3 mb-4">
-          <List className="text-2xl text-purple-500" />
+          <ListIcon className="text-2xl text-purple-500" />
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
             Ad-Free Waitlist Demand
           </h3>
@@ -1057,7 +1057,7 @@ function AdsTab({
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card className="p-6">
           <div className="flex items-center gap-3 mb-4">
-            <EyeSlash className="text-2xl text-green-500" />
+            <EyeSlashIcon className="text-2xl text-green-500" />
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
               Users with Ads Disabled
             </h3>
@@ -1088,7 +1088,7 @@ function AdsTab({
 
         <Card className="p-6">
           <div className="flex items-center gap-3 mb-4">
-            <Shield className="text-2xl text-blue-500" />
+            <ShieldIcon className="text-2xl text-blue-500" />
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
               DisableAds Capability
             </h3>
@@ -1149,11 +1149,11 @@ function ChangeIndicator({ value }: { value: number }) {
       }`}
     >
       {isPositive ? (
-        <ArrowUp className="w-4 h-4" />
+        <ArrowUpIcon className="w-4 h-4" />
       ) : isNegative ? (
-        <ArrowDown className="w-4 h-4" />
+        <ArrowDownIcon className="w-4 h-4" />
       ) : (
-        <Minus className="w-4 h-4" />
+        <MinusIcon className="w-4 h-4" />
       )}
       {Math.abs(value).toFixed(0)}%
     </div>
@@ -1192,7 +1192,7 @@ function SignupsChartCard({
     <Card className="p-6">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-          <Users className="text-blue-500" />
+          <UsersIcon className="text-blue-500" />
           {title}
         </h3>
         <div className="flex items-center gap-2">
@@ -1258,7 +1258,7 @@ function DauChartCard({
     <Card className="p-6">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-          <Flame className="text-orange-500" />
+          <FlameIcon className="text-orange-500" />
           {title}
         </h3>
         <div className="flex items-center gap-2">
@@ -1322,7 +1322,7 @@ function LoginsChartCard({
     <Card className="p-6">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-          <SignIn className="text-cyan-500" />
+          <SignInIcon className="text-cyan-500" />
           {title}
         </h3>
         <ChartControls
diff --git a/src/routes/admin/intent.tsx b/src/routes/admin/intent.tsx
index d3e3e8dbe..a28496241 100644
--- a/src/routes/admin/intent.tsx
+++ b/src/routes/admin/intent.tsx
@@ -2,17 +2,17 @@ import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  ArrowsClockwise as RefreshCw,
-  Play,
-  ArrowCounterClockwise as RotateCcw,
-  Trash as Trash2,
-  BookOpen,
-  CaretDown as ChevronDown,
-  CaretRight as ChevronRight,
-  Warning as AlertTriangle,
-  CheckCircle as CheckCircle2,
-  Clock,
-  Wrench,
+  ArrowsClockwiseIcon as RefreshCw,
+  PlayIcon,
+  ArrowCounterClockwiseIcon as RotateCcw,
+  TrashIcon as Trash2,
+  BookOpenIcon,
+  CaretDownIcon as ChevronDown,
+  CaretRightIcon as ChevronRight,
+  WarningIcon as AlertTriangle,
+  CheckCircleIcon as CheckCircle2,
+  ClockIcon,
+  WrenchIcon,
 } from '@phosphor-icons/react'
 import { Button } from '~/ui'
 import { Card } from '~/components/Card'
@@ -128,7 +128,7 @@ function IntentAdminPage() {
       <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
         <div>
           <div className="flex items-center gap-2 mb-1">
-            <BookOpen className="w-5 h-5 text-sky-500" />
+            <BookOpenIcon className="w-5 h-5 text-sky-500" />
             <h1 className="text-xl font-bold text-gray-900 dark:text-white">
               Intent Skills Registry
             </h1>
@@ -182,7 +182,7 @@ function IntentAdminPage() {
             }
             title="Download tarballs and extract skills for pending versions"
           >
-            <Play
+            <PlayIcon
               className={
                 processMutation.isPending ? 'animate-pulse w-4 h-4' : 'w-4 h-4'
               }
@@ -503,7 +503,7 @@ function WorkflowHealthSection({
           disabled={repairing || loading || !needsRepair}
           title="Mark stale runs as errored and delete schedules for workflows that are no longer registered"
         >
-          <Wrench
+          <WrenchIcon
             className={repairing ? 'w-3.5 h-3.5 animate-pulse' : 'w-3.5 h-3.5'}
           />
           {repairing ? 'Repairing...' : 'Repair Store'}
@@ -608,7 +608,7 @@ function WorkflowRunsSection({
   return (
     <div className="mb-6">
       <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5 mb-2">
-        <Clock className="w-4 h-4" />
+        <ClockIcon className="w-4 h-4" />
         Workflow Runs
       </h2>
       {loading ? (
@@ -969,7 +969,7 @@ function PackageRow({
           </span>
         ) : (
           <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-            <Clock className="w-3.5 h-3.5" /> Unverified
+            <ClockIcon className="w-3.5 h-3.5" /> Unverified
           </span>
         )}
       </td>
diff --git a/src/routes/admin/logins.tsx b/src/routes/admin/logins.tsx
index bfbe35fc8..ae3d072e2 100644
--- a/src/routes/admin/logins.tsx
+++ b/src/routes/admin/logins.tsx
@@ -21,7 +21,7 @@ import {
 } from '@tanstack/react-table'
 import * as v from 'valibot'
 import { listLoginHistory } from '~/utils/audit.functions'
-import { SignIn } from '@phosphor-icons/react'
+import { SignInIcon } from '@phosphor-icons/react'
 import { Badge } from '~/ui'
 import {
   AdminAccessDenied,
@@ -274,7 +274,7 @@ function LoginsPage() {
     <div className="w-full p-4">
       <div className="flex flex-col gap-4">
         <AdminPageHeader
-          icon={<SignIn />}
+          icon={<SignInIcon />}
           title="Login History"
           isLoading={loginsQuery.isFetching}
         />
@@ -353,7 +353,7 @@ function LoginsPage() {
 
           {(!loginsQuery.data || loginsQuery.data?.page.length === 0) && (
             <AdminEmptyState
-              icon={<SignIn className="w-12 h-12" />}
+              icon={<SignInIcon className="w-12 h-12" />}
               title="No login records found"
               description="Login history will appear here once users start logging in."
             />
diff --git a/src/routes/admin/npm-stats.tsx b/src/routes/admin/npm-stats.tsx
index 9ad03beae..20bbd0295 100644
--- a/src/routes/admin/npm-stats.tsx
+++ b/src/routes/admin/npm-stats.tsx
@@ -1,6 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Download, ArrowsClockwise as RefreshCw } from '@phosphor-icons/react'
+import {
+  DownloadIcon,
+  ArrowsClockwiseIcon as RefreshCw,
+} from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { NpmIcon } from '~/components/icons/NpmIcon'
 import { homepageNpmStatsSummaryQuery } from '~/queries/stats'
@@ -143,7 +146,7 @@ function NpmStatsAdmin() {
                           </div>
                         </div>
                         <div className="flex items-center gap-3">
-                          <Download className="size-5 text-emerald-500" />
+                          <DownloadIcon className="size-5 text-emerald-500" />
                           <div className="text-2xl font-bold text-gray-900 dark:text-white">
                             {summary.totalDownloads.toLocaleString()}
                           </div>
@@ -189,7 +192,7 @@ function SummaryMetric({
         {label}
       </div>
       <div className="flex items-center gap-3">
-        {iconClassName ? <Download className={iconClassName} /> : null}
+        {iconClassName ? <DownloadIcon className={iconClassName} /> : null}
         <div
           className={`text-2xl font-bold text-gray-900 dark:text-white ${valueClassName ?? ''}`}
         >
diff --git a/src/routes/admin/roles.$roleId.tsx b/src/routes/admin/roles.$roleId.tsx
index 0cf7c3a59..27a020fb5 100644
--- a/src/routes/admin/roles.$roleId.tsx
+++ b/src/routes/admin/roles.$roleId.tsx
@@ -10,7 +10,13 @@ import {
   flexRender,
   type ColumnDef,
 } from '@tanstack/react-table'
-import { ArrowLeft, Lock, Trash, User, Users } from '@phosphor-icons/react'
+import {
+  ArrowLeftIcon,
+  LockIcon,
+  TrashIcon,
+  UserIcon,
+  UsersIcon,
+} from '@phosphor-icons/react'
 import { requireCapability } from '~/utils/auth.functions'
 import { hasCapability } from '~/db/types'
 import { Badge, Button } from '~/ui'
@@ -140,7 +146,7 @@ function RoleDetailPage() {
                   />
                 ) : (
                   <div className="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                    <User className="text-gray-500 dark:text-gray-400" />
+                    <UserIcon className="text-gray-500 dark:text-gray-400" />
                   </div>
                 )}
               </div>
@@ -198,7 +204,7 @@ function RoleDetailPage() {
               }}
               className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
             >
-              <Trash className="w-4 h-4" />
+              <TrashIcon className="w-4 h-4" />
             </button>
           )
         },
@@ -228,7 +234,7 @@ function RoleDetailPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
+          <LockIcon className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -263,7 +269,7 @@ function RoleDetailPage() {
               to="/admin/roles"
               className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
             >
-              <ArrowLeft className="w-5 h-5" />
+              <ArrowLeftIcon className="w-5 h-5" />
             </Link>
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
@@ -280,7 +286,7 @@ function RoleDetailPage() {
 
         <div className="mb-4 flex items-center gap-4">
           <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-            <Users className="w-5 h-5" />
+            <UsersIcon className="w-5 h-5" />
             <span className="text-sm">
               {usersWithRole?.length || 0} user(s) with this role
             </span>
@@ -411,7 +417,7 @@ function RoleDetailPage() {
 
           {(!usersWithRole || usersWithRole.length === 0) && (
             <div className="text-center py-12">
-              <Users className="mx-auto h-12 w-12 text-gray-400" />
+              <UsersIcon className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
                 No users with this role
               </h3>
diff --git a/src/routes/admin/roles.index.tsx b/src/routes/admin/roles.index.tsx
index eb514ef4e..7bd8b6df7 100644
--- a/src/routes/admin/roles.index.tsx
+++ b/src/routes/admin/roles.index.tsx
@@ -21,14 +21,14 @@ import {
   type Row,
 } from '@tanstack/react-table'
 import {
-  PencilSimpleLine,
-  Plus,
-  FloppyDisk,
-  X,
-  Trash,
-  Users,
-  Envelope,
-  Shield,
+  PencilSimpleLineIcon,
+  PlusIcon,
+  FloppyDiskIcon,
+  XIcon,
+  TrashIcon,
+  UsersIcon,
+  EnvelopeIcon,
+  ShieldIcon,
 } from '@phosphor-icons/react'
 import { VALID_CAPABILITIES, type Capability } from '~/db/types'
 import {
@@ -330,13 +330,13 @@ function RolesPage() {
                   onClick={handleSaveRole}
                   className="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
                 >
-                  <FloppyDisk className="w-4 h-4" />
+                  <FloppyDiskIcon className="w-4 h-4" />
                 </button>
                 <button
                   onClick={handleCancelEdit}
                   className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                 >
-                  <X className="w-4 h-4" />
+                  <XIcon className="w-4 h-4" />
                 </button>
               </div>
             )
@@ -349,19 +349,19 @@ function RolesPage() {
                 className="text-purple-600 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-300"
                 title="View users with this role"
               >
-                <Users className="w-4 h-4" />
+                <UsersIcon className="w-4 h-4" />
               </Link>
               <button
                 onClick={() => handleEditRole(role)}
                 className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
               >
-                <PencilSimpleLine className="w-4 h-4" />
+                <PencilSimpleLineIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => handleDeleteRole(role)}
                 className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
               >
-                <Trash className="w-4 h-4" />
+                <TrashIcon className="w-4 h-4" />
               </button>
             </div>
           )
@@ -422,13 +422,13 @@ function RolesPage() {
     <div className="w-full p-4">
       <div className="flex flex-col gap-4">
         <AdminPageHeader
-          icon={<Shield />}
+          icon={<ShieldIcon />}
           title="Manage Roles"
           isLoading={rolesQuery.isFetching}
           actions={
             !isCreating && (
               <Button size="xs" onClick={handleCreateRole}>
-                <Plus className="w-4 h-4" />
+                <PlusIcon className="w-4 h-4" />
                 Create Role
               </Button>
             )
@@ -466,7 +466,7 @@ function RolesPage() {
                 color="gray"
                 size="sm"
               >
-                <Envelope className="w-4 h-4" />
+                <EnvelopeIcon className="w-4 h-4" />
                 {testEmailStatus.loading ? 'Sending...' : 'Test Email'}
               </Button>
             </div>
@@ -535,11 +535,11 @@ function RolesPage() {
                 </div>
                 <div className="flex space-x-2">
                   <Button onClick={handleSaveRole} color="green">
-                    <FloppyDisk className="w-4 h-4" />
+                    <FloppyDiskIcon className="w-4 h-4" />
                     Save
                   </Button>
                   <Button onClick={handleCancelEdit} color="gray">
-                    <X className="w-4 h-4" />
+                    <XIcon className="w-4 h-4" />
                     Cancel
                   </Button>
                 </div>
@@ -605,7 +605,7 @@ function RolesPage() {
 
           {(!roles || roles.length === 0) && (
             <AdminEmptyState
-              icon={<Shield className="w-12 h-12" />}
+              icon={<ShieldIcon className="w-12 h-12" />}
               title="No roles found"
               description="Create your first role to get started."
             />
diff --git a/src/routes/admin/route.tsx b/src/routes/admin/route.tsx
index 74e958554..5dffc6c60 100644
--- a/src/routes/admin/route.tsx
+++ b/src/routes/admin/route.tsx
@@ -7,17 +7,17 @@ import {
   createFileRoute,
 } from '@tanstack/react-router'
 import {
-  X,
-  TextAlignLeft,
-  SquaresFour,
-  SignIn,
-  ChatsCircle,
-  Shield,
-  ShieldCheckered,
-  Note,
-  Users,
-  User,
-  BookOpen,
+  XIcon,
+  TextAlignLeftIcon,
+  SquaresFourIcon,
+  SignInIcon,
+  ChatsCircleIcon,
+  ShieldIcon,
+  ShieldCheckeredIcon,
+  NoteIcon,
+  UsersIcon,
+  UserIcon,
+  BookOpenIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 // Using public asset URL
@@ -26,7 +26,7 @@ import { requireAnyAdminCapability } from '~/utils/auth.functions'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { NpmIcon } from '~/components/icons/NpmIcon'
-import { Sparkle } from '@phosphor-icons/react'
+import { SparkleIcon } from '@phosphor-icons/react'
 import { hasCapability, type Capability } from '~/db/types'
 
 export const Route = createFileRoute('/admin')({
@@ -64,48 +64,48 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
   })[] = [
     {
       label: 'Dashboard',
-      icon: <SquaresFour />,
+      icon: <SquaresFourIcon />,
       to: '/admin',
     },
     {
       label: 'Users',
-      icon: <Users />,
+      icon: <UsersIcon />,
       to: '/admin/users',
       requiredCapability: 'admin',
     },
     {
       label: 'Roles',
-      icon: <ShieldCheckered />,
+      icon: <ShieldCheckeredIcon />,
       to: '/admin/roles',
       requiredCapability: 'admin',
     },
     {
       label: 'Login History',
-      icon: <SignIn />,
+      icon: <SignInIcon />,
       to: '/admin/logins',
       requiredCapability: 'admin',
     },
     {
       label: 'Audit Logs',
-      icon: <Shield />,
+      icon: <ShieldIcon />,
       to: '/admin/audit',
       requiredCapability: 'admin',
     },
     {
       label: 'Feedback',
-      icon: <ChatsCircle />,
+      icon: <ChatsCircleIcon />,
       to: '/admin/feedback',
       requiredCapability: 'moderate-feedback',
     },
     {
       label: 'Notes',
-      icon: <Note />,
+      icon: <NoteIcon />,
       to: '/admin/notes',
       requiredCapability: 'moderate-feedback',
     },
     {
       label: 'Showcases',
-      icon: <Sparkle />,
+      icon: <SparkleIcon />,
       to: '/admin/showcases',
       requiredCapability: 'moderate-showcases',
     },
@@ -121,17 +121,17 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
     },
     {
       label: 'Intent Skills',
-      icon: <BookOpen />,
+      icon: <BookOpenIcon />,
       to: '/admin/intent',
     },
     {
       label: 'Docs Cache',
-      icon: <BookOpen />,
+      icon: <BookOpenIcon />,
       to: '/admin/docs',
     },
     {
       label: 'My Account',
-      icon: <User />,
+      icon: <UserIcon />,
       to: '/account',
     },
   ]
@@ -181,8 +181,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
       >
         <summary className="py-2 px-4 flex gap-2 items-center justify-between">
           <div className="flex-1 flex gap-4 items-center">
-            <TextAlignLeft className="icon-open cursor-pointer" />
-            <X className="icon-close cursor-pointer" />
+            <TextAlignLeftIcon className="icon-open cursor-pointer" />
+            <XIcon className="icon-close cursor-pointer" />
             Admin Menu
           </div>
         </summary>
diff --git a/src/routes/admin/showcases_.$id.tsx b/src/routes/admin/showcases_.$id.tsx
index 557560e93..e0b0d84c3 100644
--- a/src/routes/admin/showcases_.$id.tsx
+++ b/src/routes/admin/showcases_.$id.tsx
@@ -11,21 +11,21 @@ import {
 import { libraries } from '~/libraries'
 import { USE_CASE_LABELS } from '~/utils/showcase.shared'
 import {
-  ArrowLeft,
-  Sparkle,
-  User,
-  Calendar,
-  Link as LinkIcon,
-  Check,
-  X,
-  ArrowSquareOut,
-  Clock,
-  ThumbsUp,
-  ThumbsDown,
-  Pencil,
-  Trash,
-  FloppyDisk,
-  ArrowCounterClockwise,
+  ArrowLeftIcon,
+  SparkleIcon,
+  UserIcon,
+  CalendarIcon,
+  LinkIcon,
+  CheckIcon,
+  XIcon,
+  ArrowSquareOutIcon,
+  ClockIcon,
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  PencilIcon,
+  TrashIcon,
+  FloppyDiskIcon,
+  ArrowCounterClockwiseIcon,
 } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { Badge, Button, FormInput } from '~/ui'
@@ -190,7 +190,7 @@ function ShowcaseDetailPage() {
       <div className="w-full p-4">
         <div className="max-w-4xl mx-auto">
           <div className="text-center py-12">
-            <Sparkle className="mx-auto h-12 w-12 text-gray-400" />
+            <SparkleIcon className="mx-auto h-12 w-12 text-gray-400" />
             <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               Showcase not found
             </h3>
@@ -201,7 +201,7 @@ function ShowcaseDetailPage() {
               to="/admin/showcases"
               className="mt-4 inline-flex items-center gap-2 text-blue-600 hover:text-blue-700"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeftIcon className="w-4 h-4" />
               Back to Showcases
             </Link>
           </div>
@@ -249,7 +249,7 @@ function ShowcaseDetailPage() {
               to="/admin/showcases"
               className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeftIcon className="w-4 h-4" />
               Back to Showcases
             </Link>
             <div className="flex items-center gap-2">
@@ -259,7 +259,7 @@ function ShowcaseDetailPage() {
                     onClick={cancelEditing}
                     disabled={updateMutation.isPending}
                   >
-                    <ArrowCounterClockwise className="w-4 h-4" />
+                    <ArrowCounterClockwiseIcon className="w-4 h-4" />
                     Cancel
                   </Button>
                   <Button
@@ -267,7 +267,7 @@ function ShowcaseDetailPage() {
                     className="bg-green-600 hover:bg-green-700 text-white border-green-600"
                     disabled={updateMutation.isPending}
                   >
-                    <FloppyDisk className="w-4 h-4" />
+                    <FloppyDiskIcon className="w-4 h-4" />
                     {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
                   </Button>
                 </>
@@ -277,7 +277,7 @@ function ShowcaseDetailPage() {
                     onClick={startEditing}
                     className="hover:text-blue-600 hover:border-blue-300 dark:hover:border-blue-700"
                   >
-                    <Pencil className="w-4 h-4" />
+                    <PencilIcon className="w-4 h-4" />
                     Edit
                   </Button>
                   <Button
@@ -285,7 +285,7 @@ function ShowcaseDetailPage() {
                     className="hover:text-red-600 hover:border-red-300 dark:hover:border-red-700"
                     disabled={deleteMutation.isPending}
                   >
-                    <Trash className="w-4 h-4" />
+                    <TrashIcon className="w-4 h-4" />
                     Delete
                   </Button>
                 </>
@@ -309,7 +309,7 @@ function ShowcaseDetailPage() {
                     className="w-full h-full object-cover"
                   />
                 ) : (
-                  <Sparkle className="w-8 h-8 text-gray-400" />
+                  <SparkleIcon className="w-8 h-8 text-gray-400" />
                 )}
               </div>
             ) : showcase.logoUrl ? (
@@ -320,7 +320,7 @@ function ShowcaseDetailPage() {
               />
             ) : (
               <div className="w-16 h-16 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                <Sparkle className="w-8 h-8 text-gray-400" />
+                <SparkleIcon className="w-8 h-8 text-gray-400" />
               </div>
             )}
             <div className="flex-1">
@@ -537,7 +537,7 @@ function ShowcaseDetailPage() {
                       className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 flex items-center gap-1"
                     >
                       {showcase.url}
-                      <ArrowSquareOut className="w-3 h-3" />
+                      <ArrowSquareOutIcon className="w-3 h-3" />
                     </a>
                   </dd>
                 </div>
@@ -553,7 +553,7 @@ function ShowcaseDetailPage() {
                 )}
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                    <Calendar className="w-4 h-4" />
+                    <CalendarIcon className="w-4 h-4" />
                     Submitted
                   </dt>
                   <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -573,9 +573,9 @@ function ShowcaseDetailPage() {
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
                     {showcase.voteScore >= 0 ? (
-                      <ThumbsUp className="w-4 h-4" />
+                      <ThumbsUpIcon className="w-4 h-4" />
                     ) : (
-                      <ThumbsDown className="w-4 h-4" />
+                      <ThumbsDownIcon className="w-4 h-4" />
                     )}
                     Community Votes
                   </dt>
@@ -588,7 +588,7 @@ function ShowcaseDetailPage() {
                         className="p-1.5 rounded-lg hover:bg-emerald-100 dark:hover:bg-emerald-900/30 text-gray-500 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                         title="Upvote"
                       >
-                        <ThumbsUp className="w-4 h-4" />
+                        <ThumbsUpIcon className="w-4 h-4" />
                       </button>
                       <span
                         className={`inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium ${
@@ -609,7 +609,7 @@ function ShowcaseDetailPage() {
                         className="p-1.5 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
                         title="Downvote"
                       >
-                        <ThumbsDown className="w-4 h-4" />
+                        <ThumbsDownIcon className="w-4 h-4" />
                       </button>
                     </div>
                     {showcase.voteScore < 0 && (
@@ -642,7 +642,7 @@ function ShowcaseDetailPage() {
                   />
                 ) : (
                   <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                    <User className="w-5 h-5 text-gray-400" />
+                    <UserIcon className="w-5 h-5 text-gray-400" />
                   </div>
                 )}
                 <div>
@@ -844,7 +844,7 @@ function ShowcaseDetailPage() {
         {!isEditing && showcase.status === 'pending' && (
           <Card className="p-6 mt-6">
             <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-              <Clock className="w-5 h-5" />
+              <ClockIcon className="w-5 h-5" />
               Pending Review
             </h2>
             <div className="flex gap-4">
@@ -853,7 +853,7 @@ function ShowcaseDetailPage() {
                 disabled={moderateMutation.isPending}
                 className="bg-green-600 hover:bg-green-700 text-white border-green-600"
               >
-                <Check className="w-4 h-4" />
+                <CheckIcon className="w-4 h-4" />
                 Approve
               </Button>
               <Button
@@ -866,7 +866,7 @@ function ShowcaseDetailPage() {
                 disabled={moderateMutation.isPending}
                 className="hover:text-red-600 hover:border-red-300 dark:hover:border-red-700"
               >
-                <X className="w-4 h-4" />
+                <XIcon className="w-4 h-4" />
                 Deny
               </Button>
             </div>
diff --git a/src/routes/admin/users.$userId.tsx b/src/routes/admin/users.$userId.tsx
index fbe90b6c2..b7023f17b 100644
--- a/src/routes/admin/users.$userId.tsx
+++ b/src/routes/admin/users.$userId.tsx
@@ -4,12 +4,12 @@ import { getUser } from '~/utils/users.functions'
 import { getUserRoles } from '~/utils/roles.functions'
 import { getUserEffectiveCapabilities } from '~/utils/roles.functions'
 import {
-  ArrowLeft,
-  User,
-  Shield,
-  Calendar,
-  Envelope,
-  At,
+  ArrowLeftIcon,
+  UserIcon,
+  ShieldIcon,
+  CalendarIcon,
+  EnvelopeIcon,
+  AtIcon,
 } from '@phosphor-icons/react'
 import { requireCapability } from '~/utils/auth.functions'
 import { Card } from '~/components/Card'
@@ -65,7 +65,7 @@ function UserDetailPage() {
       <div className="w-full p-4">
         <div className="max-w-4xl mx-auto">
           <div className="text-center py-12">
-            <User className="mx-auto h-12 w-12 text-gray-400" />
+            <UserIcon className="mx-auto h-12 w-12 text-gray-400" />
             <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               User not found
             </h3>
@@ -76,7 +76,7 @@ function UserDetailPage() {
               to="/admin/users"
               className="mt-4 inline-flex items-center gap-2 text-blue-600 hover:text-blue-700"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeftIcon className="w-4 h-4" />
               Back to Users
             </Link>
           </div>
@@ -98,7 +98,7 @@ function UserDetailPage() {
             to="/admin/users"
             className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-4"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeftIcon className="w-4 h-4" />
             Back to Users
           </Link>
 
@@ -112,7 +112,7 @@ function UserDetailPage() {
                 />
               ) : (
                 <div className="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                  <User className="w-8 h-8 text-gray-500 dark:text-gray-400" />
+                  <UserIcon className="w-8 h-8 text-gray-500 dark:text-gray-400" />
                 </div>
               )}
             </div>
@@ -136,7 +136,7 @@ function UserDetailPage() {
             <dl className="space-y-4">
               <div>
                 <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <Envelope className="w-4 h-4" />
+                  <EnvelopeIcon className="w-4 h-4" />
                   Email
                 </dt>
                 <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -146,7 +146,7 @@ function UserDetailPage() {
               {user.name && (
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                    <User className="w-4 h-4" />
+                    <UserIcon className="w-4 h-4" />
                     Name
                   </dt>
                   <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -157,7 +157,7 @@ function UserDetailPage() {
               {user.displayUsername && (
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                    <At className="w-4 h-4" />
+                    <AtIcon className="w-4 h-4" />
                     Display Username
                   </dt>
                   <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -167,7 +167,7 @@ function UserDetailPage() {
               )}
               <div>
                 <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <Calendar className="w-4 h-4" />
+                  <CalendarIcon className="w-4 h-4" />
                   Created
                 </dt>
                 <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -176,7 +176,7 @@ function UserDetailPage() {
               </div>
               <div>
                 <dt className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <Calendar className="w-4 h-4" />
+                  <CalendarIcon className="w-4 h-4" />
                   Last Updated
                 </dt>
                 <dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -189,7 +189,7 @@ function UserDetailPage() {
           {/* Capabilities & Roles */}
           <Card className="p-6">
             <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-              <Shield className="w-5 h-5" />
+              <ShieldIcon className="w-5 h-5" />
               Permissions
             </h2>
 
diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx
index 0463f1aab..970386855 100644
--- a/src/routes/admin/users.tsx
+++ b/src/routes/admin/users.tsx
@@ -39,7 +39,12 @@ import {
   getBulkEffectiveCapabilitiesQueryOptions,
 } from '~/queries/roles'
 import { getUserRoles } from '~/utils/roles.functions'
-import { FloppyDisk, PencilSimpleLine, X, Users } from '@phosphor-icons/react'
+import {
+  FloppyDiskIcon,
+  PencilSimpleLineIcon,
+  XIcon,
+  UsersIcon,
+} from '@phosphor-icons/react'
 import {
   AdminAccessDenied,
   AdminLoading,
@@ -701,13 +706,13 @@ function UsersPage() {
                 onClick={handleSaveUser}
                 className="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
               >
-                <FloppyDisk className="w-4 h-4" />
+                <FloppyDiskIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={handleCancelEdit}
                 className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
               >
-                <X className="w-4 h-4" />
+                <XIcon className="w-4 h-4" />
               </button>
             </div>
           ) : (
@@ -715,7 +720,7 @@ function UsersPage() {
               onClick={() => handleEditUser(user)}
               className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
             >
-              <PencilSimpleLine className="w-4 h-4" />
+              <PencilSimpleLineIcon className="w-4 h-4" />
             </button>
           )
         },
@@ -786,7 +791,7 @@ function UsersPage() {
     <div className="w-full p-4">
       <div className="flex flex-col gap-4">
         <AdminPageHeader
-          icon={<Users />}
+          icon={<UsersIcon />}
           title="Manage Users"
           isLoading={usersQuery.isFetching}
         />
@@ -935,7 +940,7 @@ function UsersPage() {
 
           {(!usersQuery.data || usersQuery.data?.page.length === 0) && (
             <AdminEmptyState
-              icon={<Users className="w-12 h-12" />}
+              icon={<UsersIcon className="w-12 h-12" />}
               title="No users found"
               description="There are currently no users in the system."
             />
diff --git a/src/routes/ads.tsx b/src/routes/ads.tsx
index ae5a4fc61..d4cb0b8f3 100644
--- a/src/routes/ads.tsx
+++ b/src/routes/ads.tsx
@@ -8,7 +8,7 @@ import { useToast } from '~/components/ToastProvider'
 import { useEffect, useState } from 'react'
 import { setInterestedInHidingAds } from '~/utils/users.functions'
 import { GithubIcon } from '~/components/icons/GithubIcon'
-import { CheckCircle } from '@phosphor-icons/react'
+import { CheckCircleIcon } from '@phosphor-icons/react'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
 
 export const Route = createFileRoute('/ads')({
@@ -258,7 +258,7 @@ function OptInButton() {
     return (
       <div className="bg-white dark:bg-black/30 rounded-lg shadow-lg p-8 w-[100vw] max-w-sm mx-auto text-center">
         <div className="flex items-center justify-center mb-4">
-          <CheckCircle className="text-green-500 text-4xl" />
+          <CheckCircleIcon className="text-green-500 text-4xl" />
         </div>
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
           You're on the waitlist!
diff --git a/src/routes/blog.index.tsx b/src/routes/blog.index.tsx
index 5d7b09674..2232399ec 100644
--- a/src/routes/blog.index.tsx
+++ b/src/routes/blog.index.tsx
@@ -9,7 +9,7 @@ import { Footer } from '~/components/Footer'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
-import { Rss as RssIcon } from '@phosphor-icons/react'
+import { RssIcon } from '@phosphor-icons/react'
 import { libraries, type LibrarySlim } from '~/libraries'
 import { LibrariesWidget } from '~/components/LibrariesWidget'
 import { Card } from '~/components/Card'
diff --git a/src/routes/brand-guide.tsx b/src/routes/brand-guide.tsx
index 89135618f..2d4035bbb 100644
--- a/src/routes/brand-guide.tsx
+++ b/src/routes/brand-guide.tsx
@@ -1,4 +1,4 @@
-import { CaretDown, DownloadSimple } from '@phosphor-icons/react'
+import { CaretDownIcon, DownloadSimpleIcon } from '@phosphor-icons/react'
 import { createFileRoute } from '@tanstack/react-router'
 import { CurrentBrandAssets } from '~/components/ds/BrandAssets'
 import { DsPage } from '~/components/ds/DsKit'
@@ -64,7 +64,7 @@ function PreviousAssetCard({ asset }: { asset: PreviousAsset }) {
           download
           className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border-default px-2.5 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:bg-background-subtle hover:text-text-primary"
         >
-          <DownloadSimple size={14} />
+          <DownloadSimpleIcon size={14} />
           {format}
         </a>
       </div>
@@ -83,7 +83,7 @@ function BrandGuidePage() {
       <details className="group border-t border-border-default pt-8">
         <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-ds-heading-lg font-semibold text-text-primary [&::-webkit-details-marker]:hidden">
           Previous Assets
-          <CaretDown
+          <CaretDownIcon
             aria-hidden
             className="transition-transform group-open:rotate-180"
           />
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index 1f4e83945..ace687478 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/set-state-in-effect -- animation trigger on mount */
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
-import { ArrowRight, Hand } from '@phosphor-icons/react'
+import { ArrowRightIcon, HandIcon } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 
 export const Route = createFileRoute('/dashboard')({
@@ -36,7 +36,7 @@ function Dashboard() {
                   animation: waved ? 'hand-wave 1s ease-in-out 1' : undefined,
                 }}
               >
-                <Hand className="w-24 h-24 text-yellow-500 rounded-full" />
+                <HandIcon className="w-24 h-24 text-yellow-500 rounded-full" />
               </div>
             </div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-1 text-center">
@@ -51,7 +51,7 @@ function Dashboard() {
                 className="inline-block bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/90 dark:hover:bg-white font-semibold py-2 px-6 rounded-md transition-colors text-center"
               >
                 Account Settings
-                <ArrowRight className="inline-block ml-2" />
+                <ArrowRightIcon className="inline-block ml-2" />
               </Link>
             </div>
           </Card>
diff --git a/src/routes/ds.buttons.tsx b/src/routes/ds.buttons.tsx
index 875afc49c..aee6de1a5 100644
--- a/src/routes/ds.buttons.tsx
+++ b/src/routes/ds.buttons.tsx
@@ -1,14 +1,14 @@
 import type * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  CaretDown,
-  Check,
-  Download,
-  Plus,
-  MagnifyingGlass,
-  Gear,
-  Trash,
+  ArrowRightIcon,
+  CaretDownIcon,
+  CheckIcon,
+  DownloadIcon,
+  PlusIcon,
+  MagnifyingGlassIcon,
+  GearIcon,
+  TrashIcon,
 } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import {
@@ -99,18 +99,18 @@ function ButtonsPage() {
 <Button variant="secondary">Secondary</Button>
 <Button variant="ghost">Ghost</Button>
 <Button variant="link">Link</Button>
-<Button variant="subtle-link">Subtle link <ArrowRight /></Button>
-<Button variant="icon" aria-label="Add"><Plus /></Button>`}
+<Button variant="subtle-link">Subtle link <ArrowRightIcon /></Button>
+<Button variant="icon" aria-label="Add"><PlusIcon /></Button>`}
         >
           <Button variant="primary">Primary</Button>
           <Button variant="secondary">Secondary</Button>
           <Button variant="ghost">Ghost</Button>
           <Button variant="link">Link</Button>
           <Button variant="subtle-link" color="gray">
-            Subtle link <ArrowRight />
+            Subtle link <ArrowRightIcon />
           </Button>
           <Button variant="icon" aria-label="Add">
-            <Plus className="h-4 w-4" />
+            <PlusIcon className="h-4 w-4" />
           </Button>
         </ButtonPreview>
       </DsSection>
@@ -125,7 +125,7 @@ function ButtonsPage() {
 <Button variant="gradient" color="blue">Get started</Button>
 <Button variant="gradient" color="orange">Get started</Button>
 <Button variant="gradient" color="purple">Get started</Button>
-<Button variant="gradient">Copy prompt <ArrowRight /></Button>`}
+<Button variant="gradient">Copy prompt <ArrowRightIcon /></Button>`}
         >
           <Button variant="gradient" color="green">
             Get started
@@ -143,7 +143,7 @@ function ButtonsPage() {
             Get started
           </Button>
           <Button variant="gradient">
-            Copy prompt <ArrowRight className="h-4 w-4" />
+            Copy prompt <ArrowRightIcon className="h-4 w-4" />
           </Button>
         </ButtonPreview>
       </DsSection>
@@ -187,14 +187,14 @@ function ButtonsPage() {
         <ButtonPreview
           code={`<Button variant="link">Documentation</Button>
 <Button variant="link" color="gray">Learn more</Button>
-<Button variant="subtle-link" color="gray">View all posts <ArrowRight /></Button>`}
+<Button variant="subtle-link" color="gray">View all posts <ArrowRightIcon /></Button>`}
         >
           <Button variant="link">Documentation</Button>
           <Button variant="link" color="gray">
             Learn more
           </Button>
           <Button variant="subtle-link" color="gray">
-            View all posts <ArrowRight />
+            View all posts <ArrowRightIcon />
           </Button>
         </ButtonPreview>
       </DsSection>
@@ -204,21 +204,21 @@ function ButtonsPage() {
         description="Icon-only buttons via the icon variant, in both icon sizes (icon-sm, icon-md) and any color."
       >
         <ButtonPreview
-          code={`<Button variant="icon" size="icon-sm" aria-label="Search"><MagnifyingGlass /></Button>
-<Button variant="icon" size="icon-md" aria-label="Settings"><Gear /></Button>
-<Button variant="icon" color="red" aria-label="Delete"><Trash /></Button>`}
+          code={`<Button variant="icon" size="icon-sm" aria-label="Search"><MagnifyingGlassIcon /></Button>
+<Button variant="icon" size="icon-md" aria-label="Settings"><GearIcon /></Button>
+<Button variant="icon" color="red" aria-label="Delete"><TrashIcon /></Button>`}
         >
           <Button variant="icon" size="icon-sm" aria-label="Search">
-            <MagnifyingGlass className="h-4 w-4" />
+            <MagnifyingGlassIcon className="h-4 w-4" />
           </Button>
           <Button variant="icon" size="icon-md" aria-label="Settings">
-            <Gear className="h-5 w-5" />
+            <GearIcon className="h-5 w-5" />
           </Button>
           <Button variant="icon" size="icon-md" color="green" aria-label="Add">
-            <Plus className="h-5 w-5" />
+            <PlusIcon className="h-5 w-5" />
           </Button>
           <Button variant="icon" color="red" aria-label="Delete">
-            <Trash className="h-5 w-5" />
+            <TrashIcon className="h-5 w-5" />
           </Button>
         </ButtonPreview>
       </DsSection>
@@ -242,15 +242,15 @@ function ButtonsPage() {
         description="Buttons accept any children, and forward native props like disabled."
       >
         <ButtonPreview
-          code={`<Button><Download /> Download</Button>
-<Button variant="ghost" color="red"><Trash /> Delete</Button>
+          code={`<Button><DownloadIcon /> Download</Button>
+<Button variant="ghost" color="red"><TrashIcon /> Delete</Button>
 <Button disabled>Disabled</Button>`}
         >
           <Button>
-            <Download className="h-4 w-4" /> Download
+            <DownloadIcon className="h-4 w-4" /> Download
           </Button>
           <Button variant="ghost" color="red">
-            <Trash className="h-4 w-4" /> Delete
+            <TrashIcon className="h-4 w-4" /> Delete
           </Button>
           <Button disabled>Disabled</Button>
         </ButtonPreview>
@@ -287,35 +287,35 @@ function ButtonsPage() {
       >
         <ButtonPreview
           code={`{/* leading */}
-<Button><Plus /> New project</Button>
-<Button variant="secondary"><Gear /> Settings</Button>
-<Button variant="ghost" color="red"><Trash /> Delete</Button>
+<Button><PlusIcon /> New project</Button>
+<Button variant="secondary"><GearIcon /> Settings</Button>
+<Button variant="ghost" color="red"><TrashIcon /> Delete</Button>
 {/* trailing */}
-<Button>Continue <ArrowRight /></Button>
-<Button variant="secondary">Export <Download /></Button>
-<Button variant="ghost">Options <CaretDown /></Button>
-<Button color="green">Save <Check /></Button>`}
+<Button>Continue <ArrowRightIcon /></Button>
+<Button variant="secondary">Export <DownloadIcon /></Button>
+<Button variant="ghost">Options <CaretDownIcon /></Button>
+<Button color="green">Save <CheckIcon /></Button>`}
         >
           <Button>
-            <Plus className="h-4 w-4" /> New project
+            <PlusIcon className="h-4 w-4" /> New project
           </Button>
           <Button variant="secondary">
-            <Gear className="h-4 w-4" /> Settings
+            <GearIcon className="h-4 w-4" /> Settings
           </Button>
           <Button variant="ghost" color="red">
-            <Trash className="h-4 w-4" /> Delete
+            <TrashIcon className="h-4 w-4" /> Delete
           </Button>
           <Button>
-            Continue <ArrowRight className="h-4 w-4" />
+            Continue <ArrowRightIcon className="h-4 w-4" />
           </Button>
           <Button variant="secondary">
-            Export <Download className="h-4 w-4" />
+            Export <DownloadIcon className="h-4 w-4" />
           </Button>
           <Button variant="ghost">
-            Options <CaretDown className="h-4 w-4" />
+            Options <CaretDownIcon className="h-4 w-4" />
           </Button>
           <Button color="green">
-            Save <Check className="h-4 w-4" />
+            Save <CheckIcon className="h-4 w-4" />
           </Button>
         </ButtonPreview>
       </DsSection>
@@ -330,7 +330,7 @@ function ButtonsPage() {
   <Dropdown>
     <DropdownTrigger>
       <Button rounded="none" aria-label="More deploy options" className="border-l border-white/20 px-2">
-        <CaretDown />
+        <CaretDownIcon />
       </Button>
     </DropdownTrigger>
     <DropdownContent align="end">
@@ -351,7 +351,7 @@ function ButtonsPage() {
                   aria-label="More deploy options"
                   className="border-l border-white/20 px-2"
                 >
-                  <CaretDown className="h-4 w-4" />
+                  <CaretDownIcon className="h-4 w-4" />
                 </Button>
               </DropdownTrigger>
               <DropdownContent align="end">
diff --git a/src/routes/ds.collapsible.tsx b/src/routes/ds.collapsible.tsx
index 98f480975..10b6a6e8e 100644
--- a/src/routes/ds.collapsible.tsx
+++ b/src/routes/ds.collapsible.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { CaretDown } from '@phosphor-icons/react'
+import { CaretDownIcon } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import {
   Collapsible,
@@ -32,7 +32,7 @@ function CollapsiblePage() {
     <>
       <CollapsibleTrigger className="flex w-full items-center justify-between px-4 py-3">
         <span>What is TanStack?</span>
-        <CaretDown className={open ? 'rotate-180' : ''} />
+        <CaretDownIcon className={open ? 'rotate-180' : ''} />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <p className="px-4 pb-4">…</p>
@@ -49,7 +49,7 @@ function CollapsiblePage() {
               <>
                 <CollapsibleTrigger className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-text-primary">
                   <span>What is TanStack?</span>
-                  <CaretDown
+                  <CaretDownIcon
                     className={`h-4 w-4 text-icon-muted transition-transform ${
                       open ? 'rotate-180' : ''
                     }`}
diff --git a/src/routes/ds.dropdown.tsx b/src/routes/ds.dropdown.tsx
index 7fa3928ee..a909c37fa 100644
--- a/src/routes/ds.dropdown.tsx
+++ b/src/routes/ds.dropdown.tsx
@@ -1,5 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { CaretDown, SignOut, Gear, User } from '@phosphor-icons/react'
+import {
+  CaretDownIcon,
+  SignOutIcon,
+  GearIcon,
+  UserIcon,
+} from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import {
   Button,
@@ -34,32 +39,32 @@ function DropdownPage() {
         <ComponentPreview
           code={`<Dropdown>
   <DropdownTrigger>
-    <Button variant="secondary">Account <CaretDown /></Button>
+    <Button variant="secondary">Account <CaretDownIcon /></Button>
   </DropdownTrigger>
   <DropdownContent align="start">
-    <DropdownItem><User /> Profile</DropdownItem>
-    <DropdownItem><Gear /> Settings</DropdownItem>
+    <DropdownItem><UserIcon /> Profile</DropdownItem>
+    <DropdownItem><GearIcon /> Settings</DropdownItem>
     <DropdownSeparator />
-    <DropdownItem><SignOut /> Sign out</DropdownItem>
+    <DropdownItem><SignOutIcon /> Sign out</DropdownItem>
   </DropdownContent>
 </Dropdown>`}
         >
           <Dropdown>
             <DropdownTrigger>
               <Button variant="secondary">
-                Account <CaretDown className="h-4 w-4" />
+                Account <CaretDownIcon className="h-4 w-4" />
               </Button>
             </DropdownTrigger>
             <DropdownContent align="start">
               <DropdownItem>
-                <User className="h-4 w-4" /> Profile
+                <UserIcon className="h-4 w-4" /> Profile
               </DropdownItem>
               <DropdownItem>
-                <Gear className="h-4 w-4" /> Settings
+                <GearIcon className="h-4 w-4" /> Settings
               </DropdownItem>
               <DropdownSeparator />
               <DropdownItem>
-                <SignOut className="h-4 w-4" /> Sign out
+                <SignOutIcon className="h-4 w-4" /> Sign out
               </DropdownItem>
             </DropdownContent>
           </Dropdown>
diff --git a/src/routes/ds.eyebrow.tsx b/src/routes/ds.eyebrow.tsx
index 3e674afc3..bb792a8a2 100644
--- a/src/routes/ds.eyebrow.tsx
+++ b/src/routes/ds.eyebrow.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { Sparkle, GitBranch, Database } from '@phosphor-icons/react'
+import { SparkleIcon, GitBranchIcon, DatabaseIcon } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import { Eyebrow } from '~/components/ds/ui'
 import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
@@ -59,7 +59,7 @@ function EyebrowPlayground() {
 
       <div className="mt-6 border-t border-border-subtle pt-6">
         <Eyebrow
-          icon={<Sparkle size={14} />}
+          icon={<SparkleIcon size={14} />}
           library={branded ? library : undefined}
         >
           {branded ? `${library} · section kicker` : 'section kicker'}
@@ -117,11 +117,11 @@ function EyebrowPage() {
         description="An optional leading icon — use Phosphor icons at 14px."
       >
         <ComponentPreview
-          code={`<Eyebrow icon={<Sparkle size={14} />}>Why Query</Eyebrow>
-<Eyebrow icon={<GitBranch size={14} />}>Cache lifecycle</Eyebrow>`}
+          code={`<Eyebrow icon={<SparkleIcon size={14} />}>Why Query</Eyebrow>
+<Eyebrow icon={<GitBranchIcon size={14} />}>Cache lifecycle</Eyebrow>`}
         >
-          <Eyebrow icon={<Sparkle size={14} />}>Why Query</Eyebrow>
-          <Eyebrow icon={<GitBranch size={14} />}>Cache lifecycle</Eyebrow>
+          <Eyebrow icon={<SparkleIcon size={14} />}>Why Query</Eyebrow>
+          <Eyebrow icon={<GitBranchIcon size={14} />}>Cache lifecycle</Eyebrow>
         </ComponentPreview>
       </DsSection>
 
@@ -130,11 +130,11 @@ function EyebrowPage() {
         description="Library pages pass a brand color via className. The label-sm type role stays locked — only the color changes. (Pick a shade that clears text contrast; the lightest library brand tokens are not legible as small text on light surfaces.)"
       >
         <ComponentPreview
-          code={`<Eyebrow icon={<Database size={14} />} className="text-lib-cli">
+          code={`<Eyebrow icon={<DatabaseIcon size={14} />} className="text-lib-cli">
   Server-state manager
 </Eyebrow>`}
         >
-          <Eyebrow icon={<Database size={14} />} className="text-lib-cli">
+          <Eyebrow icon={<DatabaseIcon size={14} />} className="text-lib-cli">
             Server-state manager
           </Eyebrow>
         </ComponentPreview>
diff --git a/src/routes/ds.iconography.lazy.tsx b/src/routes/ds.iconography.lazy.tsx
index a8d0f646e..5f810d914 100644
--- a/src/routes/ds.iconography.lazy.tsx
+++ b/src/routes/ds.iconography.lazy.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { CaretDown, Check, MagnifyingGlass, Star } from '@phosphor-icons/react'
+import {
+  CaretDownIcon,
+  CheckIcon,
+  MagnifyingGlassIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
 import type { IconWeight } from '@phosphor-icons/react'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 import { DsPage, DsSection } from '~/components/ds/DsKit'
@@ -75,8 +80,10 @@ function IconographyPage() {
 
   const shown = filtered.slice(0, visible)
 
+  // The registry keys icons by their bare name, but `NameIcon` is the export
+  // callers actually import — copy and advertise that one.
   const handleCopy = React.useCallback(async (name: string) => {
-    await copyTextToClipboard(`<${name} />`)
+    await copyTextToClipboard(`<${name}Icon />`)
     setCopied(name)
     window.setTimeout(() => setCopied(null), 1200)
   }, [])
@@ -92,18 +99,18 @@ function IconographyPage() {
           <Dropdown>
             <DropdownTrigger>
               <button type="button" className={triggerClass}>
-                <Star weight={weight} size={17} />
+                <StarIcon weight={weight} size={17} />
                 <span className="capitalize">{weight}</span>
-                <CaretDown size={13} className="text-text-muted" />
+                <CaretDownIcon size={13} className="text-text-muted" />
               </button>
             </DropdownTrigger>
             <DropdownContent align="start" className="min-w-44">
               {WEIGHTS.map((w) => (
                 <DropdownItem key={w} onSelect={() => setWeight(w)}>
-                  <Star weight={w} size={18} />
+                  <StarIcon weight={w} size={18} />
                   <span className="flex-1 capitalize">{w}</span>
                   {w === weight ? (
-                    <Check size={14} className="text-text-accent" />
+                    <CheckIcon size={14} className="text-text-accent" />
                   ) : null}
                 </DropdownItem>
               ))}
@@ -116,7 +123,7 @@ function IconographyPage() {
               <button type="button" className={triggerClass}>
                 <SizeGlyph px={size} />
                 <span className="tabular-nums">{size}px</span>
-                <CaretDown size={13} className="text-text-muted" />
+                <CaretDownIcon size={13} className="text-text-muted" />
               </button>
             </DropdownTrigger>
             <DropdownContent align="start" className="min-w-40">
@@ -127,7 +134,7 @@ function IconographyPage() {
                   </span>
                   <span className="flex-1 tabular-nums">{s}px</span>
                   {s === size ? (
-                    <Check size={14} className="text-text-accent" />
+                    <CheckIcon size={14} className="text-text-accent" />
                   ) : null}
                 </DropdownItem>
               ))}
@@ -149,7 +156,7 @@ function IconographyPage() {
               onClick={() => (searchOpen ? closeSearch() : setSearchOpen(true))}
               className="flex h-10 w-10 shrink-0 items-center justify-center text-text-muted transition-colors hover:text-text-primary"
             >
-              <MagnifyingGlass
+              <MagnifyingGlassIcon
                 size={18}
                 weight="bold"
                 className={twMerge(
@@ -182,7 +189,7 @@ function IconographyPage() {
               key={name}
               type="button"
               onClick={() => handleCopy(name)}
-              title={`Copy <${name} />`}
+              title={`Copy <${name}Icon />`}
               className="group flex flex-col items-center gap-2.5 bg-background-default p-5 text-center transition-colors hover:bg-background-subtle"
             >
               <span className="flex h-12 items-center justify-center">
diff --git a/src/routes/ds.index.tsx b/src/routes/ds.index.tsx
index 1acf93a3f..443daf7e5 100644
--- a/src/routes/ds.index.tsx
+++ b/src/routes/ds.index.tsx
@@ -1,21 +1,21 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  SealCheck,
-  CaretDown,
-  CaretUpDown,
-  UserCircle,
-  Drop,
-  Stack,
-  CircleNotch,
-  MapPinLine,
-  CursorClick,
-  Palette,
-  Sparkle,
-  Square,
-  Tag,
-  TextT,
-  Browser,
+  ArrowRightIcon,
+  SealCheckIcon,
+  CaretDownIcon,
+  CaretUpDownIcon,
+  UserCircleIcon,
+  DropIcon,
+  StackIcon,
+  CircleNotchIcon,
+  MapPinLineIcon,
+  CursorClickIcon,
+  PaletteIcon,
+  SparkleIcon,
+  SquareIcon,
+  TagIcon,
+  TextTIcon,
+  BrowserIcon,
 } from '@phosphor-icons/react'
 import type { Icon } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
@@ -24,22 +24,22 @@ import { dsNav } from '~/components/ds/ds-nav'
 
 // A correlating icon per section so users can orient themselves at a glance.
 const SECTION_ICONS: Record<string, Icon> = {
-  '/ds/colors': Drop,
-  '/ds/typography': TextT,
-  '/ds/shadows': Stack,
-  '/ds/effects': Sparkle,
-  '/ds/palette': Palette,
-  '/ds/semantic': Tag,
-  '/ds/buttons': CursorClick,
-  '/ds/badges': SealCheck,
-  '/ds/inputs': TextT,
-  '/ds/dropdown': CaretDown,
-  '/ds/avatar': UserCircle,
-  '/ds/spinner': CircleNotch,
-  '/ds/collapsible': CaretUpDown,
-  '/ds/breadcrumbs': MapPinLine,
-  '/ds/cards': Stack,
-  '/ds/navbar': Browser,
+  '/ds/colors': DropIcon,
+  '/ds/typography': TextTIcon,
+  '/ds/shadows': StackIcon,
+  '/ds/effects': SparkleIcon,
+  '/ds/palette': PaletteIcon,
+  '/ds/semantic': TagIcon,
+  '/ds/buttons': CursorClickIcon,
+  '/ds/badges': SealCheckIcon,
+  '/ds/inputs': TextTIcon,
+  '/ds/dropdown': CaretDownIcon,
+  '/ds/avatar': UserCircleIcon,
+  '/ds/spinner': CircleNotchIcon,
+  '/ds/collapsible': CaretUpDownIcon,
+  '/ds/breadcrumbs': MapPinLineIcon,
+  '/ds/cards': StackIcon,
+  '/ds/navbar': BrowserIcon,
 }
 
 export const Route = createFileRoute('/ds/')({
@@ -71,7 +71,7 @@ function DesignSystemOverview() {
                 .map((item) => ({ ...item, section: section.title })),
             )
             .map((item) => {
-              const Icon = SECTION_ICONS[item.to] ?? Square
+              const Icon = SECTION_ICONS[item.to] ?? SquareIcon
               return (
                 <Link
                   key={item.to}
@@ -89,7 +89,7 @@ function DesignSystemOverview() {
                       {item.label}
                     </div>
                   </div>
-                  <ArrowRight className="h-4 w-4 shrink-0 text-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
+                  <ArrowRightIcon className="h-4 w-4 shrink-0 text-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-text-secondary" />
                 </Link>
               )
             })}
diff --git a/src/routes/ds.navbar.tsx b/src/routes/ds.navbar.tsx
index f2125920a..84c997f91 100644
--- a/src/routes/ds.navbar.tsx
+++ b/src/routes/ds.navbar.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import {
-  Moon,
-  ShoppingCart,
-  MagnifyingGlass,
-  List,
-  Sparkle,
-  Lifebuoy,
-  Users,
-  Path,
+  MoonIcon,
+  ShoppingCartIcon,
+  MagnifyingGlassIcon,
+  ListIcon,
+  SparkleIcon,
+  LifebuoyIcon,
+  UsersIcon,
+  PathIcon,
 } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import { DsPage, DsSection } from '~/components/ds/DsKit'
@@ -114,11 +114,11 @@ function NavbarAnatomy() {
         <GithubIcon className="hidden h-4 w-4 @min-[1120px]:block" />
         <DiscordIcon className="hidden h-4 w-4 @min-[1120px]:block" />
         <span className="hidden h-4 w-px bg-gray-500/20 @min-[1120px]:block" />
-        <Moon className="h-[18px] w-[18px]" />
-        <ShoppingCart className="h-[18px] w-[18px]" />
-        <MagnifyingGlass className="h-[18px] w-[18px]" />
+        <MoonIcon className="h-[18px] w-[18px]" />
+        <ShoppingCartIcon className="h-[18px] w-[18px]" />
+        <MagnifyingGlassIcon className="h-[18px] w-[18px]" />
         <span className="inline-flex items-center gap-1 rounded-md border border-gray-500/25 px-1.5 py-1 text-[11px] font-semibold text-gray-700 dark:text-gray-200">
-          <Sparkle className="h-3 w-3" weight="fill" />
+          <SparkleIcon className="h-3 w-3" weight="fill" />
           AI
         </span>
         {/* Log In — desktop only (≥ 900px) */}
@@ -126,7 +126,7 @@ function NavbarAnatomy() {
           Log In
         </span>
         {/* Hamburger — mobile only (< 900px) */}
-        <List className="h-5 w-5 @min-[900px]:hidden" />
+        <ListIcon className="h-5 w-5 @min-[900px]:hidden" />
       </div>
     </div>
   )
@@ -287,19 +287,19 @@ function NavbarPage() {
         <div className="flex justify-center rounded-xl border border-border-default bg-background-subtle p-6 sm:p-8">
           <div className="flex w-max flex-col gap-2 rounded-xl border border-border-default bg-background-surface p-2 shadow-sm">
             <MegaMenuItem
-              icon={Lifebuoy}
+              icon={LifebuoyIcon}
               title="Support Overview"
               description="Find the right support path."
               to="/ds/navbar"
             />
             <MegaMenuItem
-              icon={Users}
+              icon={UsersIcon}
               title="Enterprise Support"
               description="Private consulting and expert support."
               to="/ds/navbar"
             />
             <MegaMenuItem
-              icon={Path}
+              icon={PathIcon}
               title="Migration guides"
               description="Move from other libraries with confidence."
               to="/ds/navbar"
diff --git a/src/routes/ds.stats.tsx b/src/routes/ds.stats.tsx
index 72136eb83..88d03025f 100644
--- a/src/routes/ds.stats.tsx
+++ b/src/routes/ds.stats.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { Download, Star, TrendUp } from '@phosphor-icons/react'
+import { DownloadIcon, StarIcon, TrendUpIcon } from '@phosphor-icons/react'
 import { seo } from '~/utils/seo'
 import { StatsSection, type StatItem } from '~/components/ds/ui'
 import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
@@ -20,21 +20,21 @@ export const Route = createFileRoute('/ds/stats')({
 const stats: Array<StatItem> = [
   {
     key: 'total',
-    icon: <TrendUp weight="regular" />,
+    icon: <TrendUpIcon weight="regular" />,
     value: '2.2B',
     placeholder: '0.0B',
     label: 'Total Downloads',
   },
   {
     key: 'weekly',
-    icon: <Download weight="regular" />,
+    icon: <DownloadIcon weight="regular" />,
     value: '65,395,147',
     placeholder: '00,000,000',
     label: 'Weekly Downloads',
   },
   {
     key: 'stars',
-    icon: <Star weight="regular" />,
+    icon: <StarIcon weight="regular" />,
     value: '49,973',
     placeholder: '000,000',
     label: 'GitHub Stars',
diff --git a/src/routes/ethos.tsx b/src/routes/ethos.tsx
index e944900f7..a9a6591be 100644
--- a/src/routes/ethos.tsx
+++ b/src/routes/ethos.tsx
@@ -3,11 +3,11 @@ import { Footer } from '~/components/Footer'
 import { Card } from '~/components/Card'
 import { seo } from '~/utils/seo'
 import {
-  Shield,
-  Plant,
-  Stack,
-  Handshake,
-  FileText,
+  ShieldIcon,
+  PlantIcon,
+  StackIcon,
+  HandshakeIcon,
+  FileTextIcon,
 } from '@phosphor-icons/react'
 
 export const Route = createFileRoute('/ethos')({
@@ -24,7 +24,7 @@ export const Route = createFileRoute('/ethos')({
 const sections = [
   {
     title: 'Independently Owned, Unbiased by Design',
-    icon: Shield,
+    icon: ShieldIcon,
     gradient: 'from-amber-500 to-orange-500',
     borderColor: 'hover:border-amber-500/50',
     content: (
@@ -41,7 +41,7 @@ const sections = [
   },
   {
     title: 'A Sustainable Future',
-    icon: Plant,
+    icon: PlantIcon,
     gradient: 'from-lime-500 to-green-500',
     borderColor: 'hover:border-lime-500/50',
     content: (
@@ -73,7 +73,7 @@ const sections = [
   },
   {
     title: 'Technology-Agnostic by Default',
-    icon: Stack,
+    icon: StackIcon,
     gradient: 'from-sky-500 to-indigo-500',
     borderColor: 'hover:border-sky-500/50',
     content: (
@@ -93,7 +93,7 @@ const sections = [
   },
   {
     title: 'Open Partners',
-    icon: Handshake,
+    icon: HandshakeIcon,
     gradient: 'from-rose-500 to-pink-500',
     borderColor: 'hover:border-rose-500/50',
     content: (
@@ -200,7 +200,7 @@ function RouteComp() {
         >
           <div className="flex items-start gap-4">
             <div className="shrink-0 w-12 h-12 rounded-lg bg-linear-to-br from-violet-500 to-purple-500 flex items-center justify-center">
-              <FileText className="w-6 h-6 text-white" />
+              <FileTextIcon className="w-6 h-6 text-white" />
             </div>
             <div>
               <h2 className="text-xl font-semibold mb-2">
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 0a743eaad..b87a31080 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -4,13 +4,13 @@ import { Link, createFileRoute } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 
 import {
-  ArrowRight,
-  Code,
-  Stack,
-  Shield,
-  Lightning,
-  Pause,
-  Play,
+  ArrowRightIcon,
+  CodeIcon,
+  StackIcon,
+  ShieldIcon,
+  LightningIcon,
+  PauseIcon,
+  PlayIcon,
   type Icon,
 } from '@phosphor-icons/react'
 import { HomeApplicationStarter } from '~/components/home/HomeApplicationStarter'
@@ -112,7 +112,7 @@ function Index() {
                     size="md"
                     className="text-ds-neutral-500 hover:text-ds-neutral-500/70"
                   >
-                    Start with a prompt <ArrowRight className="h-4 w-4" />
+                    Start with a prompt <ArrowRightIcon className="h-4 w-4" />
                   </Button>
                 </div>
               </div>
@@ -215,9 +215,9 @@ function HeroPalmMedia() {
         className="absolute right-4 top-4 z-20 grid size-8 place-items-center rounded-full bg-ds-neutral-500/65 text-white opacity-0 backdrop-blur-sm transition-opacity hover:bg-ds-neutral-500/80 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white group-hover:opacity-100 motion-reduce:hidden"
       >
         {isPlaying ? (
-          <Pause className="size-4" weight="fill" />
+          <PauseIcon className="size-4" weight="fill" />
         ) : (
-          <Play className="size-4" weight="fill" />
+          <PlayIcon className="size-4" weight="fill" />
         )}
       </button>
     </>
@@ -265,7 +265,7 @@ const whyTanStackPrinciples = [
     label: 'Portable core',
     title: 'Framework Agnostic',
     body: 'Our library cores are provider-agnostic and logic-driven, meaning you can use the same logic in React, Vue, Svelte, Solid, and more.',
-    Icon: Stack,
+    Icon: StackIcon,
     accentClassName: 'from-blue-500 to-cyan-500',
     eyebrowClassName: 'text-ds-terracotta-400',
     iconClassName:
@@ -276,7 +276,7 @@ const whyTanStackPrinciples = [
     label: 'Compile-time contracts',
     title: 'Type-Safe by Design',
     body: 'Built with TypeScript from the ground up, providing incredible autocomplete and safety across your entire data-fetching and state management stack.',
-    Icon: Code,
+    Icon: CodeIcon,
     accentClassName: 'from-emerald-500 to-teal-500',
     eyebrowClassName: 'text-ds-green-400',
     iconClassName:
@@ -287,7 +287,7 @@ const whyTanStackPrinciples = [
     label: 'Real workloads',
     title: 'Production-Grade',
     body: "Battle-tested in the world's largest apps. We build for scale, handling complex concurrency, caching, and state synchronization with ease.",
-    Icon: Lightning,
+    Icon: LightningIcon,
     accentClassName: 'from-orange-500 to-red-500',
     eyebrowClassName: 'text-ds-blue-400',
     iconClassName:
@@ -298,7 +298,7 @@ const whyTanStackPrinciples = [
     label: 'Independent tools',
     title: 'No Vendor Lock-in',
     body: "Open source and independent. We aren't beholden to any single cloud provider or framework team, ensuring the best tools for the community.",
-    Icon: Shield,
+    Icon: ShieldIcon,
     accentClassName: 'from-purple-500 to-pink-500',
     eyebrowClassName: 'text-ds-purple-400',
     iconClassName:
@@ -534,7 +534,7 @@ function WhyTanStackSection() {
             className="group inline-flex items-center gap-1.5 rounded-md py-1 font-mono text-xs font-semibold uppercase tracking-[1px] text-gray-400 transition-colors hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus dark:text-gray-500 dark:hover:text-gray-100"
           >
             Read our product tenets
-            <ArrowRight className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none" />
+            <ArrowRightIcon className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none" />
           </Link>
         </div>
       </div>
diff --git a/src/routes/intent/registry/$packageName.tsx b/src/routes/intent/registry/$packageName.tsx
index 3dbc3dfff..8aa1c2133 100644
--- a/src/routes/intent/registry/$packageName.tsx
+++ b/src/routes/intent/registry/$packageName.tsx
@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-router'
 import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
 import * as v from 'valibot'
-import { Copy, Check } from '@phosphor-icons/react'
+import { CopyIcon, CheckIcon } from '@phosphor-icons/react'
 import { Collapsible, CollapsibleContent } from '~/components/Collapsible'
 import { seo } from '~/utils/seo'
 import {
@@ -360,11 +360,11 @@ This will detect all Agent Skills in ${name} and configure them for your coding
       className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-900 hover:border-sky-300 dark:hover:border-sky-700 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
     >
       {copied.active ? (
-        <Check className="w-3.5 h-3.5 text-green-500" />
+        <CheckIcon className="w-3.5 h-3.5 text-green-500" />
       ) : (
-        <Copy className="w-3.5 h-3.5" />
+        <CopyIcon className="w-3.5 h-3.5" />
       )}
-      Copy install prompt
+      CopyIcon install prompt
     </button>
   )
 }
diff --git a/src/routes/learn.tsx b/src/routes/learn.tsx
index 1995f8eea..f324a4264 100644
--- a/src/routes/learn.tsx
+++ b/src/routes/learn.tsx
@@ -1,12 +1,12 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import {
-  Users,
-  Video,
-  MapPin,
-  Star,
-  Play,
-  CheckCircle,
+  UsersIcon,
+  VideoIcon,
+  MapPinIcon,
+  StarIcon,
+  PlayIcon,
+  CheckCircleIcon,
 } from '@phosphor-icons/react'
 import { LogoQueryGG } from '~/ui'
 import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
@@ -54,15 +54,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <Play className="w-4 h-4 mt-0.5 shrink-0" />
+                  <PlayIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Tutorials & walkthroughs</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
+                  <VideoIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Deep dives into library internals</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
+                  <StarIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Release announcements & demos</div>
                 </div>
               </div>
@@ -85,7 +85,7 @@ function LearnPage() {
             </div>
             <div className="p-4 lg:p-8">
               <div className="flex items-center gap-3 mb-4">
-                <Users className="w-8 h-8" />
+                <UsersIcon className="w-8 h-8" />
                 <h2 className="text-xl font-bold">Professional Workshops</h2>
               </div>
               <p className="text-sm mb-4 opacity-90">
@@ -94,15 +94,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
+                  <VideoIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Remote workshops worldwide</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <MapPin className="w-4 h-4 mt-0.5 shrink-0" />
+                  <MapPinIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Premium in-person options</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
+                  <StarIcon className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>From maintainers & creators</div>
                 </div>
               </div>
@@ -140,13 +140,13 @@ function LearnPage() {
               <div className="grid max-w-(--breakpoint-lg) mx-auto text-xs gap-2 text-left">
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <CheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>Save time by learning with a guided approach</div>
                 </div>
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <CheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>
                     Get hands-on experience building a real-world application
@@ -154,7 +154,7 @@ function LearnPage() {
                 </div>
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <CheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>Never worry about data fetching again</div>
                 </div>
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index 1f240d40d..e53cd9e08 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -2,7 +2,13 @@ import { createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
 import { useState } from 'react'
 import * as React from 'react'
-import { X, Funnel, GridFour, GridNine, Rows } from '@phosphor-icons/react'
+import {
+  XIcon,
+  FunnelIcon,
+  GridFourIcon,
+  GridNineIcon,
+  RowsIcon,
+} from '@phosphor-icons/react'
 import { Footer } from '~/components/Footer'
 import {
   MaintainerCard,
@@ -133,19 +139,19 @@ function MaintainersFilter({
             [
               {
                 mode: 'compact',
-                Icon: GridNine,
+                Icon: GridNineIcon,
                 title: 'Compact cards',
                 rounded: 'rounded-l-lg',
               },
               {
                 mode: 'full',
-                Icon: GridFour,
+                Icon: GridFourIcon,
                 title: 'Full cards',
                 rounded: '',
               },
               {
                 mode: 'row',
-                Icon: Rows,
+                Icon: RowsIcon,
                 title: 'Row cards',
                 rounded: 'rounded-r-lg',
               },
@@ -172,7 +178,7 @@ function MaintainersFilter({
             onClick={() => setIsOpen(!isOpen)}
             className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <Funnel className="w-4 h-4" />
+            <FunnelIcon className="w-4 h-4" />
             Filter & Sort
             {hasFilters && (
               <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">
@@ -299,7 +305,7 @@ function MaintainersFilter({
                   onClick={() => toggleLibrary(libraryId)}
                   className="hover:bg-black/10 dark:hover:bg-white/10 rounded p-0.5 transition-colors"
                 >
-                  <X className="w-3 h-3" />
+                  <XIcon className="w-3 h-3" />
                 </button>
               </span>
             )
diff --git a/src/routes/merch.tsx b/src/routes/merch.tsx
index 32d73cd54..65c8f7458 100644
--- a/src/routes/merch.tsx
+++ b/src/routes/merch.tsx
@@ -3,11 +3,11 @@ import * as React from 'react'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
 import {
-  TShirt,
-  ShoppingBag,
-  DeviceMobile,
-  Tag,
-  Circle,
+  TShirtIcon,
+  ShoppingBagIcon,
+  DeviceMobileIcon,
+  TagIcon,
+  CircleIcon,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { BaseballCapIcon } from '~/components/icons/BaseballCapIcon'
@@ -29,10 +29,10 @@ const merchItems = [
     description:
       'T-shirts, sweatshirts, hoodies, onesies, hats, totes, and phone cases featuring TanStack designs',
     icons: [
-      { Icon: TShirt, label: 'T-shirts' },
+      { Icon: TShirtIcon, label: 'T-shirts' },
       { Icon: BaseballCapIcon, label: 'Hats' },
-      { Icon: ShoppingBag, label: 'Totes' },
-      { Icon: DeviceMobile, label: 'Phone cases' },
+      { Icon: ShoppingBagIcon, label: 'Totes' },
+      { Icon: DeviceMobileIcon, label: 'Phone cases' },
     ],
     href: 'https://cottonbureau.com/people/tanstack',
     iconColor: 'text-blue-500',
@@ -44,8 +44,8 @@ const merchItems = [
     description:
       'High-quality vinyl stickers and small buttons for your laptop, water bottle, and more',
     icons: [
-      { Icon: Tag, label: 'Stickers' },
-      { Icon: Circle, label: 'Buttons' },
+      { Icon: TagIcon, label: 'Stickers' },
+      { Icon: CircleIcon, label: 'Buttons' },
     ],
     href: 'https://www.stickermule.com/tanstack',
     iconColor: 'text-purple-500',
diff --git a/src/routes/paid-support.tsx b/src/routes/paid-support.tsx
index 48203684b..d8f0fc681 100644
--- a/src/routes/paid-support.tsx
+++ b/src/routes/paid-support.tsx
@@ -7,7 +7,12 @@ import {
   MaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
-import { GridFour, GridNine, Rows, Envelope } from '@phosphor-icons/react'
+import {
+  GridFourIcon,
+  GridNineIcon,
+  RowsIcon,
+  EnvelopeIcon,
+} from '@phosphor-icons/react'
 import { Button } from '~/ui'
 
 export const Route = createFileRoute('/paid-support')({
@@ -61,19 +66,19 @@ function PaidSupportComp() {
                 [
                   {
                     mode: 'compact',
-                    Icon: GridNine,
+                    Icon: GridNineIcon,
                     title: 'Compact cards',
                     rounded: 'rounded-l-lg',
                   },
                   {
                     mode: 'full',
-                    Icon: GridFour,
+                    Icon: GridFourIcon,
                     title: 'Full cards',
                     rounded: '',
                   },
                   {
                     mode: 'row',
-                    Icon: Rows,
+                    Icon: RowsIcon,
                     title: 'Row cards',
                     rounded: 'rounded-r-lg',
                   },
@@ -154,7 +159,7 @@ function PaidSupportComp() {
               href="mailto:support@tanstack.com?subject=Enterprise%20Support%20Inquiry"
               className="inline-flex items-center gap-3 px-6 py-3 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-medium hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-lg hover:scale-105"
             >
-              <Envelope className="w-5 h-5" />
+              <EnvelopeIcon className="w-5 h-5" />
               Contact Support Team
             </a>
           </div>
diff --git a/src/routes/partners.$partner.tsx b/src/routes/partners.$partner.tsx
index be0d23008..d93779b44 100644
--- a/src/routes/partners.$partner.tsx
+++ b/src/routes/partners.$partner.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Link, createFileRoute, notFound } from '@tanstack/react-router'
 import {
-  ArrowRight,
-  ArrowUpRight,
-  CheckCircle as CheckCircle2,
-  CircleDashed,
+  ArrowRightIcon,
+  ArrowUpRightIcon,
+  CheckCircleIcon as CheckCircle2,
+  CircleDashedIcon,
 } from '@phosphor-icons/react'
 import { Footer } from '~/components/Footer'
 import { Card } from '~/components/Card'
@@ -122,7 +122,7 @@ function PartnerDetailPage() {
                     {isActive ? (
                       <CheckCircle2 className="h-3.5 w-3.5" />
                     ) : (
-                      <CircleDashed className="h-3.5 w-3.5" />
+                      <CircleDashedIcon className="h-3.5 w-3.5" />
                     )}
                     {isActive ? 'Current Partner' : 'Previous Partner'}
                   </span>
@@ -184,7 +184,7 @@ function PartnerDetailPage() {
                     }}
                   >
                     Visit {partner.name}
-                    <ArrowUpRight className="h-4 w-4" />
+                    <ArrowUpRightIcon className="h-4 w-4" />
                   </Button>
                   <Button as={Link} to="/partners" variant="ghost">
                     Browse All Partners
@@ -238,9 +238,9 @@ function PartnerDetailPage() {
                           </span>
                         </span>
                         {isExternal ? (
-                          <ArrowUpRight className="h-4 w-4 shrink-0 text-gray-400 transition-colors group-hover:text-blue-500" />
+                          <ArrowUpRightIcon className="h-4 w-4 shrink-0 text-gray-400 transition-colors group-hover:text-blue-500" />
                         ) : (
-                          <ArrowRight className="h-4 w-4 shrink-0 text-gray-400 transition-colors group-hover:text-blue-500" />
+                          <ArrowRightIcon className="h-4 w-4 shrink-0 text-gray-400 transition-colors group-hover:text-blue-500" />
                         )}
                       </>
                     )
diff --git a/src/routes/partners.railway.tsx b/src/routes/partners.railway.tsx
index 923226fd3..155c3ec3e 100644
--- a/src/routes/partners.railway.tsx
+++ b/src/routes/partners.railway.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import {
-  ArrowUpRight,
-  Check,
-  CurrencyDollar as DollarSign,
-  GitPullRequest,
-  Globe,
-  Infinity as InfinityIcon,
-  ChartLine as LineChart,
-  Network,
-  Plus,
-  Rocket,
-  ShieldCheck,
-  ArrowUUpLeft as Undo2,
+  ArrowUpRightIcon,
+  CheckIcon,
+  CurrencyDollarIcon as DollarSign,
+  GitPullRequestIcon,
+  GlobeIcon,
+  InfinityIcon,
+  ChartLineIcon as LineChart,
+  NetworkIcon,
+  PlusIcon,
+  RocketIcon,
+  ShieldCheckIcon,
+  ArrowUUpLeftIcon as Undo2,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { Footer } from '~/components/Footer'
@@ -76,12 +76,12 @@ type FeatureIcon = React.ComponentType<{ className?: string }>
 
 const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [
   {
-    Icon: Rocket,
+    Icon: RocketIcon,
     title: 'Node service deploys',
     desc: 'TanStack Start builds a Node server for SSR, server functions, and static assets. Railway deploys it as a standard Node service.',
   },
   {
-    Icon: GitPullRequest,
+    Icon: GitPullRequestIcon,
     title: 'Live PR previews',
     desc: 'Enable PR Environments on a GitHub-connected project to spin up isolated previews for eligible pull requests.',
   },
@@ -91,7 +91,7 @@ const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [
     desc: 'Logs and metrics are built in. Pro workspaces can configure Monitors that notify Slack, Discord, or email.',
   },
   {
-    Icon: Network,
+    Icon: NetworkIcon,
     title: 'Up to 100 Gbps private networking',
     desc: 'Services in a project talk over private IPs at up to 100 Gbps. HTTP, TCP, gRPC, and WebSockets handled for you.',
   },
@@ -101,12 +101,12 @@ const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [
     desc: 'Redeploy an earlier version while its image is retained. Retention ranges from 24 hours to 360 hours by plan.',
   },
   {
-    Icon: ShieldCheck,
+    Icon: ShieldCheckIcon,
     title: 'Hard spending limits',
     desc: 'Set a hard limit for workspace compute usage. Railway sends alerts as you approach it and stops workloads at the limit.',
   },
   {
-    Icon: Globe,
+    Icon: GlobeIcon,
     title: 'Global regions',
     desc: 'Run your app close to your users. Pro and above can deploy to multiple regions concurrently.',
   },
@@ -284,7 +284,7 @@ export const Route = createFileRoute('/partners/railway')({
 function CheckBadge() {
   return (
     <span className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
-      <Check className="h-2.5 w-2.5" strokeWidth={3} />
+      <CheckIcon className="h-2.5 w-2.5" strokeWidth={3} />
     </span>
   )
 }
@@ -410,7 +410,7 @@ function RailwayPartnerPage() {
               className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
             >
               Start free on Railway
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRightIcon className="h-4 w-4" />
             </Button>
             <Button as="a" href="#how-it-works" variant="ghost" size="lg">
               See how it works
@@ -511,7 +511,7 @@ function RailwayPartnerPage() {
               className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
             >
               Deploy on Railway
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRightIcon className="h-4 w-4" />
             </Button>
             <Button
               as={Link}
@@ -621,7 +621,7 @@ function RailwayPartnerPage() {
               className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
             >
               Start with $5 in credits
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRightIcon className="h-4 w-4" />
             </Button>
             <Button
               as="a"
@@ -671,7 +671,7 @@ function RailwayPartnerPage() {
               className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
             >
               Move your app to Railway
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRightIcon className="h-4 w-4" />
             </Button>
             <span className="inline-flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
               <DollarSign className="h-3.5 w-3.5" />
@@ -703,7 +703,7 @@ function RailwayPartnerPage() {
                     <span className="text-sm font-medium md:text-[15px]">
                       {q}
                     </span>
-                    <Plus
+                    <PlusIcon
                       className={twMerge(
                         'h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400',
                         isOpen && 'rotate-45',
@@ -748,7 +748,7 @@ function RailwayPartnerPage() {
               className="bg-white text-gray-950 border-white hover:bg-gray-100"
             >
               Deploy your TanStack app
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRightIcon className="h-4 w-4" />
             </Button>
             <Button
               as={Link}
diff --git a/src/routes/shop.cart.tsx b/src/routes/shop.cart.tsx
index b394430bf..915498acd 100644
--- a/src/routes/shop.cart.tsx
+++ b/src/routes/shop.cart.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { ShoppingCart, Trash, X } from '@phosphor-icons/react'
+import { ShoppingCartIcon, TrashIcon, XIcon } from '@phosphor-icons/react'
 import {
   ShopButton,
   ShopCrumbs,
@@ -141,7 +141,7 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
                 aria-label={`Remove discount ${d.code}`}
                 className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
               >
-                <X className="w-3.5 h-3.5" />
+                <XIcon className="w-3.5 h-3.5" />
               </button>
             </li>
           ))}
@@ -190,7 +190,7 @@ function EmptyCart() {
         </h1>
       </header>
       <div className="flex flex-col items-center gap-4 py-16 text-center text-shop-text-2">
-        <ShoppingCart className="w-10 h-10 text-shop-muted" />
+        <ShoppingCartIcon className="w-10 h-10 text-shop-muted" />
         <p>Your cart is empty.</p>
         <Link
           to="/shop"
@@ -281,7 +281,7 @@ function CartLineRow({ line }: { line: CartLineDetail }) {
             aria-label="Remove from cart"
             className="p-2 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            <Trash className="w-4 h-4" />
+            <TrashIcon className="w-4 h-4" />
           </button>
         </div>
       </div>
diff --git a/src/routes/shop.search.tsx b/src/routes/shop.search.tsx
index 2d1e16ce1..80995e8ee 100644
--- a/src/routes/shop.search.tsx
+++ b/src/routes/shop.search.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useMutation } from '@tanstack/react-query'
 import * as v from 'valibot'
-import { MagnifyingGlass as SearchIcon } from '@phosphor-icons/react'
+import { MagnifyingGlassIcon as SearchIcon } from '@phosphor-icons/react'
 import { ProductCard } from '~/components/shop/ProductCard'
 import { ShopHero } from '~/components/shop/ShopHero'
 import { ShopButton, ShopInput, ShopLabel } from '~/components/shop/ui'
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx
index 5065b90c6..472885b0b 100644
--- a/src/routes/stats/npm/index.tsx
+++ b/src/routes/stats/npm/index.tsx
@@ -3,7 +3,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
 import { useThrottledCallback, useThrottler } from '@tanstack/react-pacer'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Question as HelpCircle, X } from '@phosphor-icons/react'
+import { QuestionIcon as HelpCircle, XIcon } from '@phosphor-icons/react'
 import { useQuery } from '@tanstack/react-query'
 import { Card } from '~/components/ds/ui'
 import { Tooltip } from '~/components/Tooltip'
@@ -1088,7 +1088,7 @@ function RouteComponent() {
                     Add packages to {combiningPackage}
                   </DialogPrimitive.Title>
                   <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500">
-                    <X className="w-4 h-4 sm:w-5 sm:h-5" />
+                    <XIcon className="w-4 h-4 sm:w-5 sm:h-5" />
                   </DialogPrimitive.Close>
                 </div>
                 <DialogPrimitive.Description className="sr-only">
diff --git a/src/routes/tenets.tsx b/src/routes/tenets.tsx
index 092f009ee..285bd3f07 100644
--- a/src/routes/tenets.tsx
+++ b/src/routes/tenets.tsx
@@ -3,14 +3,14 @@ import { Footer } from '~/components/Footer'
 import { Card } from '~/components/Card'
 import { seo } from '~/utils/seo'
 import {
-  Globe,
-  SquaresFour,
-  Rocket,
-  Eye,
-  Users,
-  Code,
-  Wrench,
-  Handshake,
+  GlobeIcon,
+  SquaresFourIcon,
+  RocketIcon,
+  EyeIcon,
+  UsersIcon,
+  CodeIcon,
+  WrenchIcon,
+  HandshakeIcon,
 } from '@phosphor-icons/react'
 
 export const Route = createFileRoute('/tenets')({
@@ -28,7 +28,7 @@ const tenets = [
   {
     number: 1,
     title: 'Open, Independent, Technology-Agnostic',
-    icon: Globe,
+    icon: GlobeIcon,
     gradient: 'from-blue-500 to-cyan-500',
     borderColor: 'hover:border-blue-500/50',
     description:
@@ -69,7 +69,7 @@ const tenets = [
   {
     number: 2,
     title: 'Composable, Platform-Aligned Primitives',
-    icon: SquaresFour,
+    icon: SquaresFourIcon,
     gradient: 'from-emerald-500 to-teal-500',
     borderColor: 'hover:border-emerald-500/50',
     description:
@@ -105,7 +105,7 @@ const tenets = [
   {
     number: 3,
     title: 'Pragmatic, Production-Grade Quality',
-    icon: Rocket,
+    icon: RocketIcon,
     gradient: 'from-orange-500 to-red-500',
     borderColor: 'hover:border-orange-500/50',
     description:
@@ -141,7 +141,7 @@ const tenets = [
   {
     number: 4,
     title: 'Predictable, Explicit, Type-Safe Behavior',
-    icon: Eye,
+    icon: EyeIcon,
     gradient: 'from-purple-500 to-pink-500',
     borderColor: 'hover:border-purple-500/50',
     description:
@@ -179,28 +179,28 @@ const tenets = [
 const audiences = [
   {
     title: 'For developers evaluating TanStack',
-    icon: Users,
+    icon: UsersIcon,
     gradient: 'from-blue-500 to-cyan-500',
     description:
       'These tenets define what you can expect from our libraries—quality, portability, and a commitment to your freedom to compose and deploy however you see fit.',
   },
   {
     title: 'For contributors',
-    icon: Code,
+    icon: CodeIcon,
     gradient: 'from-emerald-500 to-teal-500',
     description:
       'When proposing features or changes, consider how they align with these tenets. If your idea conflicts with a tenet, explicitly address why and how the conflict is justified.',
   },
   {
     title: 'For maintainers and reviewers',
-    icon: Wrench,
+    icon: WrenchIcon,
     gradient: 'from-orange-500 to-red-500',
     description:
       'Use these tenets as a checklist when evaluating PRs, feature requests, and architectural decisions. If something threatens a tenet, it needs strong justification or should be rejected.',
   },
   {
     title: 'For partners',
-    icon: Handshake,
+    icon: HandshakeIcon,
     gradient: 'from-purple-500 to-pink-500',
     description:
       'These tenets ensure that our libraries remain neutral and developer-focused. Partner integrations must respect these principles and cannot bias core APIs toward specific platforms or vendors.',
diff --git a/src/routes/workshops.tsx b/src/routes/workshops.tsx
index 85cfeb68c..3efae45ac 100644
--- a/src/routes/workshops.tsx
+++ b/src/routes/workshops.tsx
@@ -2,14 +2,14 @@ import { createFileRoute } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { seo } from '~/utils/seo'
 import {
-  Users,
-  Video,
-  MapPin,
-  Star,
-  Code,
-  Rocket,
-  Gear,
-  CodeSimple,
+  UsersIcon,
+  VideoIcon,
+  MapPinIcon,
+  StarIcon,
+  CodeIcon,
+  RocketIcon,
+  GearIcon,
+  CodeSimpleIcon,
 } from '@phosphor-icons/react'
 import * as React from 'react'
 import { Footer } from '~/components/Footer'
@@ -17,7 +17,7 @@ import { Card } from '~/components/Card'
 import { allMaintainers, Maintainer } from '~/libraries/maintainers'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { shuffleWithSeed } from '~/utils/utils'
-import { CheckCircle, Envelope } from '@phosphor-icons/react'
+import { CheckCircleIcon, EnvelopeIcon } from '@phosphor-icons/react'
 
 // Server function to get the seed based on 10-second intervals
 // This ensures consistency between server and client
@@ -74,7 +74,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <Envelope className="w-6 h-6" />
+              <EnvelopeIcon className="w-6 h-6" />
               Get a Quote
             </a>
           </header>
@@ -83,7 +83,7 @@ function WorkshopsPage() {
           <div className="grid md:grid-cols-2 gap-6">
             <Card className="p-6">
               <div className="flex items-center gap-3 mb-4">
-                <Video className="w-8 h-8 text-blue-500" />
+                <VideoIcon className="w-8 h-8 text-blue-500" />
                 <h2 className="text-2xl font-black">Remote Workshops</h2>
               </div>
               <p className="text-gray-600 dark:text-gray-400 mb-4">
@@ -99,7 +99,7 @@ function WorkshopsPage() {
                   'Access to maintainers and creators',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
@@ -108,7 +108,7 @@ function WorkshopsPage() {
 
             <div className="rounded-lg bg-linear-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
               <div className="flex items-center gap-3 mb-4">
-                <MapPin className="w-8 h-8" />
+                <MapPinIcon className="w-8 h-8" />
                 <h2 className="text-2xl font-black">In-Person Workshops</h2>
               </div>
               <p className="mb-4 opacity-90">
@@ -124,7 +124,7 @@ function WorkshopsPage() {
                   'Extended Q&A and networking sessions',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <Star className="w-5 h-5 shrink-0" />
+                    <StarIcon className="w-5 h-5 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
@@ -146,21 +146,21 @@ function WorkshopsPage() {
               <div className="grid md:grid-cols-3 gap-6">
                 {[
                   {
-                    Icon: Code,
+                    Icon: CodeIcon,
                     iconColor: 'text-blue-500 dark:text-blue-400',
                     title: 'From the Source',
                     description:
                       "Learn directly from the maintainers and creators who built these libraries. Get insights you can't find anywhere else.",
                   },
                   {
-                    Icon: Users,
+                    Icon: UsersIcon,
                     iconColor: 'text-blue-600 dark:text-blue-500',
                     title: 'Expert Instructors',
                     description:
                       'Our workshops are led by experienced maintainers who understand real-world challenges and best practices.',
                   },
                   {
-                    Icon: Rocket,
+                    Icon: RocketIcon,
                     iconColor: 'text-blue-700 dark:text-blue-600',
                     title: 'Practical Focus',
                     description:
@@ -196,14 +196,14 @@ function WorkshopsPage() {
             <div className="grid md:grid-cols-2 gap-6 mt-8">
               {[
                 {
-                  Icon: Gear,
+                  Icon: GearIcon,
                   iconColor: 'text-blue-500 dark:text-blue-400',
                   title: 'Customized to Your Stack',
                   description:
                     "Every workshop is tailored to your team's specific tech stack, challenges, and goals. We work with you beforehand to understand your codebase and create relevant examples that resonate with your developers.",
                 },
                 {
-                  Icon: CodeSimple,
+                  Icon: CodeSimpleIcon,
                   iconColor: 'text-blue-600 dark:text-blue-500',
                   title: 'Hands-On Learning',
                   description:
@@ -234,7 +234,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <Envelope className="w-6 h-6" />
+              <EnvelopeIcon className="w-6 h-6" />
               Get a Quote
             </a>
           </div>
@@ -314,7 +314,7 @@ function WorkshopsPage() {
                 href="mailto:workshops@tanstack.com?subject=Workshop%20Questions"
                 className="inline-flex items-center gap-3 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
               >
-                <Envelope className="w-5 h-5" />
+                <EnvelopeIcon className="w-5 h-5" />
                 Ask Us Anything
               </a>
             </div>
@@ -346,7 +346,7 @@ function WorkshopsPage() {
                     key={topic}
                     className="flex items-center gap-3 rounded-lg bg-white dark:bg-gray-800 px-4 py-3 shadow-sm border border-gray-200 dark:border-gray-700"
                   >
-                    <CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span className="text-gray-600 dark:text-gray-400 font-medium">
                       {topic}
                     </span>
@@ -382,9 +382,9 @@ function WorkshopsPage() {
               </p>
               <div className="flex flex-wrap justify-center gap-4">
                 {[
-                  { Icon: Star, label: 'Q&A Sessions' },
-                  { Icon: Code, label: 'Lightning Consults' },
-                  { Icon: Rocket, label: 'Inspire Your Developers' },
+                  { Icon: StarIcon, label: 'Q&A Sessions' },
+                  { Icon: CodeIcon, label: 'Lightning Consults' },
+                  { Icon: RocketIcon, label: 'Inspire Your Developers' },
                 ].map(({ Icon, label }) => (
                   <div
                     key={label}
@@ -418,7 +418,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-black text-lg hover:from-green-700 hover:to-cyan-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <Envelope className="w-6 h-6" />
+              <EnvelopeIcon className="w-6 h-6" />
               Get Started Today
             </a>
           </div>
@@ -507,7 +507,7 @@ function TestimonialsMarquee() {
               <Card key={i} className="shrink-0 w-80 p-6">
                 <div className="flex items-start gap-2 mb-4">
                   {[...Array(5)].map((_, j) => (
-                    <Star
+                    <StarIcon
                       key={j}
                       className="w-4 h-4 text-yellow-500 fill-yellow-500"
                     />
@@ -561,7 +561,7 @@ function InstructorsSection({ instructors }: { instructors: Maintainer[] }) {
           href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry&body=I'm interested in learning more about your workshop instructors and availability."
           className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
         >
-          <Envelope className="w-5 h-5" />
+          <EnvelopeIcon className="w-5 h-5" />
           Learn More About Our Instructors
         </a>
       </div>