Icons

Icons are used minimally in our brand, instead using typographical solutions where possible.

Icons

Iconography

The main use of icons is to provide quick universal context, such as arrows. Where icons are required, they should be accompanied by text wherever possible. This combination proved more successful in user testing.
We use icons from Google Material design icons set

Icon style:
Fill: Yes
Weight: 400
Grade: 200
Optical size: 40px

Size:
Use the icon size that is relative to the element its paired with.

Check circle  Menu  Vector                                                                     Cancel  Menu  Vector

Alignment:

Menu  Vector                                                                            Menu  Vector  

Check circle  Center-align icons when                                     Cancel  Don’t baseline-align icons
        they’re next to text.                                                       to the text.

Touch target:

Vector

A 24px icon centered in a touch target

Do's

  • Use icons only where they add value to the content content

  • Use relevant icons to the text they are supporting

Don'ts

  • Use icons without supporting text

  • Use confusing icons

  • Use icons outside of the supported library