# @carbon/icon-helpers > Helpers used alongside icons for digital and software products using the Carbon Design System Latest version **10.82.0** (published 2026-09-09) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @carbon/icon-helpers pnpm add @carbon/icon-helpers yarn add @carbon/icon-helpers bun add @carbon/icon-helpers ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 10.82.0 | | Published | 2026-09-09 | | First published | 2018-11-18 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 31.4 KB | | 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/icon-helpers - 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/icon-helpers ## 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 - 10.82.0 (latest) — 2026-09-09 - 10.28.5 (v10-next) — 2025-05-14 - 10.11.0-alpha.0 (nightly) — 2020-12-03 - 10.5.0-alpha.5640 (canary) — 2019-08-12 - 0.0.1-beta.5 (beta) — 2019-03-25 - 0.0.1-alpha.32 (alpha) — 2019-02-12 - 10.82.0-rc.0 — 2026-09-08 - 10.81.0 — 2026-08-27 - 10.81.0-rc.0 — 2026-08-24 - 10.80.0 — 2026-08-12 - 10.80.0-rc.0 — 2026-08-10 - 10.79.0 — 2026-07-30 - 10.79.0-rc.0 — 2026-07-29 - 10.78.0 — 2026-07-15 - 10.78.0-rc.0 — 2026-07-13 - … 228 more at https://npm.io/package/@carbon/icon-helpers/versions ## README # @carbon/icon-helpers > Helpers used alongside icons for digital and software products using the > Carbon Design System ## Getting started To install `@carbon/icon-helpers` in your project, you will need to run the following command using [npm](https://www.npmjs.com/): ```bash npm install -S @carbon/icon-helpers ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash yarn add @carbon/icon-helpers ``` ## Usage `@carbon/icon-helpers` provides a couple of helpers for rendering `` nodes in a document, or to help get the correct attributes to set on an `` node. These include: | Name | Type | Description | | ------------------ | --------------------------------- | ---------------------------------------------------------------------------- | | `getAttributes` | `(attributes: Object) => Object` | Get the attributes for an `` node | | `formatAttributes` | `(attributes: Object) => String` | Format the attributes into a string that can be applied to a node in the DOM | | `toString` | `(descriptor: Object) => String` | Format the given icon descriptor into a string. Useful for templates | | `toSVG` | `(descriptor: Object) => DOMNode` | Format the given icon descriptor into a DOM node | For most of the methods, `attributes` corresponds with whatever the name and value would be if you were writing the HTML for the ``. For example, if we wanted to set `width` and `height` we would do the following: ```js const { getAttributes } = require('@carbon/icon-helpers'); const attributes = getAttributes({ width: 20, height: 20 }); ``` In order for the icon to be considered focusable, you will need to provide either `aria-label` or `aria-labelledby` in the given `attributes` in addition to `tabindex`. For example: ```js const { getAttributes } = require('@carbon/icon-helpers'); const attributes = getAttributes({ 'aria-label': 'My icon label', tabindex: '0', }); ``` ### Icon descriptors An icon descriptor is the term we use to describe icon objects exported by `@carbon/icons`. By default, they will have the following shape: ```js { elem: 'svg', attrs: { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 16 16', width: 16, height: 16, }, content: [ { elem: 'path', attrs: { d: '...', }, }, ], name: 'IconName', size: 16, } ``` You can import these definitions directly from `@carbon/icons` and use them alongside `toSVG` or `toString` by doing: ```js import { IconName } from '@carbon/icons'; import { toString, toSVG } from '@carbon/icon-helpers'; const iconString = toString(IconName); const iconSVG = toSVG({ ...IconName, attrs: { ...IconName.attrs, myCustomAttribute: 'myCustomAttributeValue', }, }); ``` ## 🙌 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/icon-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._