ICON SYSTEM

Iconography

Icons are the visual throughline from product to brand. Our icon library helps strengthen and reaffirm our commitment to consistency and dependability.

Iconography Grid

Principles

All icons should be designed under the 3 tier grid system developed by the VI team. There are 3 grids (128, 56, 28) to be used accordingly when developing these. The idea is to have a flexible system where we can add meaning to our main icons.

Overall Guide

  • Single line icons with 2px stroke, minimal look
  • Style balanced between rounded corners (2px) and sharp angles
  • Style balanced between cut lines (gap of 2px, 4px or 6px) and continuous lines
  • All the other spacing in icons must be of 2px, 4px or 6px
  • All overlaying (in front) shapes must have a knockout (6px) - for tier 1 icons
  • All icons for tier 2 & 3 must have a knockout (6px)
  • Do not use filled shapes

Naming Convention: 128px / nameoficon

Primary Icons (128px grid - Tier 01)

Primary Icons are the main set of icons based upon all the other tiers will be joined to in order to add any other meaning. These icons can be used on their own and straight away (e.g. cellphone)

Primary Icons

Secondary Icons (56px grid - Tier 02)

Secondary Icons are used to add a second level of meaning to primary icons. For example you can have a leaf to add to any primary icon the meaning of 'sustainability'. These icons should not be used isolated, their main purpose is to be to add to tier 01.

Secondary Icons

Tertiary Icons (24px grid - Tier 03)

Tertiary Icons are used to add a third simpler level of meaning to primary icons. For example you can have an exclamation mark to add the meaning of "urgency" and these icons should not be used isolated, their main purpose is to add to tier 01 icons.

Tertiary Icons

Download Resources

Access color swatches, palettes, and implementation guides

Figma Source