Icon

Inline icons with colors, links, and hover legends.

Icon showcase controls

Color

Icon

This glyph plays it cool
This one knows the way to docs
And; secrets squeak.

Usage#

Choose a registered icon ID with name and a palette with color.

Every adventure starts somewhere :Icon{name="rocket" color="sky"}.

Add href to transform an icon into a link and an ariaLabel for accessibility.

:Icon{name="book" href="/docs/frontend/components/card-and-grid" ariaLabel="Read the card guide"}

Use legend instead of href for a hover-triggered legend instead of a link.

:Icon{name="lightbulb" color="amber" legend="Start with one small idea."}

hrefDefault undefined: string; Internal or HTTP(S) destination. Requires an accessible label.

legendDefault undefined: string; Supplementary infotip text. Cannot be combined with href.

ariaLabelDefault undefined: string; Accessible description. Omit when the unlinked icon is decorative.