Icons

All icons follow the same grid and are contained in an 32px, 24px or 16px Frame to ensure consistency and correct alignment across the UI. Icons regularly change colours due to different themes and hover states.

Design Links

Open in Sketch Cloud

Open in Figma

@import 'node_modules/@hospitality-digital/design-system/css/components/icon.css';

Overview

UI Icons

App Icons

Sprite

All icons are distributed using a svg sprite. In order to use the icons, the sprite has to be rendered as part of the HTML of the application. This can be achieved using an asset bundler like webpack, or by fetching the sprite asynchronous from our CDN

Using NPM

When using a bundler you can import the sprite from our NPM package. Make sure to load the sprite as a raw file so you can inject it into your HTML:

import svgSprite from '@hospitality-digital/design-system/icons/sprite.svg'

Using CDN

If you are not using a bundler you can fetch the content of the svg and inject it into your HTML:

const getSprite = async () => {
  const response = await fetch('https://hd-design-system.netlify.com/icons/sprite.svg')
  const svgSprite = await response.text()
  const injectElement = document.createElement('div')
  injectElement.style = { width: 0, height: 0, overflow: 'hidden' }
  injectElement.innerHTML = svgSprite
  document.body.prepend(injectElement)
}