Icons
Use icons as visual cues, to help users understand and navigate content.
When to use
Use icons when you have evidence that doing so will:
- reinforce meaning
- improve comprehension
- help with recognition
When not to use
Use icons sparingly. Too many icons on a page will reduce the effect.
Do not use icons unless there is a particular need to make the content more visual. Text is often enough.
Be mindful about how much an icon can make one piece of content on a page stand out from surrounding information. It may not work to use icons for less-important information on a page, because it could make that content seem too prominent.
How to use
We use scalable vector graphics (SVG) files for icons. They can be used with or without supporting text.
| Icon | Label | Code in GitHub | Used in |
|---|---|---|---|
| account | account.svg | Account and settings - top navigation | |
| calendar | calendar.svg | Add to calendar | |
| clock | clock.svg | Long stay on appointments | |
| chevronRight | chevron-right.svg | Card links | |
| crossFilled | cross-filled.svg | Services (active state) - bottom navigation | |
| cross | cross.svg | Services - bottom navigation | |
| download | download.svg | Download a document on appointments | |
| email.svg | Get a copy of document by email on appointments | ||
| filter | filter.svg | Filter a list | |
| heartFilled | heart-filled.svg | Your health (active state) - bottom navigation | |
| heart | heart.svg | Your health - bottom navigation | |
| help | help.svg | Help - top navigation | |
| homeFilled | home-filled.svg | Home (active state) - bottom navigation | |
| home | home.svg | Home - bottom navigation | |
| letter | letter.svg | Get a copy of document by post on appointments | |
| messagesFilled | messages-filled.svg | Messages (active state) - bottom navigation | |
| messages | messages.svg | Messages - bottom navigation and card links | |
| messagesUnreadFilled | messages-unread-filled.svg | Messages with unread items (active state) - bottom navigation | |
| messagesUnread | messages-unread.svg | Messages with unread items - bottom navigation and card links | |
| night | night.svg | Overnight stay on appointments | |
| phoneCall | phone-call.svg | Call to confirm on appointments | |
| sort | sort.svg | Sort a list | |
| switchProfile | switch-profile.svg | Card links |
You can find the icons in Figma.
Accessibility
Icons that act as functional buttons should have aria labels, so that they are announced to screen reader users. If an icon is not functional, and it appears alongside supporting text that conveys the same meaning, it may not need alt-text or an aria label.
Designers and developers should work together to understand the most accessible option in context, considering NHS Service Manual accessibility guidance.
Research
The icons used on the top navigation and bottom navigation of the NHS App were well-recognised when shown to users without supporting text in our research sessions.
Participants generally understood the meaning of the icons. However, the research supported the need for some icons to have accompanying text to make the meaning clear.
Help improve this component
If you have used or researched this component, please let us know what you found so we can make it better for everyone.
Discuss 'Icons' on GitHub where you can share anything you think might be useful.
You can also share feedback with us on Slack.