Crafted for consistent alignment and visual appeal.
Best Practices
- Support, don’t replace → Icons enhance meaning but can’t replace clear labels.
- Be clear & consistent → Icons should be recognizable and visually uniform.
- Use sparingly → Too many icons create clutter instead of clarity.
- Navigation & Menus → assist recognition but don't replace labels unless universal
- Buttons & Actions → unclear or ambiguous icons (without labels) introduce friction.
- Status & Feedback → icons can signal states (errors, warnings, success)
Size Square
Square Icons precisely occupy a 10x10 unit zone within a 16x16 bounding box, ensuring consistent design alignment.
Attachment Specificity
Composite icons convey terms of higher specificity. Placement of the attachments should be at the bottom right of the icon.
Insert Specificity
If the surface of an icon is large enough simply inserting a qualifier is the preferred option to increase specificity.
Circle Overshoot
Circular icons require a ¼ unit overshoot to match the optical size of a square.
Irregular Shapes Overshoot
Irregular shapes may overshoot the safe space. The exact amount depends on the shape. But should be an increment of a fraction of unit. (¼ or ½)
Optical Size
The stroke weight ideally is one unit. But can increase at a .5 increment.
Weights Stroke
The stroke weight variations increase at a .5 increment.