Icon

<sa-icon name="rocket"/>
<sa-icon name="message-circle-heart"/>
<sa-icon name="banana"/>
<sa-icon name="timer"/>

Usage

<sa-icon name="..."/>

To find the name of an icon, go to the Lucide icons page and search for the icon you want to use. When you hover over the icon, the name is displayed in a tooltip.

Lucide is the built-in icon set. To add your own icons, or register a whole icon pack, see Icons.

Examples

Size

The default width and height of an icon is 24px. You can change the size of an icon using the Tailwind size classes.

<sa-icon name="rocket" class="size-4"/>
<sa-icon name="rocket"/>
<sa-icon name="rocket" class="size-8"/>
<sa-icon name="rocket" class="size-12"/>

Color

Change the color of an icon by setting the font color.

<sa-icon name="rocket" class="size-8 text-red-500"/>
<sa-icon name="rocket" class="size-8 text-amber-500"/>
<sa-icon name="rocket" class="size-8 text-lime-500"/>
<sa-icon name="rocket" class="size-8 text-emerald-500"/>

Stroke width

By default, icons use a stroke width of 2 px. The stroke width can be changed using the stroke-width attribute.

<sa-icon name="rocket" class="size-8"/>
<sa-icon name="rocket" class="size-8" stroke-width="1"/>

API Reference

<sa-icon>

Renders an inline <svg> element. Any <svg> attributes you supply take precedence over the icon's default attributes.