Skip to main content
Icons

Quartz supports multiple icon libraries provided by each brand.

In Figma​

Quartz components allow you to use any icon library provided by your brand.

Enabling icon libraries​

To get started, set up the icon libraries from your brand.

Icon properties in components​

All components allowing icons provide the icon-name instance swap property, which allows you to pick an icon component from any library you enabled in your file.

When displaying the instance menu for the icon-name property, use the library selector at the top to choose a library among the ones you enabled:

Selecting a library in the Figma instance menu of the 'icon-name' component property.

In code​

You can register an unlimited number of icon libraries to use with Quartz. There is no cost associated with registering them, as individual icons are only requested when they're used.

Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN).

Installing icon libraries​

To get started, set up the icon libraries from your brand. Quartz Core requires registering at least the core and default libraries.

Properties in components​

All components allowing icons provide the following two properties:

  • icon-library: the library's name in which to look for icons. default if not specified.
  • icon-name: the name of the icon to look for.
<qds-button icon-library="my-icons" icon-name="smile"></qds-button>

Note: the same name can be used safely between multiple libraries.

How are icons resolved?​

When displaying an icon, a component queries the icon-library for icon-name. If icon-library is not specified, it queries the default library.

This "query" consists in invoking the resolver() function provided when setting up the icon libraries. This function translates the icon-name parameter value into a URL string where the corresponding icon file exists.

The following example registers a custom my-icons library, then displays its smile icon in a button:

<html>
  <head>
    <script type="module">
      import { registerIconLibrary } from '@quartzds/core'

      registerIconLibrary('my-icons', {
        resolver: (name) => `/assets/icons/${name}.svg`,
      })
    </script>
  </head>
  <body>
    <qds-button icon-library="my-icons" icon-name="smile"></qds-button>
  </body>
</html>

The button will call the resolver() configured for the my-icons library, providing the smile value. That function will return the /assets/icons/smile.svg URL string, which the button will use to load and display the SVG file.

Last updated on