Icon
Icons provide additional context to elements on the page.
Overview
When to use
- As a visual shorthand to help users quickly identify common actions or concepts, e.g. a magnifying glass for search.
- To provide visual anchors in navigation menus or headers, helping users scan information faster.
- To communicate system states or feedback, such as success checkmarks, error warnings, or informational alerts.
When not to use
- As pure decoration - avoid adding icons that don't add functional value or clarify meaning. This creates visual noise and distracts the user.
- For abstract or complex concepts that do not have an obvious visual metaphor. Use text instead.
- In place of critical labels. Unless the icon is a widely-understood standard, do not use an icon without a text label for primary actions.
- Avoid using a standard icon in a way that contradicts its common meaning, e.g. using trash can icon to mean anything other than delete.
- For every concept - using an icon for one thing does not mean you need to use an icon for everything. In fact, this can reduce the visual impact of the icon.
Edit live code
Usage
Icon and text pairing
In most cases, icons should be paired with a text label. Icons are visual aids, not a replacement for language.
Do not assume a standalone icon is universally understood. If a label is absent from an icon that is not a widely-accepted standard, the user will have to think about what it means, and this will slow them down.
Edit live code
Standalone icons
If you must use an icon without a visible label, for instance in a condensed toolbar:
- You must wrap the icon in a tooltip trigger so that a text label is revealed on hover or focus.
- For accessibility, ensure the icon has a descriptive aria-label or title so that screen reader users can identify the action.
Edit live code
Sizing and scaling
If icons need to be sized relative to text, use em units for icon dimensions rather than fixed pixels. This is better for:
- Responsiveness, because using em ensures that icons scale proportionally with their parent text element.
- Consistency, because this method automatically maintains the visual relationship between the icon and the typography across different screen sizes and zoom levels.
Edit live code
Accessibility
Icons cannot be ‘read’ by screen readers, so in most cases should be paired with text and considered as purely decorative.
In cases where the text cannot be afforded on screen, use VisuallyHidden so that there is still something for screen readers to read.
Customising icons
In code, icons will generally inherit the colour and size of their parent, but these can also be set manually.
Custom colour
Edit live code
Custom size
Edit live code
Custom icons
You can override existing icons or add new icons by adding the IconProvider around your app.
In general, we advise against using custom icons, because over time this can create a huge amount of inconsistency. Even within the same icon set, the optical size and stroke width can vary widely.
If you do need an icon not available through Nebula:
- Raise the need with the design system team.
- Check the KAE application for suitable custom icons that have already been added.
- If you still need a new icon, choose one icon SVG (we recommend to source it from Figma or MaterialUI (opens in new window) ).
- We recommend the icon SVG to be minimised and for this purpose SVGOMG (opens in new window) tool can be used.
- When using SVGOMG disabling the "Remove viewBox" option is recommended.
All custom icons should be on a square canvas and use "currentColor" as the default fill color. Props should be spread on the "svg" element.
You can also use an svg file directly:
Properties
| Name | Values | Default |
|---|---|---|
name | IconName | |
size | NumberString | 1em |
color | String | |
... | JSX.IntrinsicElements["svg"] |