Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Icon draft

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.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-icon size="xxl" name="navigation-dashboard"></nord-icon>

Properties

PropertyAttributeDescriptionTypeDefault
namenameThe name of the icon to display, as defined by nordicons.string""
sizesizeThe size of the icon."xs" | "s" | "m" | "l" | "xl" | "xxl""m"
colorcolorThe color of the icon. Can accept any valid CSS color value, including custom properties.string | undefinedundefined
labellabelAn accessible label for the icon. If no label is supplied, the icon is hidden from assistive technology.string | undefinedundefined

Methods

static registerResolver(resolver: IconResolver) => void

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.

resolver
The resolver function to register.

static registerIcon(icon: { title: string; default: string }) => void

Register an individual icon so it can be rendered synchronously, to avoid loading over the network.

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.

static registerIcon(name: string, icon: string) => void

Register an individual icon so it can be rendered synchronously, to avoid loading over the network.

name
The name of the icon to be registered.
icon
The SVG string for the icon.

static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) => void

iconOrName
icon

Usage

This section will in the future include guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration guidelines, please see Using Components. 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.