Icon set skill

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