Icons

The kit’s glyphs as one set: drawn on a 16 grid with a 1.6 line, round ends, in currentColor, so an icon prints in whatever ink it sits in, in either finish.

Press a glyph to copy its markup. The size switch scales the whole grid; the line stays a tenth of the box.

• 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.