# @carbon/icons > Icons for 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 pnpm add @carbon/icons yarn add @carbon/icons bun add @carbon/icons ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; large bundle. ## Facts | | | |---|---| | Version | 11.88.0 | | Published | 2026-09-09 | | First published | 2018-08-30 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 51.6 MB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 9458 | | 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 - 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 ## Dependencies (1) - [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.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.48.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 - … 387 more at https://npm.io/package/@carbon/icons/versions ## README # @carbon/icons > Icons for digital and software products using the Carbon Design System ## Getting started To install `@carbon/icons` in your project, you will need to run the following command using [npm](https://www.npmjs.com/): ```bash npm install -S @carbon/icons ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash yarn add @carbon/icons ``` ## Usage Icons in Carbon are available directly from `@carbon/icons` for Vanilla JavaScript. First-party framework packages in this repo are available for: - [React](../icons-react) - [Vue](../icons-vue) Additional ecosystem packages are also available for: - [Svelte](https://github.com/IBM/carbon-icons-svelte) In order to use an icon, it may be helpful to reference our [Icon library](https://carbon-elements.netlify.app/icons/examples/preview/) reference page in order to find the specific icon you would like to use. ### Vanilla Once you've found an icon and you're looking to use it in Vanilla JavaScript, you can import the icon by writing the following in your JavaScript file: ```js import IconName from '@carbon/icons//path-to-icon/size'; ``` For example, if I wanted to import the 16x16 [`add`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fadd) icon, I would write: ```js import AddIcon from '@carbon/icons/es/add/16'; ``` In this case, `es` is used for ES2015 modules (ESM), but one may also use `lib` for CommonJS or `umd` for UMD modules. In order to render this to the screen, we'll make use of our [`icon-helpers`](../icon-helpers) package. This package gives us two options for rendering our icons: `toString` and `toSVG`. If rendering in templates, you may want to use the former. If rendering to the DOM, `toSVG` may be helpful. In our case, we'll use `toSVG` to create a node in the DOM for the 16x16 `add` icon: ```js import { getAttributes, toSVG } from '@carbon/icon-helpers'; import addIcon from '@carbon/icons/es/add/16'; const addIconNode = toSVG({ ...addIcon, attrs: getAttributes(addIcon.attrs), }); ``` ### Styling the inner path Certain icons in the library support an alternate fill inside of the icon, for example [`warning--filled`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fwarning--filled) supports styling the inner `!` path. 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: ```css svg [data-icon-path='inner-path'] { fill: blue; opacity: 1; } ``` In the code snippet above, we are targeting 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 `opacity` to `1` in order to get this inner path to be visible on the page. ### Reference You can view a full reference of our icons [here](https://carbon-elements.netlify.app/icons/examples/preview/) . This is useful for finding the path information in order to import an icon. ## 🙌 Contributing 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](/.github/CONTRIBUTING.md)! 👀 ## 📝 License Licensed under the [Apache 2.0 License](/LICENSE). ## IBM Telemetry IBM Telemetry This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection). For more information on the data being collected, please see the [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics). --- _Source: https://npm.io/package/@carbon/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._