AI / Design Communication & Image Prompting
Write an icon system spec
Fix grid, stroke, and radius as numbers so the next 20 icons need no debate
I am defining an icon system for [product]. More than 20 icons will be drawn, possibly by a contractor. Write a spec that can be executed directly: 1) Canvas and live area, for example a 24×24 canvas with a 20 live area and 2 of bleed on each side; 2) Stroke width values, and whether they scale with the icon; 3) Corner radius and line-cap treatment; 4) Optical weight compensation — how circles, squares, and triangles are adjusted at the same size; 5) Naming and export, including sizes, formats, and dark-mode variants; 6) A five-item acceptance checklist, each one tickable. Finish with one correct and one incorrect example described in words, naming where people most often get it wrong. Do not write adjectives like clean and consistent.
How to use
Every number in the spec should answer "why not the value next to it"; otherwise the contractor will pick one for you.
Good for
- Icons were gathered from several sources and now number 12; the set has to grow to 30 and may go to a contractor — numbers first, or there is no way to accept what comes back.
- The design system is being handed over and icons are the only part without a written spec — this page is what stops developers and outside illustrators from asking every time.
Not for
- There are only three to five icons and all come from one official library — the spec costs more than it saves; use the library's rules.
- The brand language is still moving, with the primary colour and radius in flux — the icon spec will be reworked with it, so settle the brand first.
Example
Input
A SaaS admin product with 12 existing line icons, mixed 1.5px and 2px strokes, two canvas sizes at 24px and 20px, and dark mode done by inverting colours
What you get
It locks the set to a 24×24 canvas, a 20 live area, and a 1.75px stroke that does not scale with size; radius 2 with round caps; circles and triangles get their bounding box enlarged by 4% to compensate for optical weight. Dark mode stops inverting and gets its own variant: 90% white strokes with shadows removed. The last checklist item is that the silhouette is still recognisable at 16px, and it gives a wrong example too — upscaling a 20px icon to 24px drags the stroke to 2.1px.
Common mistakes
- Specifying a 2px stroke without a live area or bleed — two people following it will produce icons that differ in visual size by more than 10%.
- Making the spec cover every context, marketing pages and the app and the admin console alike — loosen the constraints and you no longer have a spec.
Try tweaking it like this
- Ask for a 16px optical-size spec instead — small icons need heavier strokes and simpler shapes; it is a second rule set, not a scale factor.
- Add a section on aligning icons beside text — the most common failure in implementation, and usually missing from the spec.