diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 30030b010..9f75f575d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -26,14 +26,14 @@ import { HammerIcon } from '@phosphor-icons/react/Hammer'
 import { HeartIcon } from '@phosphor-icons/react/Heart'
 import { InfinityIcon } from '@phosphor-icons/react/Infinity'
 import { LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
-import { ListIcon as Menu } from '@phosphor-icons/react/List'
+import { ListIcon } from '@phosphor-icons/react/List'
 import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
 import { MailboxIcon } from '@phosphor-icons/react/Mailbox'
 import { ShieldCheckIcon } from '@phosphor-icons/react/ShieldCheck'
 import { ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
 import { SignInIcon } from '@phosphor-icons/react/SignIn'
-import { SparkleIcon as Sparkles } from '@phosphor-icons/react/Sparkle'
-import { TrendUpIcon as TrendingUp } from '@phosphor-icons/react/TrendUp'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { TrendUpIcon } from '@phosphor-icons/react/TrendUp'
 import { UsersIcon } from '@phosphor-icons/react/Users'
 import { XIcon } from '@phosphor-icons/react/X'
 import { ThemeToggle } from './ThemeToggle'
@@ -174,7 +174,7 @@ const NAV_GROUPS = [
             label: 'Release Notes',
             to: '/blog',
             description: 'The latest releases and changelog.',
-            icon: Sparkles,
+            icon: SparkleIcon,
           },
         ],
       },
@@ -214,7 +214,7 @@ const NAV_GROUPS = [
             label: 'Showcase',
             to: '/showcase',
             description: 'Teams building with TanStack.',
-            icon: Sparkles,
+            icon: SparkleIcon,
           },
         ],
       },
@@ -238,7 +238,7 @@ const NAV_GROUPS = [
             label: 'Stats',
             to: '/stats/npm',
             description: 'NPM and ecosystem usage data.',
-            icon: TrendingUp,
+            icon: TrendUpIcon,
           },
         ],
       },
@@ -658,7 +658,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           {mobileMenuOpen ? (
             <XIcon className="h-5 w-5" />
           ) : (
-            <Menu className="h-5 w-5" />
+            <ListIcon className="h-5 w-5" />
           )}
         </button>
       </div>
@@ -922,7 +922,7 @@ function MobileNavigation({
               onClick={() => openUtility('ai')}
               className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-3 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
             >
-              <Sparkles className="size-8 shrink-0" />
+              <SparkleIcon className="size-8 shrink-0" />
               Ask AI
             </button>
             {loadAuthControls ? (
diff --git a/src/components/PartnershipCallout.tsx b/src/components/PartnershipCallout.tsx
index ae826c4f7..66d4261c6 100644
--- a/src/components/PartnershipCallout.tsx
+++ b/src/components/PartnershipCallout.tsx
@@ -1,4 +1,4 @@
-import { HandHeartIcon as HeartHandshake } from '@phosphor-icons/react'
+import { HandHeartIcon } from '@phosphor-icons/react'
 import { Card } from './Card'
 import {
   PARTNER_INQUIRY_HREF,
@@ -13,7 +13,7 @@ export function PartnershipCallout() {
                     w-[500px] max-w-full mx-auto"
     >
       <span className="flex items-center gap-2 p-8 text-3xl text-rose-500 font-black uppercase">
-        TanStack <HeartHandshake /> You?
+        TanStack <HandHeartIcon /> You?
       </span>
       <div className="flex flex-col p-4 gap-3 text-sm">
         <div>
diff --git a/src/components/ds/BrandAssets.tsx b/src/components/ds/BrandAssets.tsx
index 92d2847d8..21bf1ca08 100644
--- a/src/components/ds/BrandAssets.tsx
+++ b/src/components/ds/BrandAssets.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import {
-  CaretDownIcon as CaretDown,
-  CheckIcon as Check,
-  CopyIcon as Copy,
-  DownloadSimpleIcon as DownloadSimple,
+  CaretDownIcon,
+  CheckIcon,
+  CopyIcon,
+  DownloadSimpleIcon,
 } from '@phosphor-icons/react'
 import { DsSection } from '~/components/ds/DsKit'
 import { useToast } from '~/components/ToastProvider'
@@ -121,9 +121,9 @@ function CopyAssetButton({
       onClick={copyAsset}
     >
       {copied.active ? (
-        <Check size={18} aria-hidden="true" />
+        <CheckIcon size={18} aria-hidden="true" />
       ) : (
-        <Copy size={18} aria-hidden="true" />
+        <CopyIcon size={18} aria-hidden="true" />
       )}
     </Button>
   )
@@ -237,7 +237,7 @@ function BrandLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{logo.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -248,7 +248,7 @@ function BrandLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === logo.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -264,7 +264,7 @@ function BrandLogoPicker() {
                 style={{ background: color.swatch }}
               />
               <span>{color.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -280,7 +280,7 @@ function BrandLogoPicker() {
                 />
                 <span className="flex-1">{option.label}</span>
                 {option.value === color.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -291,7 +291,7 @@ function BrandLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{format.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-36">
@@ -302,7 +302,7 @@ function BrandLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === format.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -326,7 +326,7 @@ function BrandLogoPicker() {
             aria-label={`Download ${logo.label} ${color.label} as ${format.label}`}
             title={`Download ${format.label}`}
           >
-            <DownloadSimple size={18} aria-hidden="true" />
+            <DownloadSimpleIcon size={18} aria-hidden="true" />
           </Button>
         </div>
       </div>
@@ -419,7 +419,7 @@ function SocialLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{orientation.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -430,7 +430,7 @@ function SocialLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === orientation.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -446,7 +446,7 @@ function SocialLogoPicker() {
                 style={{ background: color.swatch }}
               />
               <span>{color.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -462,7 +462,7 @@ function SocialLogoPicker() {
                 />
                 <span className="flex-1">{option.label}</span>
                 {option.value === color.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -473,7 +473,7 @@ function SocialLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{format.label}</span>
-              <CaretDown size={13} className="text-text-muted" />
+              <CaretDownIcon size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-36">
@@ -484,7 +484,7 @@ function SocialLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === format.value ? (
-                  <Check size={14} className="text-text-accent" />
+                  <CheckIcon size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -508,7 +508,7 @@ function SocialLogoPicker() {
             aria-label={`Download ${orientation.label} ${color.label} as ${format.label}`}
             title={`Download ${format.label}`}
           >
-            <DownloadSimple size={18} aria-hidden="true" />
+            <DownloadSimpleIcon size={18} aria-hidden="true" />
           </Button>
         </div>
       </div>
@@ -584,7 +584,7 @@ function AssetCard({ asset }: { asset: GalleryAsset }) {
                 title={`Download ${download.format}`}
                 className="text-white hover:bg-transparent hover:text-white/70 max-[899px]:bg-transparent"
               >
-                <DownloadSimple size={14} aria-hidden="true" />
+                <DownloadSimpleIcon size={14} aria-hidden="true" />
               </Button>
             </React.Fragment>
           ))}
diff --git a/src/components/landing/HighlightLanding.tsx b/src/components/landing/HighlightLanding.tsx
index a07249db9..aa8e072ef 100644
--- a/src/components/landing/HighlightLanding.tsx
+++ b/src/components/landing/HighlightLanding.tsx
@@ -2,14 +2,14 @@ import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import {
   ArrowRightIcon,
-  CubeIcon as Boxes,
-  BracketsCurlyIcon as Braces,
+  CubeIcon,
+  BracketsCurlyIcon,
   CheckIcon,
-  GaugeIcon as CircleGauge,
-  StackIcon as Layers3,
+  GaugeIcon,
+  StackIcon,
   PaletteIcon,
-  ScanIcon as ScanText,
-  LightningIcon as Zap,
+  ScanIcon,
+  LightningIcon,
 } from '@phosphor-icons/react'
 
 import { LibraryWordmark } from '~/components/LibraryWordmark'
@@ -84,7 +84,7 @@ export default function HighlightLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.7fr_1.3fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Selective assembly"
-            icon={<Boxes aria-hidden="true" size={15} />}
+            icon={<CubeIcon aria-hidden="true" size={15} />}
             title="The registry is the bundle plan."
             body="The core knows no languages. Direct imports make the site’s language set explicit and let the bundler discard everything else."
           />
@@ -105,7 +105,7 @@ export default function HighlightLanding() {
         <div className="mt-12 grid items-center gap-12 border-t border-border-subtle pt-12 lg:grid-cols-[0.7fr_1.3fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Context-aware scanners"
-            icon={<Layers3 aria-hidden="true" size={15} />}
+            icon={<StackIcon aria-hidden="true" size={15} />}
             title="Web languages rarely stay in their lane."
             body="HTML, Vue, Svelte, EJS, Markdown, and JavaScript templates delegate embedded regions only when the nested language is registered."
           />
@@ -132,7 +132,7 @@ export default function HighlightLanding() {
           <AnnotationPanel />
           <LandingSectionIntro
             eyebrow="Presentation metadata"
-            icon={<ScanText aria-hidden="true" size={15} />}
+            icon={<ScanIcon aria-hidden="true" size={15} />}
             title="Annotate the lesson, not the token stream."
             body="Highlight lines, exact character ranges, insertions, deletions, focus, errors, and warnings without changing the source or tokenizer."
           />
@@ -140,7 +140,7 @@ export default function HighlightLanding() {
         <div className="mt-12 grid items-center gap-12 border-t border-border-subtle pt-12 lg:grid-cols-[0.7fr_1.3fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Corpus, not toys"
-            icon={<CircleGauge aria-hidden="true" size={15} />}
+            icon={<GaugeIcon aria-hidden="true" size={15} />}
             title="Tuned against the docs it will render."
             body="The committed corpus samples 333 fixtures from 2,940 TanStack documentation files. Release checks cover fidelity, deterministic HTML, bundle profiles, and runtime throughput."
           />
@@ -152,7 +152,7 @@ export default function HighlightLanding() {
         <div className="grid items-start gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Choose by job"
-            icon={<Zap aria-hidden="true" size={15} />}
+            icon={<LightningIcon aria-hidden="true" size={15} />}
             title="A docs highlighter is not an editor highlighter."
             body="Highlight is optimized for known web languages and compact page output, not TextMate completeness, automatic detection, or incremental editor state."
           />
@@ -174,7 +174,7 @@ export default function HighlightLanding() {
         <div className="mt-12 grid items-center gap-12 border-t border-border-subtle pt-12 lg:grid-cols-[1.08fr_0.92fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Explicit integrations"
-            icon={<Braces aria-hidden="true" size={15} />}
+            icon={<BracketsCurlyIcon aria-hidden="true" size={15} />}
             title="Drop it into Markdown without hiding the language set."
             body="Every renderer and adapter receives the highlighter you assembled; none imports every language behind your back."
           />
diff --git a/src/components/landing/MarkdownLanding.tsx b/src/components/landing/MarkdownLanding.tsx
index 9277cc963..9b8cd0f6f 100644
--- a/src/components/landing/MarkdownLanding.tsx
+++ b/src/components/landing/MarkdownLanding.tsx
@@ -6,16 +6,16 @@ import { Markdown } from '@tanstack/markdown/react'
 import { streamingMarkdownExtension } from '@tanstack/markdown/extensions/streaming'
 import {
   ArrowRightIcon,
-  BracketsCurlyIcon as Braces,
+  BracketsCurlyIcon,
   CheckIcon,
   FileTextIcon,
   HighlighterIcon,
-  LockKeyIcon as LockKeyhole,
-  PackageIcon as PackageOpen,
+  LockKeyIcon,
+  PackageIcon,
   PauseIcon,
   PlayIcon,
   RadioIcon,
-  ArrowCounterClockwiseIcon as RotateCcw,
+  ArrowCounterClockwiseIcon,
   ShieldCheckIcon,
   XIcon,
 } from '@phosphor-icons/react'
@@ -172,7 +172,7 @@ export default function MarkdownLanding() {
         <LandingSectionIntro
           centered
           eyebrow="The durable layer"
-          icon={<Braces aria-hidden="true" size={15} />}
+          icon={<BracketsCurlyIcon aria-hidden="true" size={15} />}
           title="The AST is the product."
           body="Parsing does not trap content inside a renderer. Edit the source and inspect the serializable tree, deterministic HTML, or React output."
         />
@@ -227,7 +227,7 @@ export default function MarkdownLanding() {
         <div className="grid items-center gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-16">
           <LandingSectionIntro
             eyebrow="Size ledger"
-            icon={<PackageOpen aria-hidden="true" size={15} />}
+            icon={<PackageIcon aria-hidden="true" size={15} />}
             title="A parser should not outweigh the page."
             body="Split entry points keep the parser, renderers, framework adapters, and docs extensions independent. Import only the layer the page needs."
           />
@@ -566,7 +566,7 @@ function StreamingReplay() {
           }}
         >
           {isComplete ? (
-            <RotateCcw size={13} aria-hidden="true" />
+            <ArrowCounterClockwiseIcon size={13} aria-hidden="true" />
           ) : isPlaying ? (
             <PauseIcon size={13} aria-hidden="true" />
           ) : (
@@ -690,7 +690,7 @@ function SafetyProof() {
       </div>
       <div className="flex flex-wrap gap-x-5 gap-y-2 border-t border-border-subtle px-4 py-3 font-ds-mono text-ds-mono-caps-xs uppercase text-emerald-700 dark:text-emerald-400">
         <span className="inline-flex items-center gap-1.5">
-          <LockKeyhole size={12} aria-hidden="true" /> HTML escaped
+          <LockKeyIcon size={12} aria-hidden="true" /> HTML escaped
         </span>
         <span>Executable URL removed</span>
         <span>Markdown preserved</span>
diff --git a/src/components/npm-stats/BaselineSection.tsx b/src/components/npm-stats/BaselineSection.tsx
index c634fb33a..3081b21e3 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 {
-  PushPinIcon as Pin,
-  PushPinSlashIcon as PinOff,
+  PushPinIcon,
+  PushPinSlashIcon,
   PlusIcon,
   XIcon,
-  CaretDownIcon as ChevronDown,
+  CaretDownIcon,
   EyeIcon,
-  EyeSlashIcon as EyeOff,
+  EyeSlashIcon,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -75,9 +75,9 @@ export function BaselineSection({
         )}
       >
         {normalizeActive ? (
-          <Pin className="w-3 h-3" />
+          <PushPinIcon className="w-3 h-3" />
         ) : (
-          <PinOff className="w-3 h-3" />
+          <PushPinSlashIcon className="w-3 h-3" />
         )}
         <span>Baseline</span>
       </button>
@@ -111,14 +111,14 @@ export function BaselineSection({
             {isBaselineShown ? (
               <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" />
+              <EyeSlashIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
             )}
             {baselineName}
           </button>
         </Tooltip>
       ) : (
         <div className="flex items-center gap-1.5">
-          <EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-500" />
+          <EyeSlashIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
           {baselineName}
         </div>
       )}
@@ -156,7 +156,7 @@ export function BaselineSection({
               text-blue-700 dark:text-blue-300 hover:bg-blue-500/10 font-medium"
           >
             Presets
-            <ChevronDown className="w-3 h-3" />
+            <CaretDownIcon className="w-3 h-3" />
           </button>
         </DropdownMenuTrigger>
       </Tooltip>
@@ -255,7 +255,7 @@ export function BaselineSection({
           <div className="bg-white dark:bg-gray-800 rounded-lg p-2 sm:p-4 w-full max-w-md">
             <div className="flex justify-between items-center mb-2 sm:mb-4">
               <h3 className="text-base sm:text-lg font-medium flex items-center gap-2">
-                <Pin className="w-4 h-4 text-blue-500" />
+                <PushPinIcon className="w-4 h-4 text-blue-500" />
                 Add baseline package
               </h3>
               <button
diff --git a/src/components/npm-stats/ChartControls.tsx b/src/components/npm-stats/ChartControls.tsx
index 24fbba6c0..1798f2d86 100644
--- a/src/components/npm-stats/ChartControls.tsx
+++ b/src/components/npm-stats/ChartControls.tsx
@@ -1,18 +1,17 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import {
-  SortDescendingIcon as ArrowDownWideNarrow,
-  ChartLineUpIcon as ChartArea,
+  SortDescendingIcon,
+  ChartLineUpIcon,
   ChartBarIcon,
-  ChartBarIcon as ChartBarStacked,
   ChartLineIcon,
-  ClockIcon as Clock3,
-  ColumnsIcon as Columns3,
-  ClockCounterClockwiseIcon as History,
-  StackIcon as Layers,
-  RowsIcon as Rows3,
+  ClockIcon,
+  ColumnsIcon,
+  ClockCounterClockwiseIcon,
+  StackIcon,
+  RowsIcon,
   WavesIcon,
-  type Icon as LucideIcon,
+  type Icon,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -56,12 +55,12 @@ const iconSegmentedButtonStyles =
 
 const chartTypeIcons = {
   line: ChartLineIcon,
-  stacked: Layers,
-  'stacked-area': ChartArea,
+  stacked: StackIcon,
+  'stacked-area': ChartLineUpIcon,
   'stacked-stream': WavesIcon,
   bar: ChartBarIcon,
-  'stacked-bar': ChartBarStacked,
-} as const satisfies Partial<Record<ChartType, LucideIcon>>
+  'stacked-bar': ChartBarIcon,
+} as const satisfies Partial<Record<ChartType, Icon>>
 
 const transformOptions = [
   { value: 'none', label: 'Actual Values' },
@@ -136,7 +135,7 @@ export function ChartControls({
                 : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
             )}
           >
-            <History className="size-3" />
+            <ClockCounterClockwiseIcon className="size-3" />
             Timeline
           </button>
         </Tooltip>
@@ -150,7 +149,7 @@ export function ChartControls({
                 : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
             )}
           >
-            <Clock3 className="size-3" />
+            <ClockIcon className="size-3" />
             Snapshot
           </button>
         </Tooltip>
@@ -265,7 +264,7 @@ export function ChartControls({
                   : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
               )}
             >
-              <Columns3 className="size-3" />
+              <ColumnsIcon className="size-3" />
               Vertical
             </button>
           </Tooltip>
@@ -279,7 +278,7 @@ export function ChartControls({
                   : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
               )}
             >
-              <Rows3 className="size-3" />
+              <RowsIcon className="size-3" />
               Horizontal
             </button>
           </Tooltip>
@@ -303,7 +302,7 @@ export function ChartControls({
               onBarSortChange(barSort === 'value' ? 'name' : 'value')
             }
           >
-            <ArrowDownWideNarrow className="size-3" />
+            <SortDescendingIcon className="size-3" />
             {barSort === 'value' ? 'Value Sort' : 'Name Sort'}
           </button>
         </Tooltip>
diff --git a/src/components/npm-stats/LatestBucketNavigator.tsx b/src/components/npm-stats/LatestBucketNavigator.tsx
index 67cecaad9..4e5ec404b 100644
--- a/src/components/npm-stats/LatestBucketNavigator.tsx
+++ b/src/components/npm-stats/LatestBucketNavigator.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import {
   CheckIcon,
-  CaretDownIcon as ChevronDown,
-  CaretLeftIcon as ChevronLeft,
-  CaretRightIcon as ChevronRight,
-  CaretDoubleLeftIcon as ChevronsLeft,
-  CaretDoubleRightIcon as ChevronsRight,
-  DotsThreeIcon as MoreHorizontal,
+  CaretDownIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+  CaretDoubleLeftIcon,
+  CaretDoubleRightIcon,
+  DotsThreeIcon,
   PauseIcon,
   PlayIcon,
 } from '@phosphor-icons/react'
@@ -197,7 +197,7 @@ export function LatestBucketNavigator({
             </option>
           ))}
         </select>
-        <ChevronDown className="pointer-events-none absolute right-1.5 top-1/2 size-3 -translate-y-1/2 text-gray-500" />
+        <CaretDownIcon className="pointer-events-none absolute right-1.5 top-1/2 size-3 -translate-y-1/2 text-gray-500" />
       </div>
       <div className="flex items-center overflow-hidden rounded border border-gray-500/15 bg-white/70 shadow-xs dark:bg-gray-900/70">
         <button
@@ -207,7 +207,7 @@ export function LatestBucketNavigator({
           onClick={() => onBucketOffsetChange(bounds.minOffset)}
           type="button"
         >
-          <ChevronsLeft className="size-3.5" />
+          <CaretDoubleLeftIcon className="size-3.5" />
         </button>
         <button
           aria-label={`Previous ${binLabel}`}
@@ -216,7 +216,7 @@ export function LatestBucketNavigator({
           onClick={() => onBucketOffsetChange(clampedBucketOffset - 1)}
           type="button"
         >
-          <ChevronLeft className="size-3.5" />
+          <CaretLeftIcon className="size-3.5" />
         </button>
         <button
           aria-label={`Next ${binLabel}`}
@@ -225,7 +225,7 @@ export function LatestBucketNavigator({
           onClick={() => onBucketOffsetChange(clampedBucketOffset + 1)}
           type="button"
         >
-          <ChevronRight className="size-3.5" />
+          <CaretRightIcon className="size-3.5" />
         </button>
         <button
           aria-label={`Last ${binLabel}`}
@@ -234,7 +234,7 @@ export function LatestBucketNavigator({
           onClick={() => onBucketOffsetChange(bounds.maxOffset)}
           type="button"
         >
-          <ChevronsRight className="size-3.5" />
+          <CaretDoubleRightIcon className="size-3.5" />
         </button>
       </div>
       <div className="flex max-w-[348px] flex-1 items-center overflow-hidden rounded border border-gray-500/15 bg-white/70 shadow-xs dark:bg-gray-900/70">
@@ -259,7 +259,7 @@ export function LatestBucketNavigator({
               className={borderedNavigatorButtonStyles}
               type="button"
             >
-              <MoreHorizontal className="size-3.5" />
+              <DotsThreeIcon className="size-3.5" />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
diff --git a/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx
index 6380f98a6..fa23d4b38 100644
--- a/src/components/npm-stats/NPMStatsChart.tsx
+++ b/src/components/npm-stats/NPMStatsChart.tsx
@@ -21,7 +21,7 @@ import { Chart } from '@tanstack/react-charts'
 import { GIFEncoder, applyPalette, quantize } from 'gifenc'
 import {
   CheckIcon,
-  CodeIcon as Code2,
+  CodeIcon,
   CopyIcon,
   DownloadIcon,
   ListIcon,
@@ -1719,7 +1719,7 @@ function EmbedChartAction({
             className={chartActionButtonStyles}
             type="button"
           >
-            <Code2 className="size-3" />
+            <CodeIcon className="size-3" />
           </button>
         </DropdownMenuTrigger>
       </Tooltip>
diff --git a/src/components/npm-stats/PackagePills.tsx b/src/components/npm-stats/PackagePills.tsx
index bb3e1861c..f073c9541 100644
--- a/src/components/npm-stats/PackagePills.tsx
+++ b/src/components/npm-stats/PackagePills.tsx
@@ -4,8 +4,8 @@ import {
   XIcon,
   PlusIcon,
   EyeIcon,
-  EyeSlashIcon as EyeOff,
-  DotsThreeVerticalIcon as EllipsisVertical,
+  EyeSlashIcon,
+  DotsThreeVerticalIcon,
 } from '@phosphor-icons/react'
 import {
   DropdownMenu,
@@ -113,7 +113,9 @@ export function PackagePill({
               )}
             >
               <span className="truncate">{label}</span>
-              {isGroupHidden ? <EyeOff className="size-3.5 shrink-0" /> : null}
+              {isGroupHidden ? (
+                <EyeSlashIcon className="size-3.5 shrink-0" />
+              ) : null}
             </button>
           </Tooltip>
           {showPackageCount ? (
@@ -134,7 +136,7 @@ export function PackagePill({
                 <Tooltip content="More options">
                   <DropdownMenuTrigger asChild>
                     <button className="px-0.5 hover:text-blue-500">
-                      <EllipsisVertical className="size-3.5" />
+                      <DotsThreeVerticalIcon className="size-3.5" />
                     </button>
                   </DropdownMenuTrigger>
                 </Tooltip>
@@ -186,7 +188,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"
                     >
                       {isGroupHidden ? (
-                        <EyeOff className="text-sm" />
+                        <EyeSlashIcon className="text-sm" />
                       ) : (
                         <EyeIcon className="text-sm" />
                       )}
@@ -226,7 +228,7 @@ export function PackagePill({
                             <div className="flex-1 flex items-center justify-between">
                               <div className="flex items-center gap-2">
                                 {subPackage.hidden ? (
-                                  <EyeOff className="text-sm" />
+                                  <EyeSlashIcon className="text-sm" />
                                 ) : (
                                   <EyeIcon className="text-sm" />
                                 )}
diff --git a/src/components/npm-stats/PackageSearch.tsx b/src/components/npm-stats/PackageSearch.tsx
index ee389a6cd..72f36d6f6 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 { MagnifyingGlassIcon as Search } from '@phosphor-icons/react'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { Command } from 'cmdk'
 import { twMerge } from 'tailwind-merge'
@@ -101,7 +101,7 @@ export function PackageSearch({
         label="Search npm packages"
       >
         <div className="relative text-xs">
-          <Search className="pointer-events-none absolute left-1.5 top-1/2 size-3.5 -translate-y-1/2 text-gray-500" />
+          <MagnifyingGlassIcon className="pointer-events-none absolute left-1.5 top-1/2 size-3.5 -translate-y-1/2 text-gray-500" />
           <Command.Input
             placeholder={placeholder}
             className="h-6 w-full min-w-[180px] rounded bg-gray-500/10 py-0.5 pl-6 pr-6 text-xs outline-none"
diff --git a/src/routes/admin/intent.tsx b/src/routes/admin/intent.tsx
index a28496241..bc310e087 100644
--- a/src/routes/admin/intent.tsx
+++ b/src/routes/admin/intent.tsx
@@ -2,15 +2,15 @@ import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  ArrowsClockwiseIcon as RefreshCw,
+  ArrowsClockwiseIcon,
   PlayIcon,
-  ArrowCounterClockwiseIcon as RotateCcw,
-  TrashIcon as Trash2,
+  ArrowCounterClockwiseIcon,
+  TrashIcon,
   BookOpenIcon,
-  CaretDownIcon as ChevronDown,
-  CaretRightIcon as ChevronRight,
-  WarningIcon as AlertTriangle,
-  CheckCircleIcon as CheckCircle2,
+  CaretDownIcon,
+  CaretRightIcon,
+  WarningIcon,
+  CheckCircleIcon,
   ClockIcon,
   WrenchIcon,
 } from '@phosphor-icons/react'
@@ -148,7 +148,7 @@ function IntentAdminPage() {
             disabled={discoverMutation.isPending}
             title="Search NPM for tanstack-intent keyword, verify packages, and enqueue"
           >
-            <RefreshCw
+            <ArrowsClockwiseIcon
               className={
                 discoverMutation.isPending ? 'animate-spin w-4 h-4' : 'w-4 h-4'
               }
@@ -161,7 +161,7 @@ function IntentAdminPage() {
             disabled={githubDiscoverMutation.isPending}
             title="Search GitHub for repos with @tanstack/intent dependency and skills"
           >
-            <RefreshCw
+            <ArrowsClockwiseIcon
               className={
                 githubDiscoverMutation.isPending
                   ? 'animate-spin w-4 h-4'
@@ -198,7 +198,7 @@ function IntentAdminPage() {
               disabled={resetFailedMutation.isPending}
               title="Reset all failed versions back to pending so they'll be retried"
             >
-              <RotateCcw className="w-4 h-4" />
+              <ArrowCounterClockwiseIcon className="w-4 h-4" />
               Reset {stats?.failedVersions} Failed
             </Button>
           )}
@@ -493,7 +493,7 @@ function WorkflowHealthSection({
     <div className="mb-6">
       <div className="mb-2 flex items-center justify-between gap-3">
         <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5">
-          <CheckCircle2 className="w-4 h-4" />
+          <CheckCircleIcon className="w-4 h-4" />
           Workflow Health
         </h2>
         <Button
@@ -710,9 +710,9 @@ function ResultBanner({
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-center gap-2 font-medium text-gray-900 dark:text-white">
           {hasErrors ? (
-            <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
+            <WarningIcon className="w-4 h-4 text-amber-500 shrink-0" />
           ) : (
-            <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
+            <CheckCircleIcon className="w-4 h-4 text-emerald-500 shrink-0" />
           )}
           {title}
         </div>
@@ -774,7 +774,7 @@ function FailedVersionsSection({
   return (
     <div className="mb-6">
       <h2 className="text-sm font-semibold text-red-600 dark:text-red-400 flex items-center gap-1.5 mb-2">
-        <AlertTriangle className="w-4 h-4" />
+        <WarningIcon className="w-4 h-4" />
         Failed Versions
         <span className="ml-1 px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-900/40 text-xs tabular-nums">
           {versions.length}
@@ -821,7 +821,7 @@ function FailedVersionsSection({
                     onClick={() => retryMutation.mutate(v.id)}
                     disabled={retryMutation.isPending}
                   >
-                    <RotateCcw className="w-3 h-3" />
+                    <ArrowCounterClockwiseIcon className="w-3 h-3" />
                     Retry
                   </Button>
                 </td>
@@ -953,9 +953,9 @@ function PackageRow({
       <td className="px-3 py-2.5">
         <div className="flex items-center gap-1.5">
           {isExpanded ? (
-            <ChevronDown className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+            <CaretDownIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
           ) : (
-            <ChevronRight className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+            <CaretRightIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
           )}
           <span className="font-mono text-xs text-gray-900 dark:text-gray-100">
             {pkg.name}
@@ -965,7 +965,7 @@ function PackageRow({
       <td className="px-3 py-2.5 hidden sm:table-cell">
         {pkg.verified ? (
           <span className="inline-flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
-            <CheckCircle2 className="w-3.5 h-3.5" /> Verified
+            <CheckCircleIcon className="w-3.5 h-3.5" /> Verified
           </span>
         ) : (
           <span className="inline-flex items-center gap-1 text-xs text-gray-400">
@@ -1012,7 +1012,7 @@ function PackageRow({
           disabled={deleteMutation.isPending}
           title="Remove this package and all versions from the registry"
         >
-          <Trash2 className="w-3 h-3" />
+          <TrashIcon className="w-3 h-3" />
         </Button>
       </td>
     </tr>
diff --git a/src/routes/admin/npm-stats.tsx b/src/routes/admin/npm-stats.tsx
index 20bbd0295..f81787f96 100644
--- a/src/routes/admin/npm-stats.tsx
+++ b/src/routes/admin/npm-stats.tsx
@@ -1,9 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  DownloadIcon,
-  ArrowsClockwiseIcon as RefreshCw,
-} from '@phosphor-icons/react'
+import { DownloadIcon, ArrowsClockwiseIcon } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
 import { NpmIcon } from '~/components/icons/NpmIcon'
 import { homepageNpmStatsSummaryQuery } from '~/queries/stats'
@@ -53,7 +50,7 @@ function NpmStatsAdmin() {
             onClick={() => refreshSummaryMutation.mutate()}
             title="Refresh the NPM summary cache from NPM stats chunks"
           >
-            <RefreshCw
+            <ArrowsClockwiseIcon
               className={refreshSummaryMutation.isPending ? 'animate-spin' : ''}
             />
             {refreshSummaryMutation.isPending
diff --git a/src/routes/ds.tsx b/src/routes/ds.tsx
index d8bc60fae..f782ae451 100644
--- a/src/routes/ds.tsx
+++ b/src/routes/ds.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CaretRightIcon as CaretRight } from '@phosphor-icons/react'
+import { CaretRightIcon } from '@phosphor-icons/react'
 import {
   Link,
   Outlet,
@@ -145,7 +145,7 @@ function DesignSystemSidebar() {
                             }
                             className="grid size-7 shrink-0 place-items-center rounded-md text-text-muted hover:bg-background-subtle hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
                           >
-                            <CaretRight
+                            <CaretRightIcon
                               size={14}
                               className={expanded ? 'rotate-90' : undefined}
                             />
diff --git a/src/routes/partners.$partner.tsx b/src/routes/partners.$partner.tsx
index 43d014641..4ae2c9efc 100644
--- a/src/routes/partners.$partner.tsx
+++ b/src/routes/partners.$partner.tsx
@@ -3,7 +3,7 @@ import { Link, createFileRoute, notFound } from '@tanstack/react-router'
 import {
   ArrowRightIcon,
   ArrowUpRightIcon,
-  CheckCircleIcon as CheckCircle2,
+  CheckCircleIcon,
   CircleDashedIcon,
 } from '@phosphor-icons/react'
 import { Card } from '~/components/Card'
@@ -119,7 +119,7 @@ function PartnerDetailPage() {
                     }`}
                   >
                     {isActive ? (
-                      <CheckCircle2 className="h-3.5 w-3.5" />
+                      <CheckCircleIcon className="h-3.5 w-3.5" />
                     ) : (
                       <CircleDashedIcon className="h-3.5 w-3.5" />
                     )}
diff --git a/src/routes/shop.search.tsx b/src/routes/shop.search.tsx
index 80995e8ee..2178c5fd8 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 { MagnifyingGlassIcon as SearchIcon } from '@phosphor-icons/react'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react'
 import { ProductCard } from '~/components/shop/ProductCard'
 import { ShopHero } from '~/components/shop/ShopHero'
 import { ShopButton, ShopInput, ShopLabel } from '~/components/shop/ui'
@@ -93,7 +93,7 @@ function SearchPage() {
         className="flex items-center gap-2 max-w-xl"
       >
         <div className="relative flex-1">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-shop-muted" />
+          <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-shop-muted" />
           <ShopInput
             type="search"
             value={inputValue}
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx
index 472885b0b..ee83fa58b 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 { QuestionIcon as HelpCircle, XIcon } from '@phosphor-icons/react'
+import { QuestionIcon, XIcon } from '@phosphor-icons/react'
 import { useQuery } from '@tanstack/react-query'
 import { Card } from '~/components/ds/ui'
 import { Tooltip } from '~/components/Tooltip'
@@ -1012,7 +1012,7 @@ function RouteComponent() {
                 className="flex size-6 items-center justify-center rounded bg-gray-500/10 text-gray-500 hover:bg-gray-500/20 hover:text-blue-500"
                 type="button"
               >
-                <HelpCircle className="size-3" />
+                <QuestionIcon className="size-3" />
               </button>
             </Tooltip>
           </div>