Icon

Installation

uvx django_shadcn@latest add icon

Components that use icons pull this one in on their own, so most of the time it is already installed.

Usage

<c-icon name="search" />

The name is the icon name as it appears on lucide.dev, in kebab- case. Only the icons shipped with the library are available — see the list below.

Examples

Sizing

<c-icon name="search" class="size-4" />
<c-icon name="search" class="size-6" />
<c-icon name="search" class="size-8" />

Color

<c-icon name="check" class="size-5 text-muted-foreground" />

Inside a button

<c-button variant="outline">
  <c-icon name="search" class="size-4" />
  Search
</c-button>

Reacting to state

<c-icon
    name='chevron-down'
    class='size-5 transition-transform'
    x-bind:class=\"{ 'rotate-180': open }\"
/>

Accessibility

<!-- decorative, next to a visible label -->
<c-icon name="x" class="size-5" aria-hidden="true" />

<!-- carries the meaning on its own -->
<c-icon name="search" class="size-5" role="img" aria-label="Search" />

Available icons

The library ships only the icons its components use. Each one lives in its own file under icon/ and is generated from lucide, never written by hand.

Adding an icon

Reference it in your markup with <c-icon name="..."> and run the generator. It reads the icon names straight out of the templates, downloads what is missing from lucide and drops whatever nothing references anymore.

uv run python scripts/generate_icons.py

License

Icons come from Lucide, under the ISC license. The full notice ships with the component, in icon/LICENSE.