Icon

Displays an SVG icon from the Lucide icon toolkit.

<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.

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"/>