Reference

Icons — Lucide & Iconoir

Both collections are integrated through one CSS-mask utility, so every icon inherits currentColor and scales with font size — no build step, no per-icon markup differences. Lucide is ISC-licensed; Iconoir is MIT.

Usage

Add the .ico mask utility plus a named class from icon-sets.css (lu-* for Lucide, io-* for Iconoir).

<!-- in <head> -->
<link rel="stylesheet" href="styles/icon-sets.59f6d96c.css">

<!-- anywhere -->
<i class="ico lu-coffee" aria-hidden="true"></i>   <!-- Lucide -->
<i class="ico io-coffee" aria-hidden="true"></i>   <!-- Iconoir -->

Lucide set

coffee search settings user trash bell heart star home mail calendar download code arrow check x plus lock bookmark eye

Iconoir set

coffee search settings user trash bell heart star home mail calendar download github arrow x

Sizing & colour

Size with .ico--sm/lg/xl or any font-size. Colour follows text colour, so semantic colours come from the surrounding element.

In components

Because icons inherit colour, they drop straight into buttons, badges, alerts, inputs, and lists.

Buttons

Badges

Verified 3 alerts Pro

Input with leading icon

Alert with icon

Brew saved

Your recipe is stored locally.

Icon list

  • Single-origin sourcing
  • Weekly roast schedule
  • Tasting-note digest

Accessibility

  • Decorative icons (next to a text label): mark aria-hidden="true" so they aren't announced twice.
  • Icon-only controls: give the button an aria-label describing the action.
  • Never colour alone: pair a status icon with text or an accessible name.
  • Production note: these hot-link CDN SVGs (needs network + http). Vendor them locally for offline/perf, or use lucide-react / iconoir-react (tree-shakeable) in bundled apps.