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.