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.

WCAG 2.2

WCAG 2.2 affects these styles

To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:

See the full list of design system changes to meet WCAG 2.2.

Icon Label Code in GitHub Used in
Search icon-search.svg Header
Chevron left icon-chevron-left.svg Breadcrumbs (on mobile screens)
Chevron right icon-chevron-right.svg Mobile menu, and primary card and breadcrumb on desktop
Close icon-close.svg Mobile menu
Cross (don't) icon-cross.svg Do and Don't lists
Tick (do) icon-tick.svg Do and Don't lists
Arrow right circle icon-arrow-right-circle.svg Action link
Arrow right icon-arrow-right.svg Next page (pagination)
Arrow left icon-arrow-left.svg Previous page (pagination)
Plus icon-plus.svg Expander
Minus icon-minus.svg Expander

You can find all the SVG icons code in the NHS.UK frontend library on GitHub.

When to use these icons

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

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: an "X" icon to close, supported by a labelled "Close" 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 text with icons

Some of our icons can be used on their own. Users recognise them easily. They include:

  • search
  • chevron right
  • plus and minus (for reveals)
  • close

Other icons needs an explanation. They include:

  • action links – tell the user what the link will help them do, for example: "Find a pharmacy"
  • right and left arrows for pagination – add "Previous" or "Next"
  • cross and tick – use the words Do and Don't at the top of Do and Don't lists

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 a server side or templating language, you can include the icons with include 'partials/icons/icon-search.svg'.

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 fill. This means you can change the colour of the SVG for states such as hover, focus and active.

Some older browsers like Internet Explorer 8 can't display SVG. So every SVG icon has a PNG fallback. The fallback images have a class, such as .nhsuk-icon__search—fallback, which you can use to modify their sizing and spacing.


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.


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.

Read more about how to feedback or share insights.

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

Updated: April 2024