12 days ago•

Get a working reference for icon design principles that survives real product constraints

Views

3.8K

Copies

788

Likes

638

Comments

Copy rate

21.0%

Prompt

You are an icon designer who has shipped systems for [product_reference]. Write a reference document for a team building a new icon set for a [product_type] product at [size_range].

Cover:

1. **Purpose First** — the three questions every icon must answer before being designed
2. **Grid System** — the base pixel grid, keyline shapes (square, circle, rectangle, diamond), and safe margins
3. **Stroke & Weight** — stroke width rules by icon size, corner radius logic, terminal treatment
4. **Optical Correction** — where mathematical centering fails and how to fix it
5. **Consistency Patterns** — how "action" icons relate to "object" icons, and when they shouldn't
6. **Metaphor Library** — naming conventions, metaphor pitfalls (culturally specific, outdated, technical)
7. **Motion Readiness** — how to design an icon that can animate without breaking
8. **Accessibility** — size minimums, contrast requirements, paired text guidance, aria patterns

Ground every rule in a real example. No principles floating free of practice.

Customise this prompt

Fill in 3 variables to personalise this prompt

Product Reference

Product Type

Size Range

Preview

You are an icon designer who has shipped systems for [product_reference]. Write a reference document for a team building a new icon set for a [product_type] product at [size_range]. Cover: 1. **Purpose First** — the three questions every icon must answer before being designed 2. **Grid System** — the base pixel grid, keyline shapes (square, circle, rectangle, diamond), and safe margins 3. **Stroke & Weight** — stroke width rules by icon size, corner radius logic, terminal treatment 4. **Optical Correction** — where mathematical centering fails and how to fix it 5. **Consistency Patterns** — how "action" icons relate to "object" icons, and when they shouldn't 6. **Metaphor Library** — naming conventions, metaphor pitfalls (culturally specific, outdated, technical) 7. **Motion Readiness** — how to design an icon that can animate without breaking 8. **Accessibility** — size minimums, contrast requirements, paired text guidance, aria patterns Ground every rule in a real example. No principles floating free of practice.

Example output

# Icon Design Reference — Meridian System ## Purpose First Before pixel one, an icon must answer three questions: 1. What is the one noun or verb this icon represents? If two answers fit, the icon is trying to do too much. 2. Where does it appear and how small does it get? A 16px inline icon has different constraints than a 48px empty state. 3. Does text accompany it? If yes, the icon can carry less meaning. If no, the icon must carry all of it. A trash icon in a toolbar doesn't need to explain itself. A trash icon as the only affordance in an empty state does. Design accordingly. ## Grid System Meridian uses a 24x24 base grid with a 2px inner padding, giving every icon a 20x20 working area. Four keyline shapes ensure visual consistency: the 20x20 square, the 20x20 circle, the 18x14 horizontal rectangle, and the 16x16 diamond rotated 45 degrees. Every icon is built primarily on one keyline; a "document" icon uses the rectangle, a "user" icon uses the circle and square combined, a "warning" uses the diamond. Safe margins are sacred — no shape may touch the outer 2px frame even if it would "balance" visually. ## Stroke & Weight Stroke width scales with icon size: 1.5px at 16px, 2px at 24px, 2.5px at 32px, 3px at 48px. Corners use consistent rounding: 1px at 16-24px sizes, 1.5px at 32-48px. Terminals are flat, not rounded — a rounded terminal multiplies visual weight when crowded. Exception: emotional icons (heart, smile, celebration) may use rounded terminals to reinforce softness, but the exception must be documented in the set's deviation log. ## Optical Correction Mathematical centering lies. A triangle pointing right, centered in a 24x24 box by geometry, will appear shifted left — because the eye weighs the triangle by its center of mass, not its bounding box. Shift it 1-2px right. Circles appear smaller than squares at the same bounding size; scale them up by 4-6% to match perceived weight. The letter-shape in a document icon needs more breathing room above than below. Test every icon at 16px against a text baseline — if it appears to float or sink, correct it. ## Consistency Patterns Action icons (verbs) use a more dynamic posture — diagonal lines, asymmetry, directional weight. Object icons (nouns) sit calmly — symmetrical, bounded, quiet. When an action operates on an object, the object form leads and the action appears as a small modifier (the "+" on a document icon, the lock on a folder). Never combine two objects into a hybrid — a "document with a gear" is two icons pretending to be one. Use adjacency instead. ## Metaphor Library Names follow noun-first, modifier-last: `document`, `document-lock`, `document-download`. Avoid metaphors that drift: floppy disk for save, envelope for email are still legible; a rotary phone for call is not. Test any culturally specific metaphor (a ladybug for "bug", a turkey for "celebrate") against your global audience. Never use a flag as a metaphor for anything other than a country. ## Motion Readiness An icon that will animate must be built with named paths: the stroke that will draw itself, the shape that will scale, the glyph that will rotate. Avoid compound paths in any icon that might animate — a merged shape can't be individually addressed. Keep stroke widths consistent across states: a play-to-pause transform only works if both icons use the same stroke math. ## Accessibility Minimum icon size at rest: 16px. Minimum tap target: 44x44 including padding. Contrast: the icon against its background must hit 3:1 minimum (WCAG AA for non-text). When an icon has no adjacent text label, pair it with aria-label; when it has a visible label, mark it aria-hidden so it isn't double-announced. Critical actions (delete, send, destructive) must always have a text label — never icon-only. An icon the user cannot describe to a teammate on the phone is a failed icon.

Prompt

Customise this prompt

Example output

Related prompts