Icons for digital and software products using the Carbon Design System
@carbon/icons in your project, you will need to run the following
command using npm:
npm install -S @carbon/icons
If you prefer Yarn, use the following command instead:
yarn add @carbon/icons
Icons in Carbon are provided through a variety of packages, often specific for the framework that will use them. Currently, we support the following packages for various frameworks:
In order to use an icon, it may be helpful to reference our Icon library reference page in order to find the specific icon you would like to use.
For example, if I wanted to import the 16x16
icon, I would write:
In this case,
es is used for ES2015 modules (ESM), but one may also use
for CommonJS or
umd for UMD modules.
In order to render this to the screen, we'll make use of our
icon-helpers package. This package gives us two
options for rendering our icons:
toSVG. If rendering in
templates, you may want to use the former. If rendering to the DOM,
In our case, we'll use
toSVG to create a node in the DOM for the 16x16
;;const addIconNode =;
Styling the inner path
Certain icons in the library support an alternate fill inside of the icon, for
supports styling the inner
In order to style the inner path, you will need to target the SVG using CSS. In general, you can target the path by writing the following:
In the code snippet above, we are targetting the inner path attribute with
[data-icon-path="inner-path"]. The value of
fill will be the custom color
you would like to set for the inner path. We also need to set
in order to get this inner path to be visible on the page.
You can view a full reference of our icons here . This is useful for finding the path information in order to import an icon.
📖 API Documentation
If you're looking for
@carbon/icons API documentation, check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.