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.

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 the 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.

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 - and 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.

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.

If you have any research or experience to share, please get in touch on the NHS.UK service manual Slack workspace or email us at service-manual@nhs.net.

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.

Get in touch to share your research findings if you've used these icons or want to explore other icons.

Read 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: February 2019