@wordpress/icons

Icons

WordPress Icons Library.

Installation

Install the module:

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 in your code.

Usage

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

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 and used by WordPress 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.