Icons
Heroicons v2 (MIT): 324 icons in outline and solid styles. The drawings are embedded in the package; no icon font, CDN or extra package is needed, and only the icons you use end up on the page.
Basic usage
Pick an icon with name; the names are listed in the gallery at the end of the page. The default style is outline and the default size is 5 (20px). An undefined name throws an error, so typos do not go unnoticed.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="home" />
<acun:icon name="map-pin" />
<acun:icon name="truck" />
<acun:icon name="users" />
<acun:icon name="document-text" />
</div>| Prop | Values |
|---|---|
name | Heroicons name (e.g. map-pin, truck) |
Sizes
size is a Tailwind size-* value: 4 is 16px, 5 is 20px, 6 is 24px and 8 is 32px. Because the class is generated from this value, it must be present in your app's compiled CSS; if you choose a value the package never uses (e.g. 20), it must also be written in your templates so the class gets generated.
<div class="flex flex-wrap items-end gap-5">
<acun:icon name="bell" size="4" />
<acun:icon name="bell" />
<acun:icon name="bell" size="6" />
<acun:icon name="bell" size="8" />
<acun:icon name="bell" size="10" />
</div>| Prop | Values |
|---|---|
size | 4 | 5 | 6 | 8 | 10 … |
Outline and solid
solid draws the icon in the filled style. Use it for selected tabs, active states or icons that read better at small sizes; do not mix the two styles in the same list.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="star" size="6" />
<acun:icon name="star" size="6" solid class="text-amber-500" />
<acun:icon name="check-circle" size="6" />
<acun:icon name="check-circle" size="6" solid class="text-emerald-600" />
</div>| Prop | Values |
|---|---|
solid | true | false |
Stroke width
stroke sets the stroke width, in the outline style only; the default is 1.8. Thin strokes (1.2–1.5) look more balanced at large sizes, and thick strokes (2–2.5) at small sizes.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="map-pin" size="10" stroke="1.2" />
<acun:icon name="map-pin" size="10" />
<acun:icon name="map-pin" size="10" stroke="2.5" />
</div>| Prop | Values |
|---|---|
stroke | 1.2 | 1.5 | 1.8 | 2 | 2.5 |
Color
An icon takes its color from the text color (currentColor). For a different color, add a text-* class; icons inside buttons and links match their color automatically.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="trash" size="6" class="text-red-600" />
<acun:icon name="check-circle" size="6" class="text-emerald-600" />
<acun:icon name="exclamation-triangle" size="6" class="text-amber-500" />
<acun:icon name="bell" size="6" class="text-brand-600 dark:text-brand-400" />
<acun:button size="sm"><acun:icon name="plus" size="4" />New Order</acun:button>
</div>| Prop | Values |
|---|---|
class | text-* color class |
Accessibility
Icons are hidden from screen readers by default (aria-hidden), because there is usually text next to them. For an icon that carries meaning on its own, set label; this adds role="img" and aria-label. In icon-only buttons, put the label on the button (aria-label), not on the icon.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="shield-check" size="6" label="Verified customer" class="text-emerald-600" />
<acun:button variant="ghost" size="icon" aria-label="Print"><acun:icon name="printer" /></acun:button>
</div>| Prop | Values |
|---|---|
label | Name read out by screen readers |
All icons (324)
<acun:icon name="home" />
<acun:icon name="home" solid />Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
name | — | Required. Icon name; an undefined name throws an error |
size | 5 | Tailwind size-* value (5 = 20px) |
solid | false | Filled style |
stroke | 1.8 | Stroke width (outline only) |
label | null | When set, role="img" and aria-label; otherwise aria-hidden |