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.

<nord-icon size="xxl" name="navigation-dashboard"></nord-icon>

<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 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.3.0/lib/assets/${name}.svg`).then(response => response.text())
    )
  })
</script>

<nord-stack direction="horizontal" align-items="center">
  <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-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-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")

    // register name and icon separately
    Icon.registerIcon(title, searchIcon)

    // or, register name and icon at once
    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.	`"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"`	`"m"`
`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`

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`

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`

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.