Skip to main content

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 adhere to 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
  • 40px
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

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.

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

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

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.

Do
This image shows a button with the text reading find a restaurant. The icon used is a magnifying glass as this image is often used to convey search functionality and is well understood in websites and apps
Don't
This image shows a button with the text reading find a restaurant. The icon used is an eye. This icon is less clear, as an eye is not usually used to convey search functionality. This makes the functionality of the button less clear.

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.

Do
This image shows an app menu bar with four icons. Each icon is accompanied by a label. For example there is an icon that represents a house coupled with a label that says home. This makes it clear that pressing the home icon takes you to the home page
Don't
This image shows an app menu with four icons. Only one icon has a label, which makes it clear it is a link to the home page. The other icons, such as the icon representing a wrapped gift, are not so clear without labels.

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.