Icons

Usage

Icons in Carbon are now provided through a set of packages that let you use icons in various frameworks. We currently support:

• Vanilla
• Angular
• React
• Vue
• Svelte

In order to use icons in alongside these packages, you will need a couple of pieces of information, namely the icon size and name. For most product UIs, you will want to use the 16x16 icons.

In order to make use of an icon, you should look at the Path header. This header will provide you with the path to import the module in code. In general, the structure of how to import an icon will follow:

import IconName from '@carbon/icon-<package>/es/<path-to-icon>/<size>';

For example, if I wanted to import the add icon in React, it would look like:

import IconName from '@carbon/icon-react/es/add/16';

The path information comes from the table below under the Path header. If you would like to use CommonJS or UMD modules, you can replace the path value of es with either lib or umd respectively.

For specific guidance on how to use these icons, checkout each package's README to learn more!