Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
Loading...
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
name | name | The name of the icon to display, as defined by [nordicons](/nordicons/). | string | '' |
size | size | The size of the icon. | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | undefined | "m" |
color | color | The color of the icon. Can accept any valid CSS color value, including custom properties. | string | undefined | — |
label | label | An accessible label for the icon. If no label is supplied, the icon is hidden from assistive technology. | string | undefined | — |
Slots
| Slot name | Description |
|---|---|
Default slot | The default slot used for placing a custom SVG icon. |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to provide additional meaning in addition to a text label.
- Use to help users who have difficulties with reading and attention.
- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).
Don’t
- Don’t use for decorative purposes alone.
- Don’t use when a button’s action is already clear based on the text label.
- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.
Additional considerations
- Icon components are hidden from assistive technologies by default.
- Use
labelproperty to give an accessible label for the icon and to make it visible to assistive technologies.
Integration
For integration guidelines, please see Web Components documentation .