iconography-system
an icon system is what makes 200 icons feel like they were made by one person.
decisions to make upfront
style
- outline (stroked, transparent fill) — clean, neutral, scales well at small sizes
- filled (solid, no stroke) — confident, less detailed, reads at small sizes
- duotone (two-color, hierarchy within the icon) — adds depth, needs more design effort
- hand-drawn / illustrated — strong personality, harder to scale to large counts
pick one as primary. you can add a second for emphasis (e.g. outline default, filled for active state).
grid
design every icon on the same grid. 24px is the most common base.
within the grid, leave consistent optical padding (usually 2px on each side, so the visual lives in a 20x20 area inside a 24x24 frame).
stroke
if outline style:
- consistent stroke width across the set (1.5px or 2px at 24px is typical)
- consistent stroke caps (round or butt, not mixed)
- consistent stroke joins (round or miter, not mixed)
fill rules
- closed shapes have one fill color
- transparent areas where the icon's meaning depends on the negative space
optical alignment
mathematically centered icons often look off. center optically:
- a circle and a triangle of the same bounding box don't have the same visual center
- icons with vertical emphasis (arrows up/down) center differently than horizontal ones
sizing tier
xs: 16px — inline with body text, dense ui
sm: 20px — buttons, list items
md: 24px — default
lg: 32px — feature areas
xl: 48px+ — empty states, illustrations
icons at xs may need a redrawn variant (less detail, thicker stroke proportionally).
what to avoid
- mixing visual metaphors (some icons are objects, some are concepts, some are actions, without a system)
- using the same metaphor for different meanings (e.g. a gear for "settings" and "system status")
- icons that require text to be understood (you have a labeling problem, not an icon problem)
- inconsistent perspective (some icons in flat front view, some in isometric)
- starting from a free icon set and adding to it (the new ones will always feel different)
quality bar
every icon should pass:
- recognizable at xs (16px)
- consistent stroke and optical weight at all sizes
- aligned to grid
- works in both light and dark mode
- works at the brand's accent color and at neutral text color
1---2name: iconography-system3description: Design an icon system including stroke, fill, sizes, grid, and consistency rules. Use whenever the user mentions icon system, iconography, icon set, icon library, icon design, or needs icons that feel like they belong together.4---56# iconography-system78an icon system is what makes 200 icons feel like they were made by one person.910## decisions to make upfront1112### style1314- **outline** (stroked, transparent fill) — clean, neutral, scales well at small sizes15- **filled** (solid, no stroke) — confident, less detailed, reads at small sizes16- **duotone** (two-color, hierarchy within the icon) — adds depth, needs more design effort17- **hand-drawn / illustrated** — strong personality, harder to scale to large counts1819pick one as primary. you can add a second for emphasis (e.g. outline default, filled for active state).2021### grid2223design every icon on the same grid. 24px is the most common base.2425within the grid, leave consistent optical padding (usually 2px on each side, so the visual lives in a 20x20 area inside a 24x24 frame).2627### stroke2829if outline style:30- consistent stroke width across the set (1.5px or 2px at 24px is typical)31- consistent stroke caps (round or butt, not mixed)32- consistent stroke joins (round or miter, not mixed)3334### fill rules3536- closed shapes have one fill color37- transparent areas where the icon's meaning depends on the negative space3839### optical alignment4041mathematically centered icons often look off. center optically:4243- a circle and a triangle of the same bounding box don't have the same visual center44- icons with vertical emphasis (arrows up/down) center differently than horizontal ones4546## sizing tier4748```49xs: 16px — inline with body text, dense ui50sm: 20px — buttons, list items51md: 24px — default52lg: 32px — feature areas53xl: 48px+ — empty states, illustrations54```5556icons at xs may need a redrawn variant (less detail, thicker stroke proportionally).5758## what to avoid5960- mixing visual metaphors (some icons are objects, some are concepts, some are actions, without a system)61- using the same metaphor for different meanings (e.g. a gear for "settings" and "system status")62- icons that require text to be understood (you have a labeling problem, not an icon problem)63- inconsistent perspective (some icons in flat front view, some in isometric)64- starting from a free icon set and adding to it (the new ones will always feel different)6566## quality bar6768every icon should pass:6970- recognizable at xs (16px)71- consistent stroke and optical weight at all sizes72- aligned to grid73- works in both light and dark mode74- works at the brand's accent color and at neutral text color
dragoon0x