Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Iconography

Important information:

This page uses animated images, if you would like to turn them off select “Disable animations”.

Select state

Overview

Our icons use simple geometric shapes and rounded corners to convey trustworthiness and professionalism, but with a friendly feel. We use them consistently across Office for National Statistics (ONS) branded materials.

Our icons

Important information:

To browse icons by topic and download for digital use, view the ONS icon set

Our icons are available in Scalable Vector Graphic (SVG) and Portable Network Graphic (PNG) format. We recommend using SVG format for digital use, as they can be scaled without blurring.

The Nunjucks code for website user interface (web UI) icons is available when you select the individual icon from the set. There is further guidance on using web UI icons as part of a Design System component

To find out how to use our icons for print, email ons.design@ons.gov.uk (opens in a new tab) 

How to use icons

Icons should be used to support content, not replace it. We use icons to:

  • add detail to informative content in survey materials
  • increase the impact of our messaging on social media
  • form the base of larger illustrations

They should not be used in isolation, as the meaning can be interpreted in different ways by different people.

Three sizes of icon (small, medium, large) showing how to scale up an icon of a house, starting with a small silhouette of a house and ending with a large, more detailed house with windows and a door.
Examples of our icon sizes, scaling up to an illustration

Small icons for web interface

Small icons are intended for use on a website user interface or when space is limited. They are simplified and single colour, to be legible at small sizes.

They have been designed on a 16 by 16-pixel (px) artboard and should be used at 5 to 9 millimetres (mm) on print material.

Once you have located them in our icon set, find out how to use these icons as part of a web UI component.

Medium icons

These are also single colour and have been designed with a little more detail.

They have been designed on a 32 by 32px artboard and can be used at 10 to 19mm on print material, such as supporting process steps on survey letters.

Large icons

These icons can be used with multiple colours or tints.

They have been designed on a 64 by 64px artboard and can be used at 20 to 35mm on print material, such as leaflets and posters.

This size can be used with circle backgrounds, such as on Census 2021 products, or without.

Spot illustration

Anything larger or more detailed than a large icon would be an illustration.

The icons can be used as a basis for illustrations to ensure the shapes and concepts are consistent, but more detail can be added.

Further details about our illustrative style are available in our guidance for creating illustrations.

Icon colours

Our icons are mainly designed using “Night blue” and its tints from our primary brand colour palette.

Other brand colours can be used in appropriate contexts.

Examples of icons in use

An animated social media graphic encouraging users to complete our social surveys.
Icons used in animation
Social media graphic encouraging users to complete our social surveys.
Icons used in animation
Example of how to use illustrations in a social media graphic, with illustrations of a face mask, a house, a padlock and a virtual phone call alongside a headline about social impacts of coronavirus.
Icons used on social media graphics
Icons used in a survey letter to show the steps that participants need to take to complete the survey.
Icons used on printed letter
Icons of a house with two people in, a first aid kit and a COVID swab used in a COVID Infection Survey leaflet.
Icons used on printed leaflet

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab) 

Back to top