Icons

1512 glyphs from Phosphor at regular weight, MIT licensed — the payload of <al-icon>, not components of their own. Search matches names and tags, so “settings” finds gear. Click any tile to copy its element.

No icon matches that name or tag.

Registration is explicit and per-glyph. That is the whole reason the set can be this large without costing anything: the glyphs you never name are never bundled.

import { caretDown, magnifyingGlass }
  from '@southleft/al-web-components/components/icon/glyphs';
import { registerIcons }
  from '@southleft/al-web-components/components/icon/registry';

// Tree-shakeable, synchronous, and SSR-safe: the glyph is in
// the bundle, so the box is never empty on first paint.
registerIcons({
  'caret-down': caretDown,
  'magnifying-glass': magnifyingGlass,
});

<al-icon name="caret-down" size="sm"></al-icon>

<!-- iconTitle becomes the accessible name. Set it when the
     icon carries meaning ALONE; leave it off beside visible
     text and the glyph is correctly hidden from assistive
     technology instead of read twice. -->
<al-icon name="magnifying-glass" iconTitle="Search"></al-icon>

If icon names come from data you do not control, opt into the loader once — and only then.

// Only when icon names come from data you do not control.
// ~13 KB gzipped, one request per glyph, and it cannot
// render server-side — so it is an opt-in, not the default.
import '@southleft/al-web-components/components/icon/lazy';

The original <al-icon-*> elements still work and now render Phosphor artwork, but they are deprecated. The alias table is consulted only after a lookup against the catalog above MISSES, so a legacy name can never shadow a real Phosphor icon — which is what the warning on one row below is about.

Rendered under project/southleft.css. An icon inherits currentColor, so it takes whatever content colour the theme resolves at the element it sits in.