Icons

Carbon icons are provided through a set of packages allowing the use of icons in multiple frameworks. Icons are supported in vanilla, React, Angular, and Vue.

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

If you prefer Yarn, use the following command instead:

Icons in this package can be accessed through importing them by name.

Icons in this package support the following sizes: 16, 20, 24, and 32 pixels. These sizes refer to the width and height of the icon. Icons default to size 16. You can change the size of the icon by adding the size prop:

Note: if you would like to find the import path for an icon, you can reference our Icon 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:

Certain icons in the library support two distinct fill colors. You can target the inner path by using the [data-icon-path="inner-path"] attribute selector. For example:

By default, the icon components from @carbon/icons-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

Two-tone icons

Focus and aria-label

Resources

Carbon icons package

Icon package demo