Icons

React Spectrum offers a set of open source icons that can be imported from @react-spectrum/s2/icons.

import Edit from "@react-spectrum/s2/icons/Edit";

<Edit />

Available icons

API

Icons support a more limited set of the style macro through a special macro called iconStyle.

iconStyle

import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
import Edit from '@react-spectrum/s2/icons/Edit';

<Edit styles={iconStyle({size: 'XL', color: 'positive'})} />

Icon colors

Icon sizes

Custom icons

To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.

Parcel

If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:

yarn add @react-spectrum/parcel-transformer-s2-icon --dev

Then, add it to your .parcelrc:

{
  extends: "@parcel/config-default",
  transformers: {
    "icon:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}

Now you can import icon SVGs using the icon: pipeline:

import Icon from 'icon:./path/to/Icon.svg';

Other bundlers

The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a folder of SVG icons into TSX files.

npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components. import Icon from './path/to/destination/Icon';

Building icons as a library

You can also build the icons as a separate library for distribution so that multiple projects can share the same icons. Or possibly you simply do not want to output tsx files. To do this, use the --isLibrary flag.

npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination' --isLibrary

This outputs a folder of ES modules and commonjs modules with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components. import Icon from 'library-name/path/to/destination/Icon';