Icons – Tsunami

Icons come from Lucide

Lucide icon font version 1.61.0 (lucide.dev, ISC license), bundled in a single font file, fonts/lucide.woff2. It has 2,191 names for 1,926 glyphs (some glyphs have several names).

An icon is sized by its box and takes the text colour

An icon is one glyph from an icon font, so its size comes from font-size. By default it is 1.15em of the surrounding text, or set data-size to sm (16px), lg (20px) or xl (24px). The colour comes from the text color (currentColor), so it is the accent colour in a link and grey in .link[data-variant="muted"].

<div class="stack" data-direction="row" data-gap="lg">
  <i class="icon icon-webhook" data-size="sm" aria-hidden="true"></i>
  <i class="icon icon-webhook" aria-hidden="true"></i>
  <i class="icon icon-webhook" data-size="lg" aria-hidden="true"></i>
  <i class="icon icon-webhook" data-size="xl" aria-hidden="true"></i>
  <a href="#" aria-label="Webhooks"><i class="icon icon-webhook" data-size="xl" aria-hidden="true"></i></a>
  <a class="link" data-variant="muted" href="#" aria-label="Webhooks"><i class="icon icon-webhook" data-size="xl" aria-hidden="true"></i></a>
</div>

In a button

The button spaces the icon and text with gap. No margin needed.

<button type="button" class="btn"><i class="icon icon-plus" aria-hidden="true"></i>Add product</button>

Attributes

Attribute / element	Values	Description
`class`	`icon icon-{name}`	Both classes are required. Pick the name from the list below (Lucide).
`data-size`	`sm`, `lg`, `xl` (omit = follow the text, default)	16, 20 or 24px. Defaults to 1.15em of the surrounding text.
`aria-hidden`	`true`	Always set. Icons are decorative. Put text or an aria-label on the button or link instead.
`color`	`currentColor`	No data-variant. The colour comes from the parent's color.
`@include icon.glyph(name)`	Sass mixin	Draws an icon in another component's ::before / ::after.

All icons

Lucide 1.61.0 (ISC). Some icons have several names. Search by name or tag. Click an icon to copy its HTML.