Usage
Icon renders a Nord icon by name. By default it is decorative; give it a label when the icon conveys meaning on its own.
import "@nordhealth/components/lib/Icon"
Examples
Sizes
Set size to s, m, l, xl, or xxl; by default the icon matches the surrounding font size.
Colour
The icon uses currentColor by default, so it inherits text colour. Override it with the color attribute.
Meaningful icons
When an icon stands alone and carries meaning, give it a label so it is announced.
Size scale
The full size scale from xxs to xxl.
Status colours
Override color to convey status, here with the design system's status tokens.
Animal categories
The generic animal-category icons used to represent patients across species.
Custom icon
Slot your own inline SVG to render an icon that isn't in the Nord set.
Custom resolver
Register a resolver to load icons by name from your own source.
Static registration
Register icon modules ahead of time with registerIcon so they render without a network fetch.
Accessibility
- A bare
<nord-icon>is treated as decorative and hidden from assistive technology — fine when adjacent text already conveys the meaning. - Add a
labelwhen the icon is the only thing conveying meaning (e.g. an icon-only button), so screen readers announce it. - Don't rely on icon colour alone to signal status; pair it with text or a
label.
API reference
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.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
name | name | The name of the icon to display, as defined by 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. |
Design guidelinesFor designers
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.