Icons

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<!-- Beside words: decorative, so it is hidden from screen readers -->
<button class="tui-key">
  <svg class="tui-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
       stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="7" cy="7" r="4.2"/><path d="m10.2 10.2 3.3 3.3"/>
  </svg>
  Search
</button>

<!-- Alone, carrying the meaning: an image with a name -->
<svg class="tui-icon" viewBox="0 0 16 16" … role="img" aria-label="Warning">…</svg>

<!-- In an icon key: the button is named, the glyph is not -->
<button class="tui-key tui-key--icon" aria-label="Copy" data-tip="Copy">…</button>

import { icon, ICONS, ICON_NAMES } from '/kit/kit.mjs';

button.insertAdjacentHTML('afterbegin', icon('search'));            // aria-hidden
link.insertAdjacentHTML('beforeend', icon('external', { size: 'sm' }));
status.innerHTML = icon('warning', { label: 'Warning' });           // role="img"

ICON_NAMES.length;   // 42
ICONS.check;         // '<path d="m3.5 8.6 3 3 6-6.6"/>'  the inside of the <svg>

Needs kit.css and kit.mjs. How to install the kit.

• An icon beside words is decoration: aria-hidden="true", so the words are read once. An icon that stands alone is role="img" with a label that says what it means, not what it looks like.
• On an icon key it is the button that is named (aria-label), and the glyph stays hidden.
• An icon never carries state by tint: a lit lamp beside it, or a word, says “on”, “unread” or “failed”.
• A glyph inherits the ink of its parent, so it keeps the text’s contrast in both finishes and follows the disabled 45%.
• The grid’s cells are real buttons with a name (“Copy search”); the glyph in each is hidden.

Every glyph is a few strokes on a 16 × 16 grid with a 2 unit margin, drawn with one line weight (1.6), round ends and joins, and no fill except a dot. The set is data, not sprites: ICONS maps a name to the inside of the SVG and icon() wraps it in the same attributes every time, which is what keeps a page of them level. The sidebar’s category glyphs are the same hand on a 20 grid with a 1.5 line (97 of them, from app/icons.mjs), shown here beneath the interface set.