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