# @carbon/icons-react
> React components for icons in digital and software products using the Carbon Design System
Latest version **11.88.0** (published 2026-09-09) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @carbon/icons-react
pnpm add @carbon/icons-react
yarn add @carbon/icons-react
bun add @carbon/icons-react
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads; large bundle.
## Facts
| | |
|---|---|
| Version | 11.88.0 |
| Published | 2026-09-09 |
| First published | 2018-10-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 16.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 9464 |
| Maintainers | carbon-design-system, carbon-bot, leechase, jeffreychew, sstrubberg |
| Keywords | ibm, elements, carbon, carbon-elements, carbon-design-system, components, react |
## Links
- npm: https://www.npmjs.com/package/@carbon/icons-react
- Repository: https://github.com/carbon-design-system/carbon
- Homepage: https://github.com/carbon-design-system/carbon#readme
- Issues: https://github.com/carbon-design-system/carbon/issues
- npm.io page: https://npm.io/package/@carbon/icons-react
## Dependencies (3)
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0
- [@carbon/icon-helpers](https://npm.io/package/@carbon/icon-helpers.md) ^10.82.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 11.88.0 (latest) — 2026-09-09
- 10.49.6 (v10-next) — 2025-05-14
- 10.23.0-alpha.0 (nightly) — 2020-12-03
- 10.7.0-alpha.5708 (canary) — 2019-09-04
- 0.0.1-beta.5 (beta) — 2019-03-25
- 0.0.1-alpha.32 (alpha) — 2019-02-12
- 11.88.0-rc.0 — 2026-09-08
- 11.87.0 — 2026-08-27
- 11.87.0-rc.0 — 2026-08-24
- 11.86.0 — 2026-08-12
- 11.86.0-rc.0 — 2026-08-10
- 11.85.0 — 2026-07-30
- 11.85.0-rc.0 — 2026-07-29
- 11.84.0 — 2026-07-15
- 11.84.0-rc.0 — 2026-07-13
- … 395 more at https://npm.io/package/@carbon/icons-react/versions
## README
# @carbon/icons-react
> React components for icons in digital and software products using the Carbon
> Design System
## Getting started
To install `@carbon/icons-react` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):
```bash
npm install -S @carbon/icons-react
```
If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:
```bash
yarn add @carbon/icons-react
```
## Usage
You can import an icon component into your project by referring to its name:
```jsx
import { Add } from '@carbon/icons-react';
```
Each icon supports a `size` prop and supports the 16px, 20px, 24px, and 32px
sizes by default. The default size for each icon is 16px.
```jsx
import { Add } from '@carbon/icons-react';
function ExampleComponent() {
return ;
}
```
We also provide CommonJS and UMD files in the `lib` and `umd` directories,
respectively.
To import using CommonJS, you can do the following:
```js
const { Add } = require('@carbon/icons-react');
```
_Note: if you would like to find the import path for an icon, you can reference
our [Icon Library](https://carbondesignsystem.com/elements/icons/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
// CSS custom class name to set the fill of the icon to `rebeccapurple`
svg.my-custom-class {
fill: rebeccapurple;
}
```
```jsx
import { Add } from '@carbon/icons-react';
function MyComponent() {
return (
);
}
```
#### 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:
```scss
// CSS custom class name to set the fill of the icon to `yellow`
svg.my-custom-class {
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.my-custom-class [data-icon-path='inner-path'] {
fill: black;
opacity: 1;
}
```
```jsx
import { WarningFilled } from '@carbon/icons-react';
function MyComponent() {
return ;
}
```
### 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:
```jsx
import { Add } from '@carbon/icons-react';
function MyComponent() {
return (
);
}
```
Doing this will add the appropriate `role` to the `