Iconography

Icons are graphic symbols that are used to represent concepts, objects or actions.

Icon sets

We have two icon sets that can be used in our products and communications.

Small icon set

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.

The example above shows what our ‘Kebab bowl’ icon looks like on the Small set.

Large icon set

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.

The example above shows what our ‘Kebab bowl’ icon looks like on the Large set.

Icon anatomy

Our icons are always placed inside a bounding box, which ensures that vertical and horizontal spacing always adhere to the guidance shown in our Spacing guides. When exporting icons for your products, please export the whole Bounding Box, instead of just the Icon Area.

  1. Icon area: (Small (Default size): 14x14px / Large (Default size): 28x28px).
  2. Bounding box: (Small (Default size): 16x16px / Large (Default size): 32x32px).

Sizing

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:

Sizes for the Small icon set

Our Small icon set can be used at the following sizes:

  • 16px
  • 20px
  • 24px
  • 28px
  • 32px
  • 30px
The example above shows the multiple sizes at which icons from the Small icon set can be placed at.

Sizes for the Large icon set

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.

The example above shows the minimum size at which icons from the Large icon set must be placed at.

Appearance

There are two types of appearance options for our icons:

Default

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

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.


Interactive states

There are three types of interaction patterns for interactive icons:

Default

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.

Icon Button

Used for CTAs, 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.

Selectable

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.


Using icons in your products

Choosing and using icons for your products isn’t an easy task. More so if we consider that an excellent icon can extract the most important visual characteristics of a product or idea in order to make the depiction instantly recognised.

In this section you’ll find some factors you need to keep in mind when using icons within your interfaces.

How to choose an icon

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.

Pairing text with icons

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.

Pairing colour and icons

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’.

The example above shows some of the colours you can use with your icons.