# @carbon/icons-vue

> Vue components for icons in digital and software products using the Carbon Design System

Latest version **10.130.0** (published 2026-05-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @carbon/icons-vue
pnpm add @carbon/icons-vue
yarn add @carbon/icons-vue
bun add @carbon/icons-vue
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 10.130.0 |
| Published | 2026-05-20 |
| First published | 2018-12-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 9458 |
| Maintainers | carbon-design-system, carbon-bot, alisonjoseph, leechase, jeffreychew, sstrubberg, tay1orjones |
| Keywords | ibm, elements, carbon, carbon-elements, carbon-design-system, components, react |

## Links

- npm: https://www.npmjs.com/package/@carbon/icons-vue
- 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-vue

## Dependencies (2)

- [@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.76.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.130.0 (latest) — 2026-05-20
- 10.137.0 (next) — 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
- 10.137.0-rc.0 — 2026-09-08
- 10.136.0 — 2026-08-27
- 10.136.0-rc.0 — 2026-08-24
- 10.135.0 — 2026-08-12
- 10.135.0-rc.0 — 2026-08-10
- 10.134.0 — 2026-07-30
- 10.134.0-rc.0 — 2026-07-29
- 10.133.0 — 2026-07-15
- … 370 more at https://npm.io/package/@carbon/icons-vue/versions

## README

# @carbon/icons-vue

> Vue components for icons in digital and software products using the Carbon
> Design System

## Getting started

To install `@carbon/icons-vue` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @carbon/icons-vue
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @carbon/icons-vue
```

## Usage

Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
pixels. These sizes refer to the width and height of the icon.

You can install these components from `@carbon/icons-vue` through two ways. The
first is to install them when you're initializing your Vue app. For example:

```js
import { CarbonIconsVue } from '@carbon/icons-vue';
import Bee32 from '@carbon/icons-vue/es/bee/32';
import Vue from 'vue';
import App from './App.vue';

Vue.use(CarbonIconsVue, {
  components: {
    Bee32,
  },
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

_Note: if you would like to find the import path for an icon, you can reference
our [icon preview](https://carbon-elements.netlify.app/icons/examples/preview/)_

Using `CarbonIconsVue` we can pass in any of the icon components that we'd like
to use. In our application, we can then use them by doing:

```vue
<template>
  <Bee32 />
</template>
```

If you would rather not register icons globally, you can also import them into
individual components.

```js
import Bee32 from '@carbon/icons-vue/es/bee/32';

export default {
  name: 'MyComponent',
  component: {
    Bee32,
  },
};
```

You can pass in props to any icon component for things like accessibility
labels, custom classes, event handlers, and more. For example:

```vue
<template>
  <Bee32 aria-label="Bee" class="custom-class" v-on:click="handler" />
</template>
```

## 📚 Examples

If you're looking for more examples on how to use `@carbon/icons-vue`, we have
some examples that you can check out:

- [vue-cli](./examples/vue-cli)

## 🙌 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).

## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> 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-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._