TanStack · SeanCassiere · Aug 7, 2026 · Aug 7, 2026
diff --git 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
@@ -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
@@ -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
@@ -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,15 +132,15 @@ 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."
           />
         </div>
         <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
@@ -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>