Iconography

Nusa UI uses Tabler Icons as the default icon library for new work. Lucide remains available for legacy components and examples, but new components, blocks, and product surfaces should import icons from @tabler/icons-react.

Default Library

Use Tabler for all new code:

Copyimport { IconSearch, IconSettings } from "@tabler/icons-react"

Keep Lucide only when maintaining older components that already depend on it:

Copyimport { SearchIcon } from "lucide-react"

Do not mix Tabler and Lucide inside one component, navigation group, card, or toolbar. Pick one visual language per surface so stroke weight, shape, and proportion stay consistent.

Component Rules

• Use Tabler icons with the Icon* naming convention, for example IconSearch.
• Use data-icon="inline-start" or data-icon="inline-end" when an icon is inside Button.
• Do not add manual sizing to icons inside Nusa UI components that already size nested SVGs.
• Use size-* only for standalone icons outside component-controlled slots.
• Use semantic colors like text-muted-foreground, text-primary, or text-destructive.
• Do not use raw color classes for icons in reusable components.

Sizes

For buttons, prefer component-controlled sizing:

Copy<Button>
  <IconSearch data-icon="inline-start" />
  Search
</Button>

For standalone usage:

Copy<IconSettings className="size-5 text-muted-foreground" />

Stroke

Tabler defaults to a 2 stroke width. Keep the default for product UI. Only change stroke or strokeWidth for one-off illustration or brand artwork, not for reusable components.

Migration Policy

Nusa UI supports two icon libraries during the migration window:

When updating an existing component, migrate all icons in that component from Lucide to Tabler in the same change. Avoid partial migration inside a single file.

shadcn Config

The project components.json uses:

Copy{
  "iconLibrary": "tabler"
}

This keeps future shadcn-driven work aligned with Tabler while preserving lucide-react for backward compatibility.