Foundations

Icons

The system glyph set. Every icon is an inline SVG on a 20×20 grid — 1.5px strokes, round caps and joins, currentColor so it inherits text color, filled shapes only for playback glyphs. Click any icon to copy its markup.

Usage

Size icons with .b-icon (1.25rem), .b-icon--sm (1rem) or .b-icon--lg (1.75rem) instead of width/height attributes. Icons inherit currentColor, so they recolor with the component state — a tinted button tints its glyph for free. Decorative icons take aria-hidden="true"; icon-only buttons carry the label via aria-label.

Symbol effects

A glyph that answers an action is the cheapest feedback an interface has. Add one class to the icon rather than to the control, so a button keeps its own states. The division that matters is whether an effect plays once or repeats: one acknowledges something that just happened, the other describes something still happening. A repeating effect used as an acknowledgement is just noise.

the one-shot effects have already run — press to see them

--bounce --scale --wiggle --replace --pulse --rotate --breathe

Class	Runs	Use it for
`.b-icon--bounce`	once	An action landed — sent, saved, added.
`.b-icon--scale`	once	A press was received, before the result is known.
`.b-icon--wiggle`	once	A refusal — wrong password, locked row.
`.b-icon--replace`	once	The glyph itself changed: play became pause.
`.b-icon--pulse`	repeats	Waiting on something outside your control.
`.b-icon--rotate`	repeats	Work in progress with no known end.
`.b-icon--breathe`	repeats	Live and listening — recording, connected.

<button class="b-btn b-btn--primary">
  <svg class="b-icon b-icon--sm b-icon--bounce">…</svg>
  Send again
</button>

Library

Fifty-nine core glyphs. Click to copy the SVG — paste it inline and add .b-icon. New icons must keep the grid, stroke and naming conventions; propose them here before using them in product.