Overview
The UI and product benefit icon sets represent actions and ideas at a glance, they afford interactivity and help draw attention to important information.
Both sets are drawn from the same master grid and follow the same visual principles of the rounded button language for visual continuity.
The structure
We use a 40px base grid to draw our icons. Use the grid as the basic guidelines for your artwork.
This grid has four key shapes to follow and some basic grid guides.
Key shapes
When creating icons there are four key shapes
to work towards. This gives us flexibility to create what we need to communicate. More importantly
it gives us an established relationship between elements so that they look and feel like they are
part of the same group. Use the shape that would best suit the icon you are drawing.
Guides
The guides help us to determine the vertical and horizontal centres as well as how much space the contents of the icon should take up. Use the internal circle as a guide, when applicable ensure that your contents sit primarily inside of this. Instead of metrically centring content visually align it instead.
Good iconography is like picking a set of great furniture. It’s important they all work together but also that we pick the right one for the right job.
