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:
Have you tested these styles?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
Before you start, you will need a GitHub account. It's an open forum where we collect feedback.
If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.
Updated: February 2019