Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Icons

Updated in October 2026

Use icons when they help users understand content, find information or complete a task more easily.

Information:

Use icons sparingly. Not everyone interprets icons in the same way, so they can be unclear without supporting text. Use icons to support content, not replace it, and only where they add value or help users complete a task.

When to use icons

Use icons to support content, highlight important information and help users complete tasks.

Icons can be particularly useful in systems that people use regularly, where users become familiar with common actions and navigation patterns over time.

Use icons when they:

  • support the meaning of content or an action
  • help users scan information more quickly
  • reinforce familiar navigation patterns
  • draw attention to important information, warnings or system status

When not to use icons

Use icons sparingly. People may interpret icons differently, so they can be unclear without supporting text.

Do not:

  • use icons as the only way to communicate information
  • rely on icons to replace clear text labels
  • use icons for decoration alone
  • use the same icon to represent different things within a service, for example using the search icon for both for search functionality and for screen magnification.

How to use icons

Only use icons provided by the Design System. These icons have been selected to support user needs and create a consistent experience across DHCW services.

If you need an icon that is not available in the Design System, you should have evidence that it helps users understand content or complete a task.

Use a label

In most cases, pair icons with clear text labels. This helps users understand their meaning and reduces the risk of confusion. Using icons on their own means the user must think more, especially if the icon is not familiar to them.

Place icons before text to show function

Place an icon before the text to help the user understand the function of the element.

Icons in the design system

Search

Use the search icon for search functionality only, for example in the header component.

Where a visible text label is not provided, ensure the icon has an accessible name, such as "Search".

Open this example in a new tab

Left and right arrows

Use left and right arrow icons alongside text labels such as "Previous page" and "Next page" within the pagination component.

Open this example in a new tab

Right arrow (inside a circle)

Use the right arrow inside a circle icon to signpost links that start a digital service. The right arrow inside a circle icon is used in the action link component.

Open this example in a new tab

Up arrow

Use the up arrow icon alongside a text label such as "Back to top" to help users quickly return to the top of a page.

Open this example in a new tab

Left chevron

Use the left chevron icon to indicate navigation back to the previous page, as seen in the back link component.

Open this example in a new tab

Right chevron

Use the right chevron icon helps users understand the hierarchy of a service by separating breadcrumb links, as seen in the breadcrumbs component.

Open this example in a new tab

Warning

Use the warning icon alongside clear text that explains the warning and any action the user needs to take, as seen in the warning callout component.

Open this example in a new tab

User profile

Use the user profile icon alongside information about the currently signed-in user, as seen in the header component.

Open this example in a new tab

Accessibility

Icons must be accessible to all users. You should:

  • avoid relying on icons along to communicate meaning
  • ensure icons meet colour contrast requirements
  • use aria-hidden="true" for decorative icons so screen readers will ignore them
  • give icons a meaningful name so screen reader users receive the same information as sighted users
  • pair icons with visible text wherever possible

We recommend using the WebAIM contrast checker to test colour combinations.

Read more about accessible SVGs on CSS Tricks website.

Source

Learn more about icons in the NHS Digital Service Manual and Icons in the GOV.UK Design System.

Follow discussions about Icons on NHS Digital Service Manual Github to see the latest updates and resolved issues.

Back to top