Key insights
- Optical sizing beats math: circular and organic shapes need to sit 5–8% larger than squares to read the same size — equal pixel dimensions make round icons look small.
- Grid alignment keeps icons crisp: snap every shape to a 24px grid (16px for dense UI), because sub-pixel drift blurs edges and kills sharpness.
- Stroke consistency is the fastest tell of quality: hold a single 2px weight across the whole set — mixed weights look like four different icon libraries mashed together.
- Bounding box stays fixed even when the shape changes: give every icon the same container so sizing reads even and toolbars stay legible.
- Fill vs outline is a set-wide commitment, not a per-icon choice: pick one strategy and stick to it — a random mix has no visual rule holding it together.
Do / Don't
- Do: Scale circular and organic icons 5–8% larger than square ones so they optically match
- Do: Snap every icon to a 24px grid (16px for dense UI) to keep edges crisp
- Do: Hold one stroke weight — 2px — across the entire set
- Don't: Size icons by raw math — equal boxes make round shapes look small
- Don't: Mix fill and outline styles at random; commit to one strategy for the set
- Don't: Let icons float at loose sizes — inconsistent bounding boxes make toolbars unreadable
