Skip to main content

Styles - Icons

Use this small set of icons that we know our users need and understand to help them identify and navigate content more quickly.

Version 10

Icons updated in August 2025

See updates to components (including icons) in version 10

WCAG 2.2: Make sure that users can successfully interact with icons used as buttons.

Icons you can use

Use these icons to mark important parts of the page and highlight things you want users to do.

Check the relevant component and pattern pages in the design system for guidance on how to use the icons, including use of colour.

Left and right arrows

The left and right arrow icons are used in the pagination component. These icons should be used alongside text labels, for example "Previous page" and "Next page".

Open this arrows icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
</svg>

<svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("arrow-left") }}

{{ nhsukIcon("arrow-right") }}

Right arrow (inside a circle)

The right arrow inside a circle icon is used in the action link component. This icon should be used to signpost links that start a digital service.

Open this arrow right circle icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("arrow-right-circle") }}

Right chevron (inside a circle)

The right chevron inside a circle icon is used in the primary card component. This icon should be used on hub page cards to signpost important groups of information.

Open this chevron right circle icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("chevron-right-circle") }}

Tick and cross

The tick (do) and cross (don't) icons are used for do and don't lists. These icons should be shown below "Do" and "Don't" headings.

Open this tick and cross icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z" />
</svg>

<svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("tick") }}

{{ nhsukIcon("cross") }}

The search icon is used in the header component. When used without a visible text label, make sure the icon has an accessible name, for example "Search".

Open this search icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
  <title>Search</title>
  <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("search", {
  title: "Search"
}) }}

User profile

The user profile icon is used in the header component. This icon should be shown alongside information about the currently logged-in user.

Open this user icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("user") }}

Plus and minus

We use plus (+) and minus (-) in the expander component. However, these are provided by the CSS. We do not have SVG icons for them.

How to use these icons

Use icons sparingly, and not for decoration.

Information: WCAG 2.2

Make sure any icons used as buttons are at least 24px by 24px in target size, or that there is another way to perform the action. For example: a search icon to submit a query supported by a labelled "Search" button.

This is to make sure users can easily interact with them. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).

Using SVG classes for icons

We use scalable vector graphics (SVG) for icons, rather than images such as PNG. SVG are code snippets that you can drop directly into the HTML.

SVG icons are sharp, flexible, and load quickly. You can control how they appear, for example their colour, with style sheets (CSS).

If you're using Nunjucks templating language, you can use the nhsukIcon macro.

SVG icons have the class .nhsuk-icon, which sets a default size for the icon. Each icon also has a specific class, such as .nhsuk-icon--search. The specific class allows you to modify the icon with styles, such as colour via fill.

Using colour with icons

Icons often need to change colour based on their context and state, such as hover, focus and active. When choosing colours, make sure they have sufficient colour contrast to pass WCAG 2.2 success criterion 1.4.11 Non-text Contrast (W3C).

Changing the size of an icon

If you want to make an icon bigger, you can use the size override classes to make an icon 25%, 50%, 75% or 100% larger.

Open this sizes icons example in a new tab 
<svg class="nhsuk-icon nhsuk-icon--user nhsuk-icon--size-25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
</svg>

<svg class="nhsuk-icon nhsuk-icon--user nhsuk-icon--size-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
</svg>

<svg class="nhsuk-icon nhsuk-icon--user nhsuk-icon--size-75" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
</svg>

<svg class="nhsuk-icon nhsuk-icon--user nhsuk-icon--size-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
</svg>
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{{ nhsukIcon("user", {
  classes: "nhsuk-icon--size-25"
}) }}

{{ nhsukIcon("user", {
  classes: "nhsuk-icon--size-50"
}) }}

{{ nhsukIcon("user", {
  classes: "nhsuk-icon--size-75"
}) }}

{{ nhsukIcon("user", {
  classes: "nhsuk-icon--size-100"
}) }}

Accessibility

SVG icons must be accessible. For example, they need to meet accessible colour contrast standards. Our recommended tool to test colour combinations is the WebAIM contrast checker. Read more about accessible SVGs on CSS Tricks website.

Research

These icons seem to be universally recognisable. When we tested them, we found that people understood them. We tested them in context – not on their own, but in components on a full page.

Read Icons: avoid temptation and start with user needs (NHS England).

Find out more about the benefits of SVG icons:

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: August 2025