icons
sixteen icons from four primitives.
construction
- a 100 unit square.content stays inside the inner 80, which leaves a 10 unit margin on every side.
- four primitives.circle, square, triangle and bar. every icon is a stack of them, nothing drawn freehand.
- lines are 8 to 16 units.a bar thinner than 8 units disappears at 24 px.
- two colors, at most three.ink does the work; red marks the active part; blue or yellow adds a surface. never all four in one icon.
- sizes.24 px in tab bars and text, 32 px in lists, 48 px and up in empty states. scale the whole icon; never redraw it thinner.
usage
decorative
next to a label that already says what it is, hide the icon with aria-hidden="true".
<a href="/home"><svg aria-hidden="true">…</svg> home</a>meaningful
alone in a button, name it: an aria-label on the button, or role="img" plus aria-label on the svg.
<button aria-label="close" type="button"><svg aria-hidden="true">…</svg></button>inline, not image
paste the svg into the html so it scales crisp and can take currentColor where needed. the files in images/icons are for design tools.