diff --git a/src/components/LibrariesBrowser.tsx b/src/components/LibrariesBrowser.tsx
index 539c4a00f..2254a454a 100644
--- a/src/components/LibrariesBrowser.tsx
+++ b/src/components/LibrariesBrowser.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
-import { Check as CheckIcon } from '@phosphor-icons/react/Check'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
+import { CheckIcon } from '@phosphor-icons/react/Check'
 import { type Framework } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import LibraryGridCard from '~/components/LibraryGridCard'
diff --git a/src/components/LibrariesOverlay.tsx b/src/components/LibrariesOverlay.tsx
index 375a61a28..057ea0d9b 100644
--- a/src/components/LibrariesOverlay.tsx
+++ b/src/components/LibrariesOverlay.tsx
@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
+import { XIcon } from '@phosphor-icons/react/X'
 import { LibrariesBrowser } from '~/components/LibrariesBrowser'
 
 export function LibrariesOverlay({
diff --git a/src/components/LibraryGridCard.tsx b/src/components/LibraryGridCard.tsx
index 0361948cb..81ce9fc3c 100644
--- a/src/components/LibraryGridCard.tsx
+++ b/src/components/LibraryGridCard.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/CaretRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight'
 import { twMerge } from 'tailwind-merge'
 import type { PublicLibrarySlim } from '~/libraries'
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
index eeabf7fa7..ec400209a 100644
--- a/src/components/LibraryLayout.tsx
+++ b/src/components/LibraryLayout.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { CaretLeft as CaretLeftIcon } from '@phosphor-icons/react/CaretLeft'
-import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/CaretRight'
-import { List as ListIcon } from '@phosphor-icons/react/List'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { CaretLeftIcon } from '@phosphor-icons/react/CaretLeft'
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight'
+import { ListIcon } from '@phosphor-icons/react/List'
+import { XIcon } from '@phosphor-icons/react/X'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 30ec4dd84..0135a7b95 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 as XIcon } from '@phosphor-icons/react/X'
+import { XIcon } from '@phosphor-icons/react/X'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
 import { authClient } from '~/auth/client'
diff --git a/src/components/MegaMenuItem.tsx b/src/components/MegaMenuItem.tsx
index f5fe215d4..e874b2c64 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 as ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
 import { IconContext } from '@phosphor-icons/react/dist/lib/context'
 
 type IconComponent = React.ComponentType<{ className?: string }>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e81eb1310..30030b010 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -16,26 +16,26 @@ const LazyMobileNavbarAuthControls = React.lazy(() =>
 import { NavbarCartButton } from './NavbarCartButton'
 import { MegaMenuItem } from './MegaMenuItem'
 import { Link, useLocation } from '@tanstack/react-router'
-import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
-import { Briefcase as BriefcaseIcon } from '@phosphor-icons/react/Briefcase'
-import { Code as CodeIcon } from '@phosphor-icons/react/Code'
-import { GridFour as GridFourIcon } from '@phosphor-icons/react/GridFour'
-import { Hammer as HammerIcon } from '@phosphor-icons/react/Hammer'
-import { Heart as HeartIcon } from '@phosphor-icons/react/Heart'
-import { Infinity as InfinityIcon } from '@phosphor-icons/react/Infinity'
-import { Lifebuoy as LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
-import { List as Menu } from '@phosphor-icons/react/List'
-import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
-import { Mailbox as MailboxIcon } from '@phosphor-icons/react/Mailbox'
-import { ShieldCheck as ShieldCheckIcon } from '@phosphor-icons/react/ShieldCheck'
-import { ShoppingBag as ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
-import { SignIn as SignInIcon } from '@phosphor-icons/react/SignIn'
-import { Sparkle as Sparkles } from '@phosphor-icons/react/Sparkle'
-import { TrendUp as TrendingUp } from '@phosphor-icons/react/TrendUp'
-import { Users as UsersIcon } from '@phosphor-icons/react/Users'
-import { X as XIcon } from '@phosphor-icons/react/X'
+import { ArrowLeftIcon } from '@phosphor-icons/react/ArrowLeft'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react/ArrowSquareOut'
+import { BriefcaseIcon } from '@phosphor-icons/react/Briefcase'
+import { CodeIcon } from '@phosphor-icons/react/Code'
+import { GridFourIcon } from '@phosphor-icons/react/GridFour'
+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 { 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 { UsersIcon } from '@phosphor-icons/react/Users'
+import { XIcon } from '@phosphor-icons/react/X'
 import { ThemeToggle } from './ThemeToggle'
 import { AiDockButton, SearchButton } from './SearchButton'
 import { BrandContextMenu } from './BrandContextMenu'
diff --git a/src/components/NavbarAuthControls.tsx b/src/components/NavbarAuthControls.tsx
index f25b34b16..458cc13a4 100644
--- a/src/components/NavbarAuthControls.tsx
+++ b/src/components/NavbarAuthControls.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { Gear } from '@phosphor-icons/react/Gear'
-import { Key } from '@phosphor-icons/react/Key'
-import { Lock } from '@phosphor-icons/react/Lock'
-import { SignIn, SignIn as SignInIcon } from '@phosphor-icons/react/SignIn'
-import { SignOut } from '@phosphor-icons/react/SignOut'
-import { Sparkle } from '@phosphor-icons/react/Sparkle'
+import { GearIcon } from '@phosphor-icons/react/Gear'
+import { KeyIcon } from '@phosphor-icons/react/Key'
+import { LockIcon } from '@phosphor-icons/react/Lock'
+import { SignInIcon } from '@phosphor-icons/react/SignIn'
+import { SignOutIcon } from '@phosphor-icons/react/SignOut'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -126,7 +126,7 @@ export function MobileNavbarAuthControls({
       onClick={onNavigate}
       className={itemClassName}
     >
-      <SignIn className="size-8 shrink-0" />
+      <SignInIcon className="size-8 shrink-0" />
       Sign In
     </Link>
   )
@@ -142,7 +142,7 @@ export function MobileNavbarAuthControls({
           onClick={onNavigate}
           className={itemClassName}
         >
-          <Gear className="size-8 shrink-0" />
+          <GearIcon className="size-8 shrink-0" />
           Account
         </Link>
         <Link
@@ -151,7 +151,7 @@ export function MobileNavbarAuthControls({
           onClick={onNavigate}
           className={itemClassName}
         >
-          <Sparkle className="size-8 shrink-0" />
+          <SparkleIcon className="size-8 shrink-0" />
           My Showcases
         </Link>
         {user && (
@@ -161,7 +161,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <Key className="size-8 shrink-0" />
+            <KeyIcon className="size-8 shrink-0" />
             Integrations
           </Link>
         )}
@@ -172,7 +172,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <Lock className="size-8 shrink-0" />
+            <LockIcon className="size-8 shrink-0" />
             Admin
           </Link>
         )}
@@ -182,7 +182,7 @@ export function MobileNavbarAuthControls({
           onClick={signOut}
           className={itemClassName}
         >
-          <SignOut className="size-8 shrink-0" />
+          <SignOutIcon className="size-8 shrink-0" />
           Sign Out
         </button>
       </Authenticated>
diff --git a/src/components/NavbarCartButton.tsx b/src/components/NavbarCartButton.tsx
index d03ac65fc..22c3e6d9a 100644
--- a/src/components/NavbarCartButton.tsx
+++ b/src/components/NavbarCartButton.tsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from '@tanstack/react-router'
-import { ShoppingCart as ShoppingCartIcon } from '@phosphor-icons/react/ShoppingCart'
+import { ShoppingCartIcon } from '@phosphor-icons/react/ShoppingCart'
 import { twMerge } from 'tailwind-merge'
 import { useCart } from '~/hooks/useCart'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 00d13d7fa..0804ca735 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 import { Link, useRouterState } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { BookOpen as BookOpenIcon } from '@phosphor-icons/react/BookOpen'
-import { Compass as CompassIcon } from '@phosphor-icons/react/Compass'
-import { House as HouseIcon } from '@phosphor-icons/react/House'
-import { Lifebuoy as LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
-import { Newspaper as NewspaperIcon } from '@phosphor-icons/react/Newspaper'
-import { Question as QuestionIcon } from '@phosphor-icons/react/Question'
-import { ShoppingBag as ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
-import { Sparkle as SparkleIcon } from '@phosphor-icons/react/Sparkle'
-import { Stack as StackIcon } from '@phosphor-icons/react/Stack'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { BookOpenIcon } from '@phosphor-icons/react/BookOpen'
+import { CompassIcon } from '@phosphor-icons/react/Compass'
+import { HouseIcon } from '@phosphor-icons/react/House'
+import { LifebuoyIcon } from '@phosphor-icons/react/Lifebuoy'
+import { NewspaperIcon } from '@phosphor-icons/react/Newspaper'
+import { QuestionIcon } from '@phosphor-icons/react/Question'
+import { ShoppingBagIcon } from '@phosphor-icons/react/ShoppingBag'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { StackIcon } from '@phosphor-icons/react/Stack'
 import type { Icon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { libraries, type LibrarySlim } from '~/libraries'
diff --git a/src/components/OssSponsorsSection.tsx b/src/components/OssSponsorsSection.tsx
index 72126a78e..442f66376 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 as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
 import { getOssSponsors } from '~/utils/sponsors.functions'
 import { Button } from '~/ui'
 import OssSponsors from './OssSponsors'
diff --git a/src/components/PartnersSponsorsSection.tsx b/src/components/PartnersSponsorsSection.tsx
index 0fdd3e962..34dbae7ce 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 as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
 import { Button } from '~/components/ds/ui'
 import { OssSponsorsWithQuery } from '~/components/OssSponsorsSection'
 import { PartnersGrid, TierBand } from '~/components/PartnersGrid'
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index 698c64391..300e861fb 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Command as CommandIcon } from '@phosphor-icons/react/Command'
-import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
-import { Sparkle as SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import { CommandIcon } from '@phosphor-icons/react/Command'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
 import { twMerge } from 'tailwind-merge'
 import { Button, Tooltip } from '~/ui'
 import { useSearchContext } from '~/contexts/SearchContext'
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index a4dfc01c8..4f0db333e 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
-import { CaretUpDown as CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
-import { Check as CheckIcon } from '@phosphor-icons/react/Check'
+import { CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
+import { CheckIcon } from '@phosphor-icons/react/Check'
 import { twMerge } from 'tailwind-merge'
 import {
   Dropdown,
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index d09fefb79..ea664cabc 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { CircleNotch as CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
+import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
 
 interface SpinnerProps {
   className?: string
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index c27e15fcb..eb97580c0 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTheme } from './ThemeProvider'
-import { Moon as MoonIcon } from '@phosphor-icons/react/Moon'
-import { Sun as SunIcon } from '@phosphor-icons/react/Sun'
-import { SunHorizon as SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
+import { MoonIcon } from '@phosphor-icons/react/Moon'
+import { SunIcon } from '@phosphor-icons/react/Sun'
+import { SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
 import { Button } from '~/ui'
 
 export function ThemeToggle() {
diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx
index ffbfdc8b6..39dd49496 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 as TagIcon } from '@phosphor-icons/react/Tag'
+import { TagIcon } from '@phosphor-icons/react/Tag'
 import { Select, SelectOption } from './Select'
 import { getLibrary, LibraryId } from '~/libraries'
 import {
diff --git a/src/components/ds/ui/index.tsx b/src/components/ds/ui/index.tsx
index f494de6c1..7b04df4f1 100644
--- a/src/components/ds/ui/index.tsx
+++ b/src/components/ds/ui/index.tsx
@@ -2,11 +2,11 @@ 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 as CaretDownIcon } from '@phosphor-icons/react/CaretDown'
-import { CircleNotch as CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
-import { MagnifyingGlass } from '@phosphor-icons/react/MagnifyingGlass'
-import { User as UserIcon } from '@phosphor-icons/react/User'
-import { X } from '@phosphor-icons/react/X'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
+import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
+import { UserIcon } from '@phosphor-icons/react/User'
+import { XIcon } from '@phosphor-icons/react/X'
 import type { MarkdownHeading } from '~/utils/markdown'
 import type { LibraryId } from '~/libraries/ids'
 import type { LibraryCategory } from '~/libraries/categories'
@@ -508,7 +508,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
               : 'h-10 gap-2.5 rounded-lg px-3',
           )}
         >
-          <MagnifyingGlass
+          <MagnifyingGlassIcon
             size={size === 'large' ? 21 : 18}
             weight="bold"
             aria-hidden="true"
@@ -530,7 +530,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             onClick={reveal}
             className="grid size-10 shrink-0 place-items-center transition-colors duration-150 hover:text-text-primary focus-visible:text-text-accent focus-visible:outline-none motion-reduce:transition-none"
           >
-            <MagnifyingGlass size={18} weight="bold" aria-hidden="true" />
+            <MagnifyingGlassIcon size={18} weight="bold" aria-hidden="true" />
           </button>
           {React.cloneElement(input, {
             tabIndex: open ? props.tabIndex : -1,
@@ -555,7 +555,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
               skipMotion && 'transition-none',
             )}
           >
-            <X size={16} weight="bold" aria-hidden="true" />
+            <XIcon size={16} weight="bold" aria-hidden="true" />
           </button>
           <span
             aria-hidden="true"
diff --git a/src/components/landing/ChartsCatalogGallery.tsx b/src/components/landing/ChartsCatalogGallery.tsx
index f38594319..cef8bce1f 100644
--- a/src/components/landing/ChartsCatalogGallery.tsx
+++ b/src/components/landing/ChartsCatalogGallery.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowUpRight as ArrowUpRightIcon } from '@phosphor-icons/react/ArrowUpRight'
-import { Pause as PauseIcon } from '@phosphor-icons/react/Pause'
-import { Play as PlayIcon } from '@phosphor-icons/react/Play'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowUpRightIcon } from '@phosphor-icons/react/ArrowUpRight'
+import { PauseIcon } from '@phosphor-icons/react/Pause'
+import { PlayIcon } from '@phosphor-icons/react/Play'
 import { catalogCases } from '@tanstack/react-charts-catalog'
 import type { CatalogCaseId } from '@tanstack/react-charts-catalog'
 
diff --git a/src/components/landing/ChartsLandingGraphics.tsx b/src/components/landing/ChartsLandingGraphics.tsx
index 294164d60..3f117d5d5 100644
--- a/src/components/landing/ChartsLandingGraphics.tsx
+++ b/src/components/landing/ChartsLandingGraphics.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Pause as PauseIcon } from '@phosphor-icons/react/Pause'
-import { Play as PlayIcon } from '@phosphor-icons/react/Play'
-import { Shuffle as ShuffleIcon } from '@phosphor-icons/react/Shuffle'
+import { PauseIcon } from '@phosphor-icons/react/Pause'
+import { PlayIcon } from '@phosphor-icons/react/Play'
+import { ShuffleIcon } from '@phosphor-icons/react/Shuffle'
 
 import { useIsDark } from '~/hooks/useIsDark'
 import { useInView } from '~/hooks/useInView'
diff --git a/src/components/landing/LandingCopyPromptButton.tsx b/src/components/landing/LandingCopyPromptButton.tsx
index 6fd8c577d..c15e8a14d 100644
--- a/src/components/landing/LandingCopyPromptButton.tsx
+++ b/src/components/landing/LandingCopyPromptButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
-import { Copy as CopyIcon } from '@phosphor-icons/react/Copy'
+import { CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
 import { twMerge } from 'tailwind-merge'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 
diff --git a/src/components/landing/LibraryLanding.tsx b/src/components/landing/LibraryLanding.tsx
index 0d3803486..93bdd8298 100644
--- a/src/components/landing/LibraryLanding.tsx
+++ b/src/components/landing/LibraryLanding.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link, useParams } from '@tanstack/react-router'
-import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
-import { ArrowsClockwise as ArrowsClockwiseIcon } from '@phosphor-icons/react/ArrowsClockwise'
-import { CalendarDots as CalendarDotsIcon } from '@phosphor-icons/react/CalendarDots'
-import { DownloadSimple as DownloadSimpleIcon } from '@phosphor-icons/react/DownloadSimple'
-import { Plus as PlusIcon } from '@phosphor-icons/react/Plus'
-import { Star as StarIcon } from '@phosphor-icons/react/Star'
-import { Swap as SwapIcon } from '@phosphor-icons/react/Swap'
+import { ArrowRightIcon } from '@phosphor-icons/react/ArrowRight'
+import { ArrowsClockwiseIcon } from '@phosphor-icons/react/ArrowsClockwise'
+import { CalendarDotsIcon } from '@phosphor-icons/react/CalendarDots'
+import { DownloadSimpleIcon } from '@phosphor-icons/react/DownloadSimple'
+import { PlusIcon } from '@phosphor-icons/react/Plus'
+import { StarIcon } from '@phosphor-icons/react/Star'
+import { SwapIcon } from '@phosphor-icons/react/Swap'
 import type { Icon } from '@phosphor-icons/react'
 
 import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
diff --git a/src/components/markdown/CodeBlockView.tsx b/src/components/markdown/CodeBlockView.tsx
index ff6406d02..79cdc65fd 100644
--- a/src/components/markdown/CodeBlockView.tsx
+++ b/src/components/markdown/CodeBlockView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Copy as CopyIcon } from '@phosphor-icons/react/Copy'
+import { CopyIcon } from '@phosphor-icons/react/Copy'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
 import { Button } from '~/ui'
diff --git a/src/libraries/icons.ts b/src/libraries/icons.ts
index a243f7210..a2f7ae64c 100644
--- a/src/libraries/icons.ts
+++ b/src/libraries/icons.ts
@@ -1,23 +1,23 @@
-import { Brain as BrainIcon } from '@phosphor-icons/react/Brain'
-import { ChartLineUp as ChartLineUpIcon } from '@phosphor-icons/react/ChartLineUp'
-import { ClipboardText as ClipboardTextIcon } from '@phosphor-icons/react/ClipboardText'
-import { Crosshair as CrosshairIcon } from '@phosphor-icons/react/Crosshair'
-import { Database as DatabaseIcon } from '@phosphor-icons/react/Database'
-import { Dresser as DresserIcon } from '@phosphor-icons/react/Dresser'
-import { GearSix as GearSixIcon } from '@phosphor-icons/react/GearSix'
-import { Goggles as GogglesIcon } from '@phosphor-icons/react/Goggles'
-import { Highlighter as HighlighterIcon } from '@phosphor-icons/react/Highlighter'
-import { MarkdownLogo as MarkdownLogoIcon } from '@phosphor-icons/react/MarkdownLogo'
-import { PencilRuler as PencilRulerIcon } from '@phosphor-icons/react/PencilRuler'
-import { SealQuestion as SealQuestionIcon } from '@phosphor-icons/react/SealQuestion'
-import { Sliders as SlidersIcon } from '@phosphor-icons/react/Sliders'
-import { SmileyMelting as SmileyMeltingIcon } from '@phosphor-icons/react/SmileyMelting'
-import { SunHorizon as SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
-import { Table as TableIcon } from '@phosphor-icons/react/Table'
-import { Target as TargetIcon } from '@phosphor-icons/react/Target'
-import { TerminalWindow as TerminalWindowIcon } from '@phosphor-icons/react/TerminalWindow'
-import { Timer as TimerIcon } from '@phosphor-icons/react/Timer'
-import { TrafficSign as TrafficSignIcon } from '@phosphor-icons/react/TrafficSign'
+import { BrainIcon } from '@phosphor-icons/react/Brain'
+import { ChartLineUpIcon } from '@phosphor-icons/react/ChartLineUp'
+import { ClipboardTextIcon } from '@phosphor-icons/react/ClipboardText'
+import { CrosshairIcon } from '@phosphor-icons/react/Crosshair'
+import { DatabaseIcon } from '@phosphor-icons/react/Database'
+import { DresserIcon } from '@phosphor-icons/react/Dresser'
+import { GearSixIcon } from '@phosphor-icons/react/GearSix'
+import { GogglesIcon } from '@phosphor-icons/react/Goggles'
+import { HighlighterIcon } from '@phosphor-icons/react/Highlighter'
+import { MarkdownLogoIcon } from '@phosphor-icons/react/MarkdownLogo'
+import { PencilRulerIcon } from '@phosphor-icons/react/PencilRuler'
+import { SealQuestionIcon } from '@phosphor-icons/react/SealQuestion'
+import { SlidersIcon } from '@phosphor-icons/react/Sliders'
+import { SmileyMeltingIcon } from '@phosphor-icons/react/SmileyMelting'
+import { SunHorizonIcon } from '@phosphor-icons/react/SunHorizon'
+import { TableIcon } from '@phosphor-icons/react/Table'
+import { TargetIcon } from '@phosphor-icons/react/Target'
+import { TerminalWindowIcon } from '@phosphor-icons/react/TerminalWindow'
+import { TimerIcon } from '@phosphor-icons/react/Timer'
+import { TrafficSignIcon } from '@phosphor-icons/react/TrafficSign'
 import type { Icon } from '@phosphor-icons/react'
 
 /**