Add visual cues
Use icons to support labels, status, navigation, and actions.
Components
Icon
Icons offer a form of visual shorthand that can label, inform and aid navigation.
Support labels
Icons should reinforce text. Add an accessible label when an icon stands alone.
Use a shared icon set
The icon component renders from the SGDS icon library for visual consistency.
1
Container
2
Icon
Name
The icon name from the SGDS icon library. Browse the icon library to find the right shorthand for your context.
Use for informational messages and tooltips.
Size
Sets the icon size relative to the surrounding text or container.
Default size for most icons.
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-icon-size-md—When to use
- Use icon when it reinforces an action, status, or content type that users can already recognise from context.
- Use it to support meaning, not to replace essential text.
When not to use
- Do not rely on icon alone when the meaning may be unclear.
- Do not mix too many icon styles or meanings in the same interface.
Pair icons with a clear text label
Use icons to reinforce meaning already clear from nearby text. They aid recognition on later visits.
Do not rely on an icon alone to convey meaning
Standalone icons are often misread. Pair icon-only controls with a tooltip or accessible label.
Use the same icon for the same meaning
Pick one icon per concept and reuse it across the product. Switching icons for the same idea hurts recognition.
Do not use icons that conflict with their usual meaning
An exclamation triangle reads as warning and a check circle as success. Do not use them for other purposes.
Built-in accessibility
- Icons render visual symbols.
- The component does not add custom keyboard behaviour.
Labels and content
- Use icons as supporting visuals, not as the only way to convey meaning.
- Hide decorative icons from assistive technology in the surrounding markup when needed.
Focus and interaction
- Icons should not receive focus on their own.
- If an icon is used inside a button or link, the parent control needs an accessible name.
This component does not have a separate keyboard interaction table because:
- Icons are visual symbols and should not receive focus on their own.
- Keyboard behaviour belongs to the parent button, link, or control that contains the icon.
Have suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/icon