Pictograms

To install @carbon/pictograms-react in your project, you will need to run the following command using npm:

If you prefer Yarn, use the following command instead:

You can import a pictogram component into your project by referring to its name:

We also provide CommonJS and UMD files in the lib and umd directories, respectively.

To import using CommonJS, you can do the following:

Note: if you would like to find the import path for a pictogram, you can reference our Pictogram Library

All icons from the library support being styled by the fill property. You can change the color of an icon by passing in a custom class name that sets this property (preferred), or by passing in an inline style. For example:

By default, the icon components from @carbon/pictograms-react are treated as decorative content. This means that we set aria-hidden="true" unless certain props are passed to the component.

If you would like the icon to be announced by a screen reader, you can supply an aria-label or aria-labelledby. For example:

Doing this will add the appropriate role to the <svg> node, as well.

If you would like the <svg> to receive focus, you will need to pass in a tabIndex value. For example:

Including tabIndex and aria-label (or aria-labelledby) will set the corresponding tabindex on the underlying <svg> and verify support in older browsers like Internet Explorer 11 by setting focusable to true.

Get started

Usage

Icon fill

Focus and aria-label

Resources

Carbon pictograms package