# @wordpress/icons

> WordPress Icons package, based on dashicon.

Latest version **16.0.0** (published 2026-09-10) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @wordpress/icons
pnpm add @wordpress/icons
yarn add @wordpress/icons
bun add @wordpress/icons
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 16.0.0 |
| Published | 2026-09-10 |
| First published | 2020-02-04 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.12.0 |
| Dependencies | 3 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11753 |
| Author | The WordPress Contributors |
| Maintainers | garypendergast, adamsilverstein, gziolo, ntwb, riad, noisysocks, kadamwhite, gutenbergplugin, jorgefilipecosta, ellatrix, iandunn206, whyisjake, ockham, sirreal, nosolosw, wpisabel, ntsekouras, nerrad, desrosj, talldanwp, peterwilsoncc, ryanwelcher, mamaduka, aduth, johnbillion |
| Keywords | wordpress, gutenberg, icons, dashicon |

## Links

- npm: https://www.npmjs.com/package/@wordpress/icons
- Repository: https://github.com/WordPress/gutenberg
- Homepage: https://github.com/WordPress/gutenberg/tree/HEAD/packages/icons/README.md
- Issues: https://github.com/WordPress/gutenberg/issues
- npm.io page: https://npm.io/package/@wordpress/icons

## Dependencies (3)

- [change-case](https://npm.io/package/change-case.md) ^4.1.2
- [@wordpress/element](https://npm.io/package/@wordpress/element.md) ^8.7.0
- [@wordpress/primitives](https://npm.io/package/@wordpress/primitives.md) ^4.55.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 16.0.0 (latest) — 2026-09-10
- 16.0.1-next.v.202609031004.0 (next) — 2026-09-03
- 11.7.1 (wp-7.0) — 2026-06-30
- 11.0.1 (wp-6.9) — 2025-10-28
- 10.19.1 (wp-6.8) — 2025-03-10
- 10.8.2 (wp-6.7) — 2024-09-30
- 10.0.2 (wp-6.6) — 2024-06-25
- 9.42.4 (wp-6.5) — 2024-03-12
- 9.33.13 (wp-6.4) — 2023-11-13
- 9.26.3 (wp-6.3) — 2023-10-12
- 9.17.3 (wp-6.2) — 2023-10-12
- 9.8.1 (wp-6.1) — 2022-09-20
- 8.2.3 (wp-6.0) — 2022-06-30
- 6.1.1 (wp-5.9) — 2021-11-15
- 4.0.3 (patch) — 2021-09-01
- … 243 more at https://npm.io/package/@wordpress/icons/versions

## README

# Icons

WordPress Icons Library.

## Installation

Install the module:

```bash
npm install @wordpress/icons --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._

## Usage

```js
import { Icon, check } from '@wordpress/icons';

<Icon icon={ check } />;
```

### Recoloring

Use CSS `color`. Icons follow it through `currentColor` on `fill` or `stroke`.

A growing subset of the library is stroke-based. Those icons set `fill: none` as an inline style on the outer `<svg>`, so a `fill` prop or an ordinary CSS `fill` rule does not recolor them. Pass `style={ { fill: value } }` only when you intend to replace that intrinsic fill.

`Icon` merges a consumer `style` with the icon's own styles. The consumer value wins for the same property.

## Props

| Name    | Type      | Default | Description                                                                 |
| ------- | --------- | ------- | --------------------------------------------------------------------------- |
| `size`  | `integer` | `24`    | Size of icon in pixels.                                                     |
| `style` | `object`  |         | Merged with the icon's intrinsic styles. Consumer properties take precedence. |

## Docs & examples

You can browse the icons docs and examples at [https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--default](https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--default)

## Adding new icons

To add a new icon to the library, follow these steps:

1. **Add the SVG file**: Place your SVG file in the `src/library/` directory. The filename should be in kebab-case (e.g., `my-new-icon.svg`). Stroke-based icons should use `stroke="currentColor"` on the stroked shapes and `vector-effect="non-scaling-stroke"` so the stroke width stays constant when the icon is rendered outside the Icon block. The build script only accepts `fill: none` as an inline style.
2. **TypeScript files are auto-generated**: The TypeScript component files (`.tsx`) are automatically generated by the build script from the SVG files. You do not need to manually create or edit these files.

3. **Add the icon to `manifest.json`**: Add an entry for your new icon in `src/manifest.json`. The entry should include:
   - `slug`: The icon identifier (should match the SVG filename without the `.svg` extension)
   - `label`: The human-readable label for the icon. Use Title Case (for example, `My New Icon`).
   - `filePath`: The relative path to the SVG file (e.g., `library/my-new-icon.svg`)
   - `public` (optional): Set to `true` if you want to expose this icon as a core icon through the SVG Icons API. **Important**: Once an icon is made public, removing it is difficult, so carefully consider whether to make it public before setting this field to `true`.
4. **Do not edit `manifest.php`**: The `manifest.php` file is automatically generated from `manifest.json` by the build script. Do not edit it manually, as your changes will be overwritten when the build runs.

After adding your icon, run `npm run build` to generate the TypeScript files and update `manifest.php`.

## Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

---
_Source: https://npm.io/package/@wordpress/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._