Icon set design brief
A structured template for commissioning or building a cohesive icon family. Covers grid, stroke weight, corner radius, and semantic categories so every icon ships consistent.
1. Grid & keylines
Define the base canvas — typically 24×24 dp. Establish live area (20×20), trim area (22×22), and center keylines for circles, squares, and diagonals. Every glyph must snap to the pixel grid at 1× and 2× scale.
2. Stroke & fill rules
Pick one visual language: outlined (2 px stroke, rounded caps/joins), filled (solid shapes, 1 px inner padding), or duotone. Document the stroke weight hierarchy — primary strokes at 2 px, detail strokes at 1 px. Never mix outlined and filled within the same family.
3. Corner radius
Set a system-wide radius token. 2 px exterior corners with 1 px interior corners is a safe default. Avoid fully rounded (pill) shapes unless the brand explicitly calls for it — they reduce visual distinction at small sizes.
4. Semantic categories
Group icons by meaning, not by shape. Standard buckets: navigation (arrows, chevrons, hamburger), actions (add, edit, delete, share), objects (document, folder, user, calendar), status (check, warning, error, info), and brand (logo marks, social). Each category gets a dedicated artboard file.
5. Naming convention
Use kebab-case, semantic-first naming: arrow-up-right.svg, not icon-03.svg. Include size and style variants as suffixes when exporting: trash-24-outlined.svg.
6. Delivery checklist
- SVG source files (1×, 2× PNG fallbacks)
- Icon font or sprite sheet for web
- Figma / Sketch library with component overrides
- Usage guidelines doc (minimum touch target 44×44 px)
- Accessibility: all icons paired with visible labels or aria-label
Pro tip: Ship a “stress test” page that renders every icon at 16, 20, 24, and 32 px on light and dark backgrounds. If any glyph breaks, iterate before the set leaves draft.