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

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

Service manual
Search results
    Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.

    Style Icons

    Overview

    An icon can help explain the function of an element, such as a call to action.

    When to use icons

    Icons can make scanning a page quicker, as well as making target areas larger and easier to select. They can also help users with accessibility needs.

    You can use an icon with a:

    How to use icons

    Use recognisable icons

    Always consider if an icon is necessary, and only use icons that are universally understood. An icon that means different things to different people will make your product harder to use.

    Our icons are supported by user research and are available from our icon set.

    A selection of icons are labelled as suitable for use with web user interfaces, with the Nunjucks code available on the individual icon pages. This guidance details how to use these icons as part of a Design System component.

    There is further guidance available on how we design our icons.

    Use a label

    Always use an icon with a text label. Using icons on their own means the user must think more, especially if the icon is not familiar to them.

    Place icons before text to show function

    Place an icon before the text to help the user understand the function of the element.

    For example, a user can quickly see the printer icon first on the print button.

    Open this example in a new tab (Example Button Print)

    Example Button Print contents

    Nunjucks
    {% from "components/button/_macro.njk" import onsButton %}

{{
    onsButton({
        "text": 'Print this page',
        "variants": ['print', 'small', 'secondary']
    })
}}
    Nunjucks macro options
    [object Object]undefined
    HTML
    <button type="button" class="ons-btn ons-btn--print ons-btn--small ons-btn--secondary ons-u-d-no ons-js-print-btn">
  <span class="ons-btn__inner"><svg class="ons-icon ons-u-mr-2xs" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg"
      focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z" />
    </svg><span class="ons-btn__text">Print this page</span></span>
</button>

    Use navigation icons to show direction

    A directional icon should be used with a button label or link to show the user the direction it will take them.

    Use a forward navigation icon after the text and a backward navigation icon before the text.

    For example, the arrow-next icon after the call to action button shows the button will move forward to the next page.

    The chevron icon before the back link shows the link will move back to the previous page.

    Open this example in a new tab (Example Breadcrumbs Single)

    Example Breadcrumbs Single contents

    Nunjucks
    {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}

{{
    onsBreadcrumbs({
        "ariaLabel": 'Breadcrumbs',
        "itemsList": [
            {
                "url": '/',
                "text": 'Home'
            }
        ]
    })
}}
    Nunjucks macro options
    [object Object]undefined
    [object Object]undefined
    [object Object]
    HTML
    <nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
  <ol class="ons-breadcrumbs__items ons-u-fs-s">
    <li class="ons-breadcrumbs__item" id="breadcrumb-1">
      <a class="ons-breadcrumbs__link" href="/">Home</a><svg class="ons-icon" viewBox="0 0 8 13"
        xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
        <path
          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
          transform="translate(-5.02 -1.59)" />
      </svg>
    </li>
  </ol>
</nav>

    Icon type

    Use the parameter iconType to set the type of icon. The value will be the name of the “Web UI” icon, which you will need to choose from our icon set.

    Icon position

    You can set an icon’s position to before or after the text on a button or list.

    Use the parameter iconPosition and give it a value of either “before” or ”after”.

    Icon size

    You can change the size of an icon on a list or panel – from the default size of regular text – to match the size of the text, as detailed in the type scale.

    Use the parameter iconSize and give it a value of either: “s”, “m”, “l”, “xl”, “2xl” or “3xl”.

    Open this example in a new tab (Example Icons Size)

    Example Icons Size contents

    Nunjucks
    {% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": '3xl',
        "body": '<h2 class="ons-u-fs-3xl">3xl</h2>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": '2xl',
        "body": '<h2 class="ons-u-fs-2xl">2xl</h2>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'xl',
        "body": '<h2 class="ons-u-fs-xl">xl</h2>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'l',
        "body": '<h2 class="ons-u-fs-l">l</h2>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'm',
        "body": '<h2 class="ons-u-fs-m">m</h2>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "body": '<p>r</p>'
    })
}}
{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 's',
        "body": '<p class="ons-u-fs-s">s</p>'
    })
}}
    HTML
    <div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-3xl"><svg class="ons-icon ons-icon--3xl" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--3xl">
    <h2 class="ons-u-fs-3xl">3xl</h2>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-2xl"><svg class="ons-icon ons-icon--2xl" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--2xl">
    <h2 class="ons-u-fs-2xl">2xl</h2>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-xl"><svg class="ons-icon ons-icon--xl" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--xl">
    <h2 class="ons-u-fs-xl">xl</h2>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-l"><svg class="ons-icon ons-icon--l" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--l">
    <h2 class="ons-u-fs-l">l</h2>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-m"><svg class="ons-icon ons-icon--m" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--m">
    <h2 class="ons-u-fs-m">m</h2>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-r"><svg class="ons-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg"
      focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body">
    <p>r</p>
  </div>
</div>
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-s"><svg class="ons-icon ons-icon--s" viewBox="0 0 13 10"
      xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" aria-hidden="true">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body ons-icon-margin--s">
    <p class="ons-u-fs-s">s</p>
  </div>
</div>

    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