new-api/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md

Icons

Always use the project's configured iconLibrary for imports. Check the iconLibrary field from project context: lucide → lucide-react, tabler → @tabler/icons-react, etc. Never assume lucide-react.

---

Icons in Button use data-icon attribute

Add data-icon="inline-start" (prefix) or data-icon="inline-end" (suffix) to the icon. No sizing classes on the icon.

Incorrect:

<Button>
  <SearchIcon className="mr-2 size-4" />
  Search
</Button>

Correct:

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

<Button>
  Next
  <ArrowRightIcon data-icon="inline-end"/>
</Button>

---

No sizing classes on icons inside components

Components handle icon sizing via CSS. Don't add size-4, w-4 h-4, or other sizing classes to icons inside Button, DropdownMenuItem, Alert, Sidebar*, or other shadcn components. Unless the user explicitly asks for custom icon sizes.

Incorrect:

<Button>
  <SearchIcon className="size-4" data-icon="inline-start" />
  Search
</Button>

<DropdownMenuItem>
  <SettingsIcon className="mr-2 size-4" />
  Settings
</DropdownMenuItem>

Correct:

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

<DropdownMenuItem>
  <SettingsIcon />
  Settings
</DropdownMenuItem>

---

Pass icons as component objects, not string keys

Use icon={CheckIcon}, not a string key to a lookup map.

Incorrect:

const iconMap = {
  check: CheckIcon,
  alert: AlertIcon,
}

function StatusBadge({ icon }: { icon: string }) {
  const Icon = iconMap[icon]
  return <Icon />
}

<StatusBadge icon="check" />

Correct:

// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
import { CheckIcon } from "lucide-react"

function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
  return <Icon />
}

<StatusBadge icon={CheckIcon} />