---
name: icon-set
description: Draws a consistent set of icons, one stroke, one grid and one style of metaphor, as a sheet to review and as clean SVG ready for code. Use for UI icon sets, app and feature icons, and pictograms.
---
# Icon set

## Read first
Icons.md for the product, the style, the colours and the icons by name, in order; any style reference wired in.

## One system for every icon
- Each icon drawn on a 24 × 24 grid with 2 px of padding, at the same optical size, so a circle, a square and a tall shape look equally big.
- One stroke weight (Icons.md's, 1.5 or 2 px at 24 px) with the same caps and joins, the same corner radius and the same amount of detail in every icon.
- One point of view: all flat and front-on, unless Icons.md asks for another.
- Simple, familiar metaphors, one idea per icon, recognisable at 16 px, with no words or letters inside.
- Colour as Icons.md says: one colour, or one accent used identically in every icon (the same kind of shape at the same size in the same role, such as one small filled dot), never a dot in one and a bar or badge in another.
- At most three or four strokes or shapes per icon, with space between them: nothing crowds, touches or overlaps that shouldn't.

## Sheet (4:3)
The icons in Icons.md's order on a clean grid (four across, three down for twelve), each centred in an equal cell on a plain background, large enough to judge, with its name in small type under it.

## SVG icons
- One SVG that shows the whole set as the sheet does: each icon a 24 × 24 <symbol> with an id from its name (icon-wallet), placed with <use> in its cell and labelled under it, so the file previews as the sheet and each icon can be copied out.
- Drawn with paths, lines, rects and circles: stroke="currentColor" at the set's width, round caps and joins, fill="none" except where a part is meant to be solid, on whole or half pixels so lines stay crisp.
- The wired sheet's metaphors redrawn cleanly to this spec, with the accent the same in every icon; check that each still reads at 16 px.

## Avoid
Mixed stroke weights or angles, detail that disappears at 16 px, clip-art, gradients and shadows, letters standing in for pictures, and icons of different sizes.