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

Layout

Style

Style Icons

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: Example Button Print)

Example: Example Button Print contents

Nunjucks

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

{{
    onsButton({
        "text": 'Print this page',
        "variants": ['print', 'small', 'secondary']
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
textstringtrue (unless html is set)Text label for the button
htmlstringtrue (unless text is set)HTML for the button label
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variants: “small”, “secondary”, “ghost”, “disabled”, “loader”, “timer”, “print”, and “download”.
typestringfalseSets the HTML type attribute for the <button>. Can be set to either: “button” or “reset”. Defaults to “submit”.
idstringfalseSets the HTML id of the button
namestringfalseSets the HTML name attribute for the <button>. Not valid if url is set.
valuestringfalseSets the HTML value attribute for the <button>. Not valid if url is set.
classesstringfalseClasses to add to the button component
innerClassesstringfalseClasses to add to the inner button element
urlstringfalseCreates an HTML hyperlink <a> element in place of the <button> element, with the required classes and attributes. Set the URL for the href attribute.
newWindowbooleanfalseSet to “true” to make the button open the page set by url in a new tab. Used for links to external pages
newWindowDescriptionstringfalseUse to set context after the newWindow button’s text label for screen readers. Defaults to “opens in a new tab”
iconTypestringfalseAdds an icon to the button, before the label, by setting the icon type
iconPositionstringfalseSets the icon position of the button.
noIconbooleanfalseSet to “true” to remove the button’s default icon
buttonContextstringfalseUse to add context after a button’s text label for screen readers. For example, the “Hide this” button in the cookies confirmation banner requires context to help let a screen reader user know what the button hides.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button component
removeDownloadAttributebooleanfalseRemoves the download attribute on the download variant when set to “true”. Use when the download button needs to be redirected, for example when a session has expired. You must also set the Content-Disposition header to make sure the file is downloaded
listenersobjectfalseCreates a <script> element that adds an event listener to the element by id. Takes key { event } and value { function }

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-svg-icon ons-u-mr-xs" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" focusable="false"
      fill="currentColor">
      <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.

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”, “xxl” or “xxxl”.

Error:
Example not found: design-system/foundations/icons/example-icons-size

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)