Icon

Stable

SVG icon wrapper component powered by the Lucide icon webfont. Icons inherit font size and color from their container.

API Reference

Attribute	Description	Type	Default
`name`	Name of the Lucide icon to display (e.g. `user`, `home`, `settings`)	string	`—`
`size`	Explicit size override applied as a CSS class (e.g. `size-5`). When empty, the icon inherits its size from `font-size` via the parent.	string	`""`
`class`	Additional Tailwind classes applied to the icon element — use `text-{size}` for sizing and `text-{color}` for color	string	`""`

Decorative icons: icons used alongside visible text labels are decorative and rendered with aria-hidden="true" so screen readers skip them and only announce the text.

Standalone icons: when an icon is the only interactive content (e.g. an icon-only button), add an aria-label to the parent button element so its purpose is announced.

Color contrast: avoid using color alone to convey information — pair colored icons with visible text labels or tooltips for users who cannot perceive color differences.

Examples

Usage


<c-icon name="user" />
<c-icon name="home" class="text-primary text-2xl" />

Basic Icons

<c-icon name="user" />
<c-icon name="home" />
<c-icon name="settings" />
<c-icon name="bell" />

Sizing

text-sm

text-base

text-xl

text-2xl

text-3xl

text-4xl

<c-icon name="star" class="text-sm" />
<c-icon name="star" class="text-xl" />
<c-icon name="star" class="text-3xl" />
<c-icon name="star" class="text-4xl" />

Colors

<c-icon name="heart" class="text-primary text-2xl" />
<c-icon name="heart" class="text-secondary text-2xl" />
<c-icon name="heart" class="text-success text-2xl" />
<c-icon name="heart" class="text-error text-2xl" />

Icons with Text

Completed Tasks

Pending Reviews

Failed Jobs

<div class="flex items-center gap-2">
  <c-icon name="check-circle" class="text-success" />
  <span>Completed Tasks</span>
</div>