IconReady 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.
Example: Basic Example: Animal categories Example: Color Example: Custom icon Example: Custom resolver Example: Sizes Example: Static Theme: Light default Theme: Light high contrast Theme: Dark default Theme: Dark high contrast View RTL < nord-icon size = " xxl" name = " navigation-dashboard" > </ nord-icon>
< nord-stack> < nord-stack direction = " horizontal" align-items = " center" wrap > < nord-icon color = " var(--n-color-icon)" name = " generic-amphibia" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-arachnida" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-birds" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-canine" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-cattle" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-equidae" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-feline" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-fish" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-leporidae" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-reptilia" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-rodents" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-sheep" size = " s" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-suidae" size = " s" > </ nord-icon> </ nord-stack> < nord-stack direction = " horizontal" align-items = " center" wrap > < nord-icon color = " var(--n-color-icon)" name = " generic-amphibia" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-arachnida" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-birds" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-canine" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-cattle" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-equidae" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-feline" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-fish" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-leporidae" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-reptilia" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-rodents" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-sheep" size = " m" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-suidae" size = " m" > </ nord-icon> </ nord-stack> < nord-stack direction = " horizontal" align-items = " center" wrap > < nord-icon color = " var(--n-color-icon)" name = " generic-amphibia" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-arachnida" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-birds" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-canine" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-cattle" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-equidae" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-feline" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-fish" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-leporidae" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-reptilia" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-rodents" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-sheep" size = " l" > </ nord-icon> < nord-icon color = " var(--n-color-icon)" name = " generic-suidae" size = " l" > </ nord-icon> </ nord-stack> </ nord-stack>
< nord-stack direction = " horizontal" align-items = " center" > < nord-icon size = " s" name = " interface-star-filled" color = " var(--n-color-status-success)" > </ nord-icon> < nord-icon size = " m" name = " interface-star-filled" color = " var(--n-color-status-danger)" > </ nord-icon> < nord-icon size = " l" name = " interface-star-filled" color = " var(--n-color-status-warning)" > </ nord-icon> < nord-icon size = " xl" name = " interface-star-filled" color = " var(--n-color-status-highlight)" > </ nord-icon> </ nord-stack>
< nord-icon> < svg viewBox = " 0 0 140 140" xmlns = " http://www.w3.org/2000/svg" > < path fill = " currentColor" d = " M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z" > </ path> </ svg> </ nord-icon>
< nord-icon size = " l" name = " navigation-dashboard" > </ nord-icon> < script> customElements. whenDefined ( "nord-icon" ) . then ( ( ) => { const Icon = customElements. get ( "nord-icon" ) Icon. registerResolver ( name => fetch ( ` https://unpkg.com/@nordhealth/icons@1.8.0/lib/assets/ ${ name} .svg ` ) . then ( response => response. text ( ) ) ) } ) </ script>
< nord-stack direction = " horizontal" align-items = " center" > < nord-icon name = " interface-star" size = " xxs" > </ nord-icon> < nord-icon name = " interface-star" size = " xs" > </ nord-icon> < nord-icon name = " interface-star" size = " s" > </ nord-icon> < nord-icon name = " interface-star" size = " m" > </ nord-icon> < nord-icon name = " interface-star" size = " l" > </ nord-icon> < nord-icon name = " interface-star" size = " xl" > </ nord-icon> < nord-icon name = " interface-star" size = " xxl" > </ nord-icon> </ nord-stack>
< nord-stack direction = " horizontal" align-items = " center" > < nord-icon name = " navigation-search" size = " l" > </ nord-icon> < nord-icon name = " interface-checked" size = " l" > </ nord-icon> </ nord-stack> < script type = " module" > import searchIcon, { title } from "/node_modules/@nordhealth/icons/lib/assets/navigation-search.js" import * as checkedIcon from "/node_modules/@nordhealth/icons/lib/assets/interface-checked.js" customElements. whenDefined ( "nord-icon" ) . then ( ( ) => { const Icon = customElements. get ( "nord-icon" ) Icon. registerIcon ( title, searchIcon) Icon. registerIcon ( checkedIcon) } ) </ script>
Properties 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
undefined
color
color
The color of the icon. Can accept any valid CSS color value, including custom properties.
string | undefined
undefined
label
label
An accessible label for the icon. If no label is supplied, the icon is hidden from assistive technology.
string | undefined
undefined
Slots Slot name Description Default slot The default slot used for placing a custom SVG icon.
Methods Method name Parameters Description static registerResolver(resolver: IconResolver) => void
resolver
: The resolver function to register.Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string. Can return a string synchronously, or a promise of a string. By default, will load icons from the Nord CDN.
static registerIcon(icon: { title: string; default: string }) => void
icon
: An object representing the icon to be registered, where "title" is the icon's name, and "default" is the SVG string. This is intended to be used in cases where you import an icon's entire ES module and register it directly.Register an individual icon so it can be rendered synchronously, to avoid loading over the network.
static registerIcon(name: string, icon: string) => void
name
: The name of the icon to be registered.icon
: The SVG string for the icon.Register an individual icon so it can be rendered synchronously, to avoid loading over the network.
static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) => void
iconOrName
: The name of the icon to be registered or an object representing the icon to be registered, where "title" is the icon's name, and "default" is the SVG string.icon
: The SVG string for the icon.Register an individual icon so it can be rendered synchronously, to avoid loading over the network.
Usage # This section includes guidelines for designers and developers about the usage of this component in different contexts.
View Nordicons
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 label
property 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 . This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Integration Guidelines
Troubleshooting If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.