Skip to main contentCarbon Design System

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.

Get started

To install 

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

npm install -S @carbon/icons-react

If you prefer Yarn, use the following command instead:

yarn add @carbon/icons-react

Usage

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

import { Add } from '@carbon/icons-react';

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:

<Add size="24" />

Note: if you would like to find the import path for an icon, you can reference our Icon Library

Icon fill

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:

// CSS custom class name to set the fill of the icon to `rebeccapurple`
svg.my-custom-class {
  fill: rebeccapurple;
}
import { Add } from '@carbon/icons-react';


function MyComponent() {
  return (
    <button>
      <Add aria-label="Add" className="my-custom-class" />
    </button>
  );
}

Two-tone icons

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:

// CSS custom class name to set the fill of the icon to `yellow`
svg.outer-icon-fill {
  fill: yellow;
}


// Use the `data-icon-path` attribute selector to target the inner path
// where we want to set the fill to `black`. We also set `opacity` to `1` so
// that this inner-path is visible.
svg.outer-icon-fill [data-icon-path='inner-path'] {
import { WarningFilled } from '@carbon/icons-react';


function MyComponent() {
  return <WarningFilled aria-label="Add" className="my-custom-class" />;
}

Focus and 
aria-label

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:

import { Add } from '@carbon/icons-react';


function MyComponent() {
  return (
    <button>
      <Add aria-label="Add" />
    </button>
  );
}

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:

import { Add } from '@carbon/icons-react';


function MyComponent() {
  return <Add aria-label="Add" tabIndex="0" />;
}

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
.

Resources

Carbon icons package
Icon package demo
Edit this page on GitHub
Previous
Icons: Usage
Next
Elements: Pictograms