Icons are graphic symbols that are used to represent concepts, objects or actions.
We have two icon sets that can be used in our products and communications.
This is the default icon set used throughout our products across Web, Android and iOS. It features less details, which helps with making them simpler when used at smaller sizes.
This set should be used for illustrative purposes, such as communications or marketing materials. The icons are more detailed, which helps make them look better when used at bigger sizes.
Our icons are always placed inside a bounding box, which ensures that vertical and horizontal spacing adhere to our spacing guides.
When exporting icons for your products, please export the whole bounding box, instead of just the icon area.
- Icon area: (small (default size): 14x14px / large (default size): 28x28px).
- Bounding box: (small (default size): 16x16px / large (default size): 32x32px).
When using icons there will be instances where the default sizes assigned to our icon sets aren’t enough. In these instances you can use the following sizes:
Our small icon set can be used at the following sizes:
The minimum for this set of icons is 32px. However, because they can be used as supporting icons in communications and marketing materials, they can be resized at any scale, sticking to 8px increments.
There are two types of appearance options for our icons:
This is the default look for our icons and should always be considered as the first option to use when placing icons in your designs.
Fill icons should be used sparingly, mainly for icons that need to present interactive states (e.g. selected/unselected) or in certain specific places in legacy products.
There are three types of interaction patterns for interactive icons:
In this first instance the icon can be placed on its own. When the user hovers over the icon its bounding box will change its background colour to reflect the change in state.
Used for CTA, in this instance the interactive icon sits inside an icon button and uses its hover and active states to highlight that the icon is being interacted with.
This instance uses the fill appearance of the icon to indicate the change in its state. It should only be used when the icon needs to show something is selected.
Choosing and using icons for your products isn’t an easy task. An excellent icon can extract the most important visual characteristics of a product or idea, making the depiction instantly recognisable.
In this section you’ll find some factors you need to keep in mind when using icons within your interfaces.
Abstract icons are more difficult to comprehend than literal icons. Instead of using metaphorical icons, try using those which convey the most basic idea or concept you’re trying to represent.
Icons act as a visual cue to improve the legibility and scannability of your products. As a general rule, try to place icons near a text label or title. Don’t place icons by themselves unless they represent an universally understood action.
By default our icons use our $content-default colour token. However, you can use other colours for icons placed on certain contexts. The colors you can use are all under the category ‘Content Static’ and ‘Content interactive’.