# Icon buttons

# Description

Our icons have been carefully designed with our users in mind. Competitor research has been conducted to understand what icons they use to convey particular messages to users. This is because we understand that the icons used by competitors might be the most universally recognisable for our users.

According to Nielsen Norman Group, there aren't many 'universal' icons that always communicate the same message, therefore we should be cautious when considering utilising the icon buttons.

# Must include

Icon - to indicate action performed when user interacts with button.

# Optional

Container - where the icon for the button is held.

# When we use icon buttons:

Zoom - note that the icon is within the context of the image gallery, indicating that the button is referring to that specific component.

Cross on sheets - the cross is used universally across many sites, users shouldn't have issues with understanding this symbol, it is also within the component above the content to give meaning to close. Search

# Rules

• Always make sure your icon button is within the context of the component.
• Icon buttons are always fully rounded and must follow the guidelines of buttons for colour, elevation etc. within NBUX.
• Buttons should always have a 56px clickable area.
• All icons buttons should be the same width and height to create consistency.

# To consider

• Button with labels should always be considered first. If icons have the space to be labelled then they should be, it needs to be considered whether the icon being used is regarded as 'familiar' with our users.

# Accessibility

• Icon buttons should have an accessible name using an aria-label describing the action e.g. 'zoom in' for a magnifying glass icon. This ensures the button is correctly read out to users using screen readers.
• Ensure the tappable area of the icon button is 56px.