Icons are visual symbols used to represent functions, products and services.
Icons provide clarity to users reducing the cognitive load. Icons always supplement a single line of text and are not treated as a description. They are solid or outline a single colour.
|💚 Do's||💔 Don'ts|
|Use icons within the component||Create your own icons|
|Use this when building new Nucleus components||Add them as content|
|Use them in colours||Use a mix of outline and solid icons|
|Keep them small|
- Icons can be used as navigational elements as solid or outline single colour.
- If you want to use larger iconography have a look at ns-illustration.
- Solid icons are the default and are the preferred choice as they are quicker to recognise.
- If you want to have perceived more detail then outline icons can be used.
The ns-icon component can be used in a number of components to help create bespoke UIs
|Type of the icon.|
|Picks the icon that is to be shown.|
|Changes the size of the icon, with 1 being the smallest.|
- Functional icons like 'arrow' only have one version while products and services like 'gas' have an outline and solid versions where solid is the default
- If you pass an empty size the icon will fill the parent element
If you are looking to create a new icon then please check there is not something similar already in use. If there is no suitable icon then you should let us know and we can look at creating it for the design system.
Read our icon foundation page for more information on creating icons.
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.