fix

apps/v4/components/code-collapsible-wrapper.tsx

@@ -39,7 +39,7 @@ export function CodeCollapsibleWrapper({
       </CollapsibleTrigger>
       <CollapsibleContent
         forceMount
-        className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 [&>figure]:mt-0 [&>figure]:md:!mx-0"
+        className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 data-[state=closed]:[content-visibility:auto] [&>figure]:mt-0 [&>figure]:md:!mx-0"
       >
         {children}
       </CollapsibleContent>

apps/v4/components/copy-button.tsx

@@ -29,10 +29,11 @@ export function CopyButton({
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false)
-    }, 2000)
-  }, [])
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
 
   return (
     <Button

apps/v4/examples/base/ui-rtl/accordion.tsx

@@ -2,8 +2,7 @@
 
 import { cn } from "@/examples/base/lib/utils"
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
@@ -41,22 +40,12 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconChevronDown"
+        <ChevronDownIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowDown01Icon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
-        <IconPlaceholder
-          lucide="ChevronUpIcon"
-          tabler="IconChevronUp"
+        <ChevronUpIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowUp01Icon"
-          phosphor="CaretUpIcon"
-          remixicon="RiArrowUpSLine"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>

apps/v4/examples/base/ui-rtl/breadcrumb.tsx

@@ -2,8 +2,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -85,16 +84,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? (
-        <IconPlaceholder
-          lucide="ChevronRightIcon"
-          tabler="IconChevronRight"
-          hugeicons="ArrowRight01Icon"
-          phosphor="CaretRightIcon"
-          remixicon="RiArrowRightSLine"
-          className="rtl:rotate-180"
-        />
-      )}
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
     </li>
   )
 }
@@ -114,13 +104,7 @@ function BreadcrumbEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More</span>
     </span>
   )

apps/v4/examples/base/ui-rtl/calendar.tsx

@@ -3,6 +3,11 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button, buttonVariants } from "@/examples/base/ui-rtl/button"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
 import {
   DayPicker,
   getDefaultClassNames,
@@ -10,8 +15,6 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Calendar({
   className,
   classNames,
@@ -147,12 +150,7 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <IconPlaceholder
-                lucide="ChevronLeftIcon"
-                tabler="IconChevronLeft"
-                hugeicons="ArrowLeftIcon"
-                phosphor="CaretLeftIcon"
-                remixicon="RiArrowLeftSLine"
+              <ChevronLeftIcon
                 className={cn("size-4 rtl:rotate-180", className)}
                 {...props}
               />
@@ -161,12 +159,7 @@ function Calendar({
 
           if (orientation === "right") {
             return (
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRightIcon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
+              <ChevronRightIcon
                 className={cn("size-4 rtl:rotate-180", className)}
                 {...props}
               />
@@ -174,15 +167,7 @@ function Calendar({
           }
 
           return (
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDownIcon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className={cn("size-4", className)}
-              {...props}
-            />
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: ({ ...props }) => (

apps/v4/examples/base/ui-rtl/carousel.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/examples/base/ui-rtl/button"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -195,14 +194,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        className="rtl:rotate-180"
-      />
+      <ChevronLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -232,14 +224,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="rtl:rotate-180"
-      />
+      <ChevronRightIcon className="rtl:rotate-180" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

apps/v4/examples/base/ui-rtl/checkbox.tsx

@@ -2,8 +2,7 @@
 
 import { cn } from "@/examples/base/lib/utils"
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon } from "lucide-react"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
@@ -19,13 +18,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

apps/v4/examples/base/ui-rtl/combobox.tsx

@@ -10,8 +10,7 @@ import {
   InputGroupInput,
 } from "@/examples/base/ui-rtl/input-group"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
 
 const Combobox = ComboboxPrimitive.Root
 
@@ -31,14 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -51,14 +43,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
       className={cn(className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="XIcon"
-        tabler="IconX"
-        hugeicons="Cancel01Icon"
-        phosphor="XIcon"
-        remixicon="RiCloseLine"
-        className="pointer-events-none"
-      />
+      <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
   )
 }
@@ -168,14 +153,7 @@ function ComboboxItem({
           <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   )
@@ -277,14 +255,7 @@ function ComboboxChip({
           className="-ms-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
         >
-          <IconPlaceholder
-            lucide="XIcon"
-            tabler="IconX"
-            hugeicons="Cancel01Icon"
-            phosphor="XIcon"
-            remixicon="RiCloseLine"
-            className="pointer-events-none"
-          />
+          <XIcon className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>

apps/v4/examples/base/ui-rtl/command.tsx

@@ -11,8 +11,7 @@ import {
 } from "@/examples/base/ui-rtl/dialog"
 import { InputGroup, InputGroupAddon } from "@/examples/base/ui-rtl/input-group"
 import { Command as CommandPrimitive } from "cmdk"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, SearchIcon } from "lucide-react"
 
 function Command({
   className,
@@ -79,14 +78,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <IconPlaceholder
-            lucide="SearchIcon"
-            tabler="IconSearch"
-            hugeicons="SearchIcon"
-            phosphor="MagnifyingGlassIcon"
-            remixicon="RiSearchLine"
-            className="size-4 shrink-0 opacity-50"
-          />
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -166,14 +158,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="CheckIcon"
-        tabler="IconCheck"
-        hugeicons="Tick02Icon"
-        phosphor="CheckIcon"
-        remixicon="RiCheckLine"
-        className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-      />
+      <CheckIcon className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   )
 }

apps/v4/examples/base/ui-rtl/context-menu.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
@@ -137,14 +136,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="ms-auto rtl:rotate-180"
-      />
+      <ChevronRightIcon className="ms-auto rtl:rotate-180" />
     </ContextMenuPrimitive.SubmenuTrigger>
   )
 }
@@ -184,13 +176,7 @@ function ContextMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute end-2">
         <ContextMenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -229,13 +215,7 @@ function ContextMenuRadioItem({
     >
       <span className="pointer-events-none absolute end-2">
         <ContextMenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui-rtl/dialog.tsx

@@ -4,8 +4,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui-rtl/button"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { XIcon } from "lucide-react"
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
@@ -70,13 +69,7 @@ function DialogContent({
               />
             }
           >
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}

apps/v4/examples/base/ui-rtl/dropdown-menu.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -122,14 +121,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="ms-auto rtl:rotate-180"
-      />
+      <ChevronRightIcon className="ms-auto rtl:rotate-180" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -183,13 +175,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -229,13 +215,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui-rtl/input-otp.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { OTPInput, OTPInputContext } from "input-otp"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { MinusIcon } from "lucide-react"
 
 function InputOTP({
   className,
@@ -78,13 +77,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <IconPlaceholder
-        lucide="MinusIcon"
-        tabler="IconMinus"
-        hugeicons="MinusSignIcon"
-        phosphor="MinusIcon"
-        remixicon="RiSubtractLine"
-      />
+      <MinusIcon />
     </div>
   )
 }

apps/v4/examples/base/ui-rtl/menubar.tsx

@@ -19,8 +19,7 @@ import {
 } from "@/examples/base/ui-rtl/dropdown-menu"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon } from "lucide-react"
 
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
@@ -131,13 +130,7 @@ function MenubarCheckboxItem({
     >
       <span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -171,13 +164,7 @@ function MenubarRadioItem({
     >
       <span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui-rtl/native-select.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,12 +26,7 @@ function NativeSelect({
         className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconSelector"
-        hugeicons="UnfoldMoreIcon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 select-none"
         aria-hidden="true"
         data-slot="native-select-icon"

apps/v4/examples/base/ui-rtl/navigation-menu.tsx

@@ -1,8 +1,7 @@
 import { cn } from "@/examples/base/lib/utils"
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
 import { cva } from "class-variance-authority"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
   align = "start",
@@ -71,12 +70,7 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{" "}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />

apps/v4/examples/base/ui-rtl/pagination.tsx

@@ -1,8 +1,11 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui-rtl/button"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -74,15 +77,7 @@ function PaginationPrevious({
       className={cn("ps-1.5!", className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        data-icon="inline-start"
-        className="rtl:rotate-180"
-      />
+      <ChevronLeftIcon data-icon="inline-start" className="rtl:rotate-180" />
       <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   )
@@ -101,15 +96,7 @@ function PaginationNext({
       {...props}
     >
       <span className="hidden sm:block">{text}</span>
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        data-icon="inline-end"
-        className="rtl:rotate-180"
-      />
+      <ChevronRightIcon data-icon="inline-end" className="rtl:rotate-180" />
     </PaginationLink>
   )
 }
@@ -128,13 +115,7 @@ function PaginationEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More pages</span>
     </span>
   )

apps/v4/examples/base/ui-rtl/radio-group.tsx

@@ -3,8 +3,7 @@
 import { cn } from "@/examples/base/lib/utils"
 import { Radio as RadioPrimitive } from "@base-ui/react/radio"
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CircleIcon } from "lucide-react"
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
@@ -30,14 +29,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
         data-slot="radio-group-indicator"
         className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <IconPlaceholder
-          lucide="CircleIcon"
-          tabler="IconCircle"
-          hugeicons="CircleIcon"
-          phosphor="CircleIcon"
-          remixicon="RiCircleLine"
-          className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current rtl:translate-x-1/2"
-        />
+        <CircleIcon className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current rtl:translate-x-1/2" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   )

apps/v4/examples/base/ui-rtl/select.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 const Select = SelectPrimitive.Root
 
@@ -49,14 +48,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <IconPlaceholder
-            lucide="ChevronDownIcon"
-            tabler="IconSelector"
-            hugeicons="UnfoldMoreIcon"
-            phosphor="CaretDownIcon"
-            remixicon="RiArrowDownSLine"
-            className="text-muted-foreground pointer-events-none size-4"
-          />
+          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -140,14 +132,7 @@ function SelectItem({
           <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
@@ -179,13 +164,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronUpIcon"
-        tabler="IconChevronUp"
-        hugeicons="ArrowUp01Icon"
-        phosphor="CaretUpIcon"
-        remixicon="RiArrowUpSLine"
-      />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpArrow>
   )
 }
@@ -203,13 +182,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-      />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownArrow>
   )
 }

apps/v4/examples/base/ui-rtl/sheet.tsx

@@ -4,8 +4,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui-rtl/button"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -70,13 +69,7 @@ function SheetContent({
               />
             }
           >
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}

apps/v4/examples/base/ui-rtl/sidebar.tsx

@@ -22,8 +22,7 @@ import {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -271,14 +270,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <IconPlaceholder
-        lucide="PanelLeftIcon"
-        tabler="IconLayoutSidebar"
-        hugeicons="SidebarLeftIcon"
-        phosphor="SidebarIcon"
-        remixicon="RiSideBarLine"
-        className="rtl:rotate-180"
-      />
+      <PanelLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )

apps/v4/examples/base/ui-rtl/sonner.tsx

@@ -1,10 +1,15 @@
 "use client"
 
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
@@ -13,56 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <IconPlaceholder
-            lucide="CircleCheckIcon"
-            tabler="IconCircleCheck"
-            hugeicons="CheckmarkCircle02Icon"
-            phosphor="CheckCircleIcon"
-            remixicon="RiCheckboxCircleLine"
-            className="size-4"
-          />
-        ),
-        info: (
-          <IconPlaceholder
-            lucide="InfoIcon"
-            tabler="IconInfoCircle"
-            hugeicons="InformationCircleIcon"
-            phosphor="InfoIcon"
-            remixicon="RiInformationLine"
-            className="size-4"
-          />
-        ),
-        warning: (
-          <IconPlaceholder
-            lucide="TriangleAlertIcon"
-            tabler="IconAlertTriangle"
-            hugeicons="Alert02Icon"
-            phosphor="WarningIcon"
-            remixicon="RiErrorWarningLine"
-            className="size-4"
-          />
-        ),
-        error: (
-          <IconPlaceholder
-            lucide="OctagonXIcon"
-            tabler="IconAlertOctagon"
-            hugeicons="MultiplicationSignCircleIcon"
-            phosphor="XCircleIcon"
-            remixicon="RiCloseCircleLine"
-            className="size-4"
-          />
-        ),
-        loading: (
-          <IconPlaceholder
-            lucide="Loader2Icon"
-            tabler="IconLoader"
-            hugeicons="Loading03Icon"
-            phosphor="SpinnerIcon"
-            remixicon="RiLoaderLine"
-            className="size-4 animate-spin"
-          />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {

apps/v4/examples/base/ui-rtl/spinner.tsx

@@ -1,15 +1,9 @@
 import { cn } from "@/examples/base/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <IconPlaceholder
-      lucide="Loader2Icon"
-      tabler="IconLoader"
-      hugeicons="Loading03Icon"
-      phosphor="SpinnerIcon"
-      remixicon="RiLoaderLine"
+    <Loader2Icon
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}

apps/v4/examples/base/ui/accordion.tsx

@@ -2,8 +2,7 @@
 
 import { cn } from "@/examples/base/lib/utils"
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
@@ -41,22 +40,12 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconChevronDown"
+        <ChevronDownIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowDown01Icon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
-        <IconPlaceholder
-          lucide="ChevronUpIcon"
-          tabler="IconChevronUp"
+        <ChevronUpIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowUp01Icon"
-          phosphor="CaretUpIcon"
-          remixicon="RiArrowUpSLine"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>

apps/v4/examples/base/ui/breadcrumb.tsx

@@ -2,8 +2,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -85,16 +84,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? (
-        <IconPlaceholder
-          lucide="ChevronRightIcon"
-          tabler="IconChevronRight"
-          hugeicons="ArrowRight01Icon"
-          phosphor="CaretRightIcon"
-          remixicon="RiArrowRightSLine"
-          className="cn-rtl-flip"
-        />
-      )}
+      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
     </li>
   )
 }
@@ -114,13 +104,7 @@ function BreadcrumbEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More</span>
     </span>
   )

apps/v4/examples/base/ui/calendar.tsx

@@ -3,6 +3,11 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button, buttonVariants } from "@/examples/base/ui/button"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
 import {
   DayPicker,
   getDefaultClassNames,
@@ -10,8 +15,6 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Calendar({
   className,
   classNames,
@@ -147,12 +150,7 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <IconPlaceholder
-                lucide="ChevronLeftIcon"
-                tabler="IconChevronLeft"
-                hugeicons="ArrowLeftIcon"
-                phosphor="CaretLeftIcon"
-                remixicon="RiArrowLeftSLine"
+              <ChevronLeftIcon
                 className={cn("cn-rtl-flip size-4", className)}
                 {...props}
               />
@@ -161,12 +159,7 @@ function Calendar({
 
           if (orientation === "right") {
             return (
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRightIcon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
+              <ChevronRightIcon
                 className={cn("cn-rtl-flip size-4", className)}
                 {...props}
               />
@@ -174,15 +167,7 @@ function Calendar({
           }
 
           return (
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDownIcon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className={cn("size-4", className)}
-              {...props}
-            />
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: ({ ...props }) => (

apps/v4/examples/base/ui/carousel.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/examples/base/ui/button"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -195,14 +194,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        className="cn-rtl-flip"
-      />
+      <ChevronLeftIcon className="cn-rtl-flip" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -232,14 +224,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip"
-      />
+      <ChevronRightIcon className="cn-rtl-flip" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

apps/v4/examples/base/ui/checkbox.tsx

@@ -2,8 +2,7 @@
 
 import { cn } from "@/examples/base/lib/utils"
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon } from "lucide-react"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
@@ -19,13 +18,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

apps/v4/examples/base/ui/combobox.tsx

@@ -10,8 +10,7 @@ import {
   InputGroupInput,
 } from "@/examples/base/ui/input-group"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
 
 const Combobox = ComboboxPrimitive.Root
 
@@ -31,14 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -51,14 +43,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
       className={cn(className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="XIcon"
-        tabler="IconX"
-        hugeicons="Cancel01Icon"
-        phosphor="XIcon"
-        remixicon="RiCloseLine"
-        className="pointer-events-none"
-      />
+      <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
   )
 }
@@ -168,14 +153,7 @@ function ComboboxItem({
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   )
@@ -277,14 +255,7 @@ function ComboboxChip({
           className="-ml-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
         >
-          <IconPlaceholder
-            lucide="XIcon"
-            tabler="IconX"
-            hugeicons="Cancel01Icon"
-            phosphor="XIcon"
-            remixicon="RiCloseLine"
-            className="pointer-events-none"
-          />
+          <XIcon className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>

apps/v4/examples/base/ui/command.tsx

@@ -11,8 +11,7 @@ import {
 } from "@/examples/base/ui/dialog"
 import { InputGroup, InputGroupAddon } from "@/examples/base/ui/input-group"
 import { Command as CommandPrimitive } from "cmdk"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, SearchIcon } from "lucide-react"
 
 function Command({
   className,
@@ -79,14 +78,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <IconPlaceholder
-            lucide="SearchIcon"
-            tabler="IconSearch"
-            hugeicons="SearchIcon"
-            phosphor="MagnifyingGlassIcon"
-            remixicon="RiSearchLine"
-            className="size-4 shrink-0 opacity-50"
-          />
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -166,14 +158,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="CheckIcon"
-        tabler="IconCheck"
-        hugeicons="Tick02Icon"
-        phosphor="CheckIcon"
-        remixicon="RiCheckLine"
-        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-      />
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   )
 }

apps/v4/examples/base/ui/context-menu.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
@@ -137,14 +136,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip ml-auto"
-      />
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
     </ContextMenuPrimitive.SubmenuTrigger>
   )
 }
@@ -184,13 +176,7 @@ function ContextMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -229,13 +215,7 @@ function ContextMenuRadioItem({
     >
       <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui/dialog.tsx

@@ -4,8 +4,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui/button"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { XIcon } from "lucide-react"
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
@@ -70,13 +69,7 @@ function DialogContent({
               />
             }
           >
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}

apps/v4/examples/base/ui/dropdown-menu.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -122,14 +121,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip ml-auto"
-      />
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -183,13 +175,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -229,13 +215,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui/input-otp.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { OTPInput, OTPInputContext } from "input-otp"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { MinusIcon } from "lucide-react"
 
 function InputOTP({
   className,
@@ -78,13 +77,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <IconPlaceholder
-        lucide="MinusIcon"
-        tabler="IconMinus"
-        hugeicons="MinusSignIcon"
-        phosphor="MinusIcon"
-        remixicon="RiSubtractLine"
-      />
+      <MinusIcon />
     </div>
   )
 }

apps/v4/examples/base/ui/menubar.tsx

@@ -19,8 +19,7 @@ import {
 } from "@/examples/base/ui/dropdown-menu"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon } from "lucide-react"
 
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
@@ -131,13 +130,7 @@ function MenubarCheckboxItem({
     >
       <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenuPrimitive.CheckboxItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -171,13 +164,7 @@ function MenubarRadioItem({
     >
       <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenuPrimitive.RadioItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

apps/v4/examples/base/ui/native-select.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,12 +26,7 @@ function NativeSelect({
         className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconSelector"
-        hugeicons="UnfoldMoreIcon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
         aria-hidden="true"
         data-slot="native-select-icon"

apps/v4/examples/base/ui/navigation-menu.tsx

@@ -1,8 +1,7 @@
 import { cn } from "@/examples/base/lib/utils"
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
 import { cva } from "class-variance-authority"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
   align = "start",
@@ -71,12 +70,7 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{" "}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />

apps/v4/examples/base/ui/pagination.tsx

@@ -1,8 +1,11 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui/button"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -74,15 +77,7 @@ function PaginationPrevious({
       className={cn("pl-1.5!", className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        data-icon="inline-start"
-        className="cn-rtl-flip"
-      />
+      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
       <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   )
@@ -101,15 +96,7 @@ function PaginationNext({
       {...props}
     >
       <span className="hidden sm:block">{text}</span>
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        data-icon="inline-end"
-        className="cn-rtl-flip"
-      />
+      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
     </PaginationLink>
   )
 }
@@ -128,13 +115,7 @@ function PaginationEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More pages</span>
     </span>
   )

apps/v4/examples/base/ui/radio-group.tsx

@@ -3,8 +3,7 @@
 import { cn } from "@/examples/base/lib/utils"
 import { Radio as RadioPrimitive } from "@base-ui/react/radio"
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CircleIcon } from "lucide-react"
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
@@ -30,14 +29,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
         data-slot="radio-group-indicator"
         className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <IconPlaceholder
-          lucide="CircleIcon"
-          tabler="IconCircle"
-          hugeicons="CircleIcon"
-          phosphor="CircleIcon"
-          remixicon="RiCircleLine"
-          className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current"
-        />
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   )

apps/v4/examples/base/ui/select.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 const Select = SelectPrimitive.Root
 
@@ -49,14 +48,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <IconPlaceholder
-            lucide="ChevronDownIcon"
-            tabler="IconSelector"
-            hugeicons="UnfoldMoreIcon"
-            phosphor="CaretDownIcon"
-            remixicon="RiArrowDownSLine"
-            className="text-muted-foreground pointer-events-none size-4"
-          />
+          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -140,14 +132,7 @@ function SelectItem({
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
@@ -179,13 +164,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronUpIcon"
-        tabler="IconChevronUp"
-        hugeicons="ArrowUp01Icon"
-        phosphor="CaretUpIcon"
-        remixicon="RiArrowUpSLine"
-      />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpArrow>
   )
 }
@@ -203,13 +182,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-      />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownArrow>
   )
 }

apps/v4/examples/base/ui/sheet.tsx

@@ -4,8 +4,7 @@ import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui/button"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -70,13 +69,7 @@ function SheetContent({
               />
             }
           >
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}

apps/v4/examples/base/ui/sidebar.tsx

@@ -22,8 +22,7 @@ import {
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -271,14 +270,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <IconPlaceholder
-        lucide="PanelLeftIcon"
-        tabler="IconLayoutSidebar"
-        hugeicons="SidebarLeftIcon"
-        phosphor="SidebarIcon"
-        remixicon="RiSideBarLine"
-        className="cn-rtl-flip"
-      />
+      <PanelLeftIcon className="cn-rtl-flip" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )

apps/v4/examples/base/ui/sonner.tsx

@@ -1,10 +1,15 @@
 "use client"
 
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
@@ -13,56 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <IconPlaceholder
-            lucide="CircleCheckIcon"
-            tabler="IconCircleCheck"
-            hugeicons="CheckmarkCircle02Icon"
-            phosphor="CheckCircleIcon"
-            remixicon="RiCheckboxCircleLine"
-            className="size-4"
-          />
-        ),
-        info: (
-          <IconPlaceholder
-            lucide="InfoIcon"
-            tabler="IconInfoCircle"
-            hugeicons="InformationCircleIcon"
-            phosphor="InfoIcon"
-            remixicon="RiInformationLine"
-            className="size-4"
-          />
-        ),
-        warning: (
-          <IconPlaceholder
-            lucide="TriangleAlertIcon"
-            tabler="IconAlertTriangle"
-            hugeicons="Alert02Icon"
-            phosphor="WarningIcon"
-            remixicon="RiErrorWarningLine"
-            className="size-4"
-          />
-        ),
-        error: (
-          <IconPlaceholder
-            lucide="OctagonXIcon"
-            tabler="IconAlertOctagon"
-            hugeicons="MultiplicationSignCircleIcon"
-            phosphor="XCircleIcon"
-            remixicon="RiCloseCircleLine"
-            className="size-4"
-          />
-        ),
-        loading: (
-          <IconPlaceholder
-            lucide="Loader2Icon"
-            tabler="IconLoader"
-            hugeicons="Loading03Icon"
-            phosphor="SpinnerIcon"
-            remixicon="RiLoaderLine"
-            className="size-4 animate-spin"
-          />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {

apps/v4/examples/base/ui/spinner.tsx

@@ -1,15 +1,9 @@
 import { cn } from "@/examples/base/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <IconPlaceholder
-      lucide="Loader2Icon"
-      tabler="IconLoader"
-      hugeicons="Loading03Icon"
-      phosphor="SpinnerIcon"
-      remixicon="RiLoaderLine"
+    <Loader2Icon
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}

apps/v4/examples/radix/ui-rtl/accordion.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Accordion as AccordionPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Accordion({
   className,
   ...props
@@ -48,22 +47,12 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconChevronDown"
+        <ChevronDownIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowDown01Icon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
-        <IconPlaceholder
-          lucide="ChevronUpIcon"
-          tabler="IconChevronUp"
+        <ChevronUpIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowUp01Icon"
-          phosphor="CaretUpIcon"
-          remixicon="RiArrowUpSLine"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>

apps/v4/examples/radix/ui-rtl/breadcrumb.tsx

@@ -1,9 +1,8 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 import { Slot } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
     <nav
@@ -82,16 +81,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? (
-        <IconPlaceholder
-          lucide="ChevronRightIcon"
-          tabler="IconChevronRight"
-          hugeicons="ArrowRight01Icon"
-          phosphor="CaretRightIcon"
-          remixicon="RiArrowRightSLine"
-          className="rtl:rotate-180"
-        />
-      )}
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
     </li>
   )
 }
@@ -111,13 +101,7 @@ function BreadcrumbEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More</span>
     </span>
   )

apps/v4/examples/radix/ui-rtl/calendar.tsx

@@ -3,6 +3,11 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button, buttonVariants } from "@/examples/radix/ui-rtl/button"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
 import {
   DayPicker,
   getDefaultClassNames,
@@ -10,8 +15,6 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Calendar({
   className,
   classNames,
@@ -147,12 +150,7 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <IconPlaceholder
-                lucide="ChevronLeftIcon"
-                tabler="IconChevronLeft"
-                hugeicons="ArrowLeftIcon"
-                phosphor="CaretLeftIcon"
-                remixicon="RiArrowLeftSLine"
+              <ChevronLeftIcon
                 className={cn("size-4 rtl:rotate-180", className)}
                 {...props}
               />
@@ -161,12 +159,7 @@ function Calendar({
 
           if (orientation === "right") {
             return (
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRightIcon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
+              <ChevronRightIcon
                 className={cn("size-4 rtl:rotate-180", className)}
                 {...props}
               />
@@ -174,15 +167,7 @@ function Calendar({
           }
 
           return (
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDownIcon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className={cn("size-4", className)}
-              {...props}
-            />
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: ({ ...props }) => (

apps/v4/examples/radix/ui-rtl/carousel.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/examples/radix/ui-rtl/button"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -195,14 +194,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        className="rtl:rotate-180"
-      />
+      <ChevronLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -232,14 +224,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="rtl:rotate-180"
-      />
+      <ChevronRightIcon className="rtl:rotate-180" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

apps/v4/examples/radix/ui-rtl/checkbox.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon } from "lucide-react"
 import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Checkbox({
   className,
   ...props
@@ -23,13 +22,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

apps/v4/examples/radix/ui-rtl/combobox.tsx

@@ -10,8 +10,7 @@ import {
   InputGroupInput,
 } from "@/examples/radix/ui-rtl/input-group"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
 
 const Combobox = ComboboxPrimitive.Root
 
@@ -31,14 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -51,14 +43,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
       className={cn(className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="XIcon"
-        tabler="IconX"
-        hugeicons="Cancel01Icon"
-        phosphor="XIcon"
-        remixicon="RiCloseLine"
-        className="pointer-events-none"
-      />
+      <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
   )
 }
@@ -170,14 +155,7 @@ function ComboboxItem({
           <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   )
@@ -279,14 +257,7 @@ function ComboboxChip({
           className="-ms-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
         >
-          <IconPlaceholder
-            lucide="XIcon"
-            tabler="IconX"
-            hugeicons="Cancel01Icon"
-            phosphor="XIcon"
-            remixicon="RiCloseLine"
-            className="pointer-events-none"
-          />
+          <XIcon className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>

apps/v4/examples/radix/ui-rtl/command.tsx

@@ -14,8 +14,7 @@ import {
   InputGroupAddon,
 } from "@/examples/radix/ui-rtl/input-group"
 import { Command as CommandPrimitive } from "cmdk"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, SearchIcon } from "lucide-react"
 
 function Command({
   className,
@@ -81,14 +80,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <IconPlaceholder
-            lucide="SearchIcon"
-            tabler="IconSearch"
-            hugeicons="SearchIcon"
-            phosphor="MagnifyingGlassIcon"
-            remixicon="RiSearchLine"
-            className="size-4 shrink-0 opacity-50"
-          />
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -168,14 +160,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="CheckIcon"
-        tabler="IconCheck"
-        hugeicons="Tick02Icon"
-        phosphor="CheckIcon"
-        remixicon="RiCheckLine"
-        className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-      />
+      <CheckIcon className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   )
 }

apps/v4/examples/radix/ui-rtl/context-menu.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function ContextMenu({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
@@ -120,14 +119,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="ms-auto rtl:rotate-180"
-      />
+      <ChevronRightIcon className="ms-auto rtl:rotate-180" />
     </ContextMenuPrimitive.SubTrigger>
   )
 }
@@ -170,13 +162,7 @@ function ContextMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute end-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -204,13 +190,7 @@ function ContextMenuRadioItem({
     >
       <span className="pointer-events-none absolute end-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}

apps/v4/examples/radix/ui-rtl/dialog.tsx

@@ -3,10 +3,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui-rtl/button"
+import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -74,13 +73,7 @@ function DialogContent({
               className="absolute end-2 top-2"
               size="icon-sm"
             >
-              <IconPlaceholder
-                lucide="XIcon"
-                tabler="IconX"
-                hugeicons="Cancel01Icon"
-                phosphor="XIcon"
-                remixicon="RiCloseLine"
-              />
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </DialogPrimitive.Close>

apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -109,13 +108,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -157,13 +150,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -245,14 +232,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="ms-auto rtl:rotate-180"
-      />
+      <ChevronRightIcon className="ms-auto rtl:rotate-180" />
     </DropdownMenuPrimitive.SubTrigger>
   )
 }

apps/v4/examples/radix/ui-rtl/input-otp.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { OTPInput, OTPInputContext } from "input-otp"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { MinusIcon } from "lucide-react"
 
 function InputOTP({
   className,
@@ -78,13 +77,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <IconPlaceholder
-        lucide="MinusIcon"
-        tabler="IconMinus"
-        hugeicons="MinusSignIcon"
-        phosphor="MinusIcon"
-        remixicon="RiSubtractLine"
-      />
+      <MinusIcon />
     </div>
   )
 }

apps/v4/examples/radix/ui-rtl/menubar.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { Menubar as MenubarPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Menubar({
   className,
   ...props
@@ -133,13 +132,7 @@ function MenubarCheckboxItem({
     >
       <span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -167,13 +160,7 @@ function MenubarRadioItem({
     >
       <span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -255,14 +242,7 @@ function MenubarSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="ms-auto size-4 rtl:rotate-180"
-      />
+      <ChevronRightIcon className="ms-auto size-4 rtl:rotate-180" />
     </MenubarPrimitive.SubTrigger>
   )
 }

apps/v4/examples/radix/ui-rtl/native-select.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,12 +26,7 @@ function NativeSelect({
         className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconSelector"
-        hugeicons="UnfoldMoreIcon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 select-none"
         aria-hidden="true"
         data-slot="native-select-icon"

apps/v4/examples/radix/ui-rtl/navigation-menu.tsx

@@ -1,10 +1,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function NavigationMenu({
   className,
   children,
@@ -74,12 +73,7 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{" "}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />

apps/v4/examples/radix/ui-rtl/pagination.tsx

@@ -1,8 +1,11 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui-rtl/button"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -73,15 +76,7 @@ function PaginationPrevious({
       className={cn("ps-1.5!", className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        data-icon="inline-start"
-        className="rtl:rotate-180"
-      />
+      <ChevronLeftIcon data-icon="inline-start" className="rtl:rotate-180" />
       <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   )
@@ -100,15 +95,7 @@ function PaginationNext({
       {...props}
     >
       <span className="hidden sm:block">{text}</span>
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        data-icon="inline-end"
-        className="rtl:rotate-180"
-      />
+      <ChevronRightIcon data-icon="inline-end" className="rtl:rotate-180" />
     </PaginationLink>
   )
 }
@@ -127,13 +114,7 @@ function PaginationEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More pages</span>
     </span>
   )

apps/v4/examples/radix/ui-rtl/radio-group.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CircleIcon } from "lucide-react"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function RadioGroup({
   className,
   ...props
@@ -36,14 +35,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <IconPlaceholder
-          lucide="CircleIcon"
-          tabler="IconCircle"
-          hugeicons="CircleIcon"
-          phosphor="CircleIcon"
-          remixicon="RiCircleLine"
-          className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current rtl:translate-x-1/2"
-        />
+        <CircleIcon className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current rtl:translate-x-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

apps/v4/examples/radix/ui-rtl/select.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
@@ -51,14 +50,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconSelector"
-          hugeicons="UnfoldMoreIcon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
-          className="text-muted-foreground pointer-events-none size-4"
-        />
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -131,14 +123,7 @@ function SelectItem({
     >
       <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-            className="pointer-events-none"
-          />
+          <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -172,13 +157,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronUpIcon"
-        tabler="IconChevronUp"
-        hugeicons="ArrowUp01Icon"
-        phosphor="CaretUpIcon"
-        remixicon="RiArrowUpSLine"
-      />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpButton>
   )
 }
@@ -196,13 +175,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-      />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownButton>
   )
 }

apps/v4/examples/radix/ui-rtl/sheet.tsx

@@ -3,10 +3,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui-rtl/button"
+import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
@@ -75,13 +74,7 @@ function SheetContent({
               className="absolute end-3 top-3"
               size="icon-sm"
             >
-              <IconPlaceholder
-                lucide="XIcon"
-                tabler="IconX"
-                hugeicons="Cancel01Icon"
-                phosphor="XIcon"
-                remixicon="RiCloseLine"
-              />
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </SheetPrimitive.Close>

apps/v4/examples/radix/ui-rtl/sidebar.tsx

@@ -20,10 +20,9 @@ import {
   TooltipTrigger,
 } from "@/examples/radix/ui-rtl/tooltip"
 import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
 import { Slot } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
@@ -270,14 +269,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <IconPlaceholder
-        lucide="PanelLeftIcon"
-        tabler="IconLayoutSidebar"
-        hugeicons="SidebarLeftIcon"
-        phosphor="SidebarIcon"
-        remixicon="RiSideBarLine"
-        className="rtl:rotate-180"
-      />
+      <PanelLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )

apps/v4/examples/radix/ui-rtl/sonner.tsx

@@ -1,10 +1,15 @@
 "use client"
 
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
@@ -13,56 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <IconPlaceholder
-            lucide="CircleCheckIcon"
-            tabler="IconCircleCheck"
-            hugeicons="CheckmarkCircle02Icon"
-            phosphor="CheckCircleIcon"
-            remixicon="RiCheckboxCircleLine"
-            className="size-4"
-          />
-        ),
-        info: (
-          <IconPlaceholder
-            lucide="InfoIcon"
-            tabler="IconInfoCircle"
-            hugeicons="InformationCircleIcon"
-            phosphor="InfoIcon"
-            remixicon="RiInformationLine"
-            className="size-4"
-          />
-        ),
-        warning: (
-          <IconPlaceholder
-            lucide="TriangleAlertIcon"
-            tabler="IconAlertTriangle"
-            hugeicons="Alert02Icon"
-            phosphor="WarningIcon"
-            remixicon="RiErrorWarningLine"
-            className="size-4"
-          />
-        ),
-        error: (
-          <IconPlaceholder
-            lucide="OctagonXIcon"
-            tabler="IconAlertOctagon"
-            hugeicons="MultiplicationSignCircleIcon"
-            phosphor="XCircleIcon"
-            remixicon="RiCloseCircleLine"
-            className="size-4"
-          />
-        ),
-        loading: (
-          <IconPlaceholder
-            lucide="Loader2Icon"
-            tabler="IconLoader"
-            hugeicons="Loading03Icon"
-            phosphor="SpinnerIcon"
-            remixicon="RiLoaderLine"
-            className="size-4 animate-spin"
-          />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {

apps/v4/examples/radix/ui-rtl/spinner.tsx

@@ -1,15 +1,9 @@
 import { cn } from "@/examples/radix/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <IconPlaceholder
-      lucide="Loader2Icon"
-      tabler="IconLoader"
-      hugeicons="Loading03Icon"
-      phosphor="SpinnerIcon"
-      remixicon="RiLoaderLine"
+    <Loader2Icon
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}

apps/v4/examples/radix/ui/accordion.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Accordion as AccordionPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Accordion({
   className,
   ...props
@@ -48,22 +47,12 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconChevronDown"
+        <ChevronDownIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowDown01Icon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
-        <IconPlaceholder
-          lucide="ChevronUpIcon"
-          tabler="IconChevronUp"
+        <ChevronUpIcon
           data-slot="accordion-trigger-icon"
-          hugeicons="ArrowUp01Icon"
-          phosphor="CaretUpIcon"
-          remixicon="RiArrowUpSLine"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>

apps/v4/examples/radix/ui/breadcrumb.tsx

@@ -1,9 +1,8 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 import { Slot } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
     <nav
@@ -82,16 +81,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? (
-        <IconPlaceholder
-          lucide="ChevronRightIcon"
-          tabler="IconChevronRight"
-          hugeicons="ArrowRight01Icon"
-          phosphor="CaretRightIcon"
-          remixicon="RiArrowRightSLine"
-          className="cn-rtl-flip"
-        />
-      )}
+      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
     </li>
   )
 }
@@ -111,13 +101,7 @@ function BreadcrumbEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More</span>
     </span>
   )

apps/v4/examples/radix/ui/calendar.tsx

@@ -3,6 +3,11 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button, buttonVariants } from "@/examples/radix/ui/button"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
 import {
   DayPicker,
   getDefaultClassNames,
@@ -10,8 +15,6 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Calendar({
   className,
   classNames,
@@ -147,12 +150,7 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <IconPlaceholder
-                lucide="ChevronLeftIcon"
-                tabler="IconChevronLeft"
-                hugeicons="ArrowLeftIcon"
-                phosphor="CaretLeftIcon"
-                remixicon="RiArrowLeftSLine"
+              <ChevronLeftIcon
                 className={cn("cn-rtl-flip size-4", className)}
                 {...props}
               />
@@ -161,12 +159,7 @@ function Calendar({
 
           if (orientation === "right") {
             return (
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRightIcon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
+              <ChevronRightIcon
                 className={cn("cn-rtl-flip size-4", className)}
                 {...props}
               />
@@ -174,15 +167,7 @@ function Calendar({
           }
 
           return (
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDownIcon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className={cn("size-4", className)}
-              {...props}
-            />
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: ({ ...props }) => (

apps/v4/examples/radix/ui/carousel.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/examples/radix/ui/button"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -195,14 +194,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        className="cn-rtl-flip"
-      />
+      <ChevronLeftIcon className="cn-rtl-flip" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -232,14 +224,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip"
-      />
+      <ChevronRightIcon className="cn-rtl-flip" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

apps/v4/examples/radix/ui/checkbox.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon } from "lucide-react"
 import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Checkbox({
   className,
   ...props
@@ -23,13 +22,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

apps/v4/examples/radix/ui/combobox.tsx

@@ -10,8 +10,7 @@ import {
   InputGroupInput,
 } from "@/examples/radix/ui/input-group"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
 
 const Combobox = ComboboxPrimitive.Root
 
@@ -31,14 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -51,14 +43,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
       className={cn(className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="XIcon"
-        tabler="IconX"
-        hugeicons="Cancel01Icon"
-        phosphor="XIcon"
-        remixicon="RiCloseLine"
-        className="pointer-events-none"
-      />
+      <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
   )
 }
@@ -170,14 +155,7 @@ function ComboboxItem({
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <IconPlaceholder
-          lucide="CheckIcon"
-          tabler="IconCheck"
-          hugeicons="Tick02Icon"
-          phosphor="CheckIcon"
-          remixicon="RiCheckLine"
-          className="pointer-events-none"
-        />
+        <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   )
@@ -279,14 +257,7 @@ function ComboboxChip({
           className="-ml-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
         >
-          <IconPlaceholder
-            lucide="XIcon"
-            tabler="IconX"
-            hugeicons="Cancel01Icon"
-            phosphor="XIcon"
-            remixicon="RiCloseLine"
-            className="pointer-events-none"
-          />
+          <XIcon className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>

apps/v4/examples/radix/ui/command.tsx

@@ -11,8 +11,7 @@ import {
 } from "@/examples/radix/ui/dialog"
 import { InputGroup, InputGroupAddon } from "@/examples/radix/ui/input-group"
 import { Command as CommandPrimitive } from "cmdk"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { CheckIcon, SearchIcon } from "lucide-react"
 
 function Command({
   className,
@@ -78,14 +77,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <IconPlaceholder
-            lucide="SearchIcon"
-            tabler="IconSearch"
-            hugeicons="SearchIcon"
-            phosphor="MagnifyingGlassIcon"
-            remixicon="RiSearchLine"
-            className="size-4 shrink-0 opacity-50"
-          />
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -165,14 +157,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="CheckIcon"
-        tabler="IconCheck"
-        hugeicons="Tick02Icon"
-        phosphor="CheckIcon"
-        remixicon="RiCheckLine"
-        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-      />
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   )
 }

apps/v4/examples/radix/ui/context-menu.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function ContextMenu({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
@@ -120,14 +119,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip ml-auto"
-      />
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
     </ContextMenuPrimitive.SubTrigger>
   )
 }
@@ -170,13 +162,7 @@ function ContextMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -204,13 +190,7 @@ function ContextMenuRadioItem({
     >
       <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}

apps/v4/examples/radix/ui/dialog.tsx

@@ -3,10 +3,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui/button"
+import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -74,13 +73,7 @@ function DialogContent({
               className="absolute top-2 right-2"
               size="icon-sm"
             >
-              <IconPlaceholder
-                lucide="XIcon"
-                tabler="IconX"
-                hugeicons="Cancel01Icon"
-                phosphor="XIcon"
-                remixicon="RiCloseLine"
-              />
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </DialogPrimitive.Close>

apps/v4/examples/radix/ui/dropdown-menu.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -109,13 +108,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -157,13 +150,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -245,14 +232,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip ml-auto"
-      />
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
     </DropdownMenuPrimitive.SubTrigger>
   )
 }

apps/v4/examples/radix/ui/input-otp.tsx

@@ -3,8 +3,7 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { OTPInput, OTPInputContext } from "input-otp"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { MinusIcon } from "lucide-react"
 
 function InputOTP({
   className,
@@ -78,13 +77,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <IconPlaceholder
-        lucide="MinusIcon"
-        tabler="IconMinus"
-        hugeicons="MinusSignIcon"
-        phosphor="MinusIcon"
-        remixicon="RiSubtractLine"
-      />
+      <MinusIcon />
     </div>
   )
 }

apps/v4/examples/radix/ui/menubar.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 import { Menubar as MenubarPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Menubar({
   className,
   ...props
@@ -133,13 +132,7 @@ function MenubarCheckboxItem({
     >
       <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -167,13 +160,7 @@ function MenubarRadioItem({
     >
       <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-          />
+          <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -255,14 +242,7 @@ function MenubarSubTrigger({
       {...props}
     >
       {children}
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        className="cn-rtl-flip ml-auto size-4"
-      />
+      <ChevronRightIcon className="cn-rtl-flip ml-auto size-4" />
     </MenubarPrimitive.SubTrigger>
   )
 }

apps/v4/examples/radix/ui/native-select.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { ChevronDownIcon } from "lucide-react"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,12 +26,7 @@ function NativeSelect({
         className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconSelector"
-        hugeicons="UnfoldMoreIcon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
         aria-hidden="true"
         data-slot="native-select-icon"

apps/v4/examples/radix/ui/navigation-menu.tsx

@@ -1,10 +1,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function NavigationMenu({
   className,
   children,
@@ -74,12 +73,7 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{" "}
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
+      <ChevronDownIcon
         className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />

apps/v4/examples/radix/ui/pagination.tsx

@@ -1,8 +1,11 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui/button"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -73,15 +76,7 @@ function PaginationPrevious({
       className={cn("pl-1.5!", className)}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronLeftIcon"
-        tabler="IconChevronLeft"
-        hugeicons="ArrowLeft01Icon"
-        phosphor="CaretLeftIcon"
-        remixicon="RiArrowLeftSLine"
-        data-icon="inline-start"
-        className="cn-rtl-flip"
-      />
+      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
       <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   )
@@ -100,15 +95,7 @@ function PaginationNext({
       {...props}
     >
       <span className="hidden sm:block">{text}</span>
-      <IconPlaceholder
-        lucide="ChevronRightIcon"
-        tabler="IconChevronRight"
-        hugeicons="ArrowRight01Icon"
-        phosphor="CaretRightIcon"
-        remixicon="RiArrowRightSLine"
-        data-icon="inline-end"
-        className="cn-rtl-flip"
-      />
+      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
     </PaginationLink>
   )
 }
@@ -127,13 +114,7 @@ function PaginationEllipsis({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="MoreHorizontalIcon"
-        tabler="IconDots"
-        hugeicons="MoreHorizontalCircle01Icon"
-        phosphor="DotsThreeIcon"
-        remixicon="RiMoreLine"
-      />
+      <MoreHorizontalIcon />
       <span className="sr-only">More pages</span>
     </span>
   )

apps/v4/examples/radix/ui/radio-group.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CircleIcon } from "lucide-react"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function RadioGroup({
   className,
   ...props
@@ -36,14 +35,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <IconPlaceholder
-          lucide="CircleIcon"
-          tabler="IconCircle"
-          hugeicons="CircleIcon"
-          phosphor="CircleIcon"
-          remixicon="RiCircleLine"
-          className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current"
-        />
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

apps/v4/examples/radix/ui/select.tsx

@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
@@ -51,14 +50,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <IconPlaceholder
-          lucide="ChevronDownIcon"
-          tabler="IconSelector"
-          hugeicons="UnfoldMoreIcon"
-          phosphor="CaretDownIcon"
-          remixicon="RiArrowDownSLine"
-          className="text-muted-foreground pointer-events-none size-4"
-        />
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -131,14 +123,7 @@ function SelectItem({
     >
       <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <IconPlaceholder
-            lucide="CheckIcon"
-            tabler="IconCheck"
-            hugeicons="Tick02Icon"
-            phosphor="CheckIcon"
-            remixicon="RiCheckLine"
-            className="pointer-events-none"
-          />
+          <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -172,13 +157,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronUpIcon"
-        tabler="IconChevronUp"
-        hugeicons="ArrowUp01Icon"
-        phosphor="CaretUpIcon"
-        remixicon="RiArrowUpSLine"
-      />
+      <ChevronUpIcon />
     </SelectPrimitive.ScrollUpButton>
   )
 }
@@ -196,13 +175,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <IconPlaceholder
-        lucide="ChevronDownIcon"
-        tabler="IconChevronDown"
-        hugeicons="ArrowDown01Icon"
-        phosphor="CaretDownIcon"
-        remixicon="RiArrowDownSLine"
-      />
+      <ChevronDownIcon />
     </SelectPrimitive.ScrollDownButton>
   )
 }

apps/v4/examples/radix/ui/sheet.tsx

@@ -3,10 +3,9 @@
 import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui/button"
+import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
@@ -75,13 +74,7 @@ function SheetContent({
               className="absolute top-3 right-3"
               size="icon-sm"
             >
-              <IconPlaceholder
-                lucide="XIcon"
-                tabler="IconX"
-                hugeicons="Cancel01Icon"
-                phosphor="XIcon"
-                remixicon="RiCloseLine"
-              />
+              <XIcon />
               <span className="sr-only">Close</span>
             </Button>
           </SheetPrimitive.Close>

apps/v4/examples/radix/ui/sidebar.tsx

@@ -20,10 +20,9 @@ import {
   TooltipTrigger,
 } from "@/examples/radix/ui/tooltip"
 import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
 import { Slot } from "radix-ui"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
@@ -270,14 +269,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <IconPlaceholder
-        lucide="PanelLeftIcon"
-        tabler="IconLayoutSidebar"
-        hugeicons="SidebarLeftIcon"
-        phosphor="SidebarIcon"
-        remixicon="RiSideBarLine"
-        className="cn-rtl-flip"
-      />
+      <PanelLeftIcon className="cn-rtl-flip" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )

apps/v4/examples/radix/ui/sonner.tsx

@@ -1,10 +1,15 @@
 "use client"
 
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
@@ -13,56 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <IconPlaceholder
-            lucide="CircleCheckIcon"
-            tabler="IconCircleCheck"
-            hugeicons="CheckmarkCircle02Icon"
-            phosphor="CheckCircleIcon"
-            remixicon="RiCheckboxCircleLine"
-            className="size-4"
-          />
-        ),
-        info: (
-          <IconPlaceholder
-            lucide="InfoIcon"
-            tabler="IconInfoCircle"
-            hugeicons="InformationCircleIcon"
-            phosphor="InfoIcon"
-            remixicon="RiInformationLine"
-            className="size-4"
-          />
-        ),
-        warning: (
-          <IconPlaceholder
-            lucide="TriangleAlertIcon"
-            tabler="IconAlertTriangle"
-            hugeicons="Alert02Icon"
-            phosphor="WarningIcon"
-            remixicon="RiErrorWarningLine"
-            className="size-4"
-          />
-        ),
-        error: (
-          <IconPlaceholder
-            lucide="OctagonXIcon"
-            tabler="IconAlertOctagon"
-            hugeicons="MultiplicationSignCircleIcon"
-            phosphor="XCircleIcon"
-            remixicon="RiCloseCircleLine"
-            className="size-4"
-          />
-        ),
-        loading: (
-          <IconPlaceholder
-            lucide="Loader2Icon"
-            tabler="IconLoader"
-            hugeicons="Loading03Icon"
-            phosphor="SpinnerIcon"
-            remixicon="RiLoaderLine"
-            className="size-4 animate-spin"
-          />
-        ),
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {

apps/v4/examples/radix/ui/spinner.tsx

@@ -1,15 +1,9 @@
 import { cn } from "@/examples/radix/lib/utils"
-
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <IconPlaceholder
-      lucide="Loader2Icon"
-      tabler="IconLoader"
-      hugeicons="Loading03Icon"
-      phosphor="SpinnerIcon"
-      remixicon="RiLoaderLine"
+    <Loader2Icon
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}

apps/v4/scripts/build-registry.mts

@@ -6,8 +6,10 @@ import { registrySchema } from "shadcn/schema"
 import {
   createStyleMap,
   transformDirection,
+  transformIcons,
   transformStyle,
 } from "shadcn/utils"
+import { Project, ScriptKind } from "ts-morph"
 
 import { getAllBlocks } from "@/lib/blocks"
 import { legacyStyles } from "@/registry/_legacy-styles"
@@ -22,6 +24,11 @@ const WHITELISTED_STYLES = ["new-york-v4"]
 // Collect paths for batch prettier formatting at the end.
 const prettierPaths: string[] = []
 
+// Create a ts-morph project for icon transformations.
+const iconProject = new Project({
+  compilerOptions: {},
+})
+
 function getStylesToBuild() {
   const stylesToBuild: { name: string; title: string }[] = [...legacyStyles]
 
@@ -507,6 +514,27 @@ async function buildConfig() {
   prettierPaths.push(outputPath)
 }
 
+async function applyIconTransform(content: string, filename: string) {
+  const sourceFile = iconProject.createSourceFile(filename, content, {
+    scriptKind: ScriptKind.TSX,
+    overwrite: true,
+  })
+
+  // Create a minimal config with just iconLibrary.
+  // transformIcons only uses config.iconLibrary, so we can safely cast this.
+  type TransformIconsConfig = Parameters<typeof transformIcons>[0]["config"]
+  const config = { iconLibrary: "lucide" } as TransformIconsConfig
+
+  await transformIcons({
+    sourceFile,
+    config,
+    filename,
+    raw: content,
+  })
+
+  return sourceFile.getText()
+}
+
 async function copyUIToExamples() {
   const defaultStyle = "nova"
   const directories = ["ui", "lib", "hooks"]
@@ -545,6 +573,12 @@ async function copyUIToExamples() {
             new RegExp(`@/registry/${sourceStyle}/`, "g"),
             `@/examples/${base.name}/`
           )
+
+          // Transform icons for TSX files.
+          if (file.endsWith(".tsx")) {
+            content = await applyIconTransform(content, file)
+          }
+
           await fs.writeFile(targetPath, content)
         })
       )

apps/v4/scripts/build-test-app.mts

@@ -348,7 +348,9 @@ async function applyIconTransform(content: string, filename: string) {
   })
 
   // Create a minimal config with just iconLibrary.
-  const config = { iconLibrary: "lucide" } as { iconLibrary: string }
+  // transformIcons only uses config.iconLibrary, so we can safely cast this.
+  type TransformIconsConfig = Parameters<typeof transformIcons>[0]["config"]
+  const config = { iconLibrary: "lucide" } as TransformIconsConfig
 
   await transformIcons({
     sourceFile,