@wordpress/icons

What is @wordpress/icons?

@wordpress/icons is a package that provides a collection of reusable icons for WordPress projects. These icons are designed to be used within the WordPress ecosystem, particularly in the Gutenberg editor, but can also be used in other React-based projects.

What are @wordpress/icons's main functionalities?

Importing Icons

You can import individual icons from the @wordpress/icons package. This allows you to use specific icons in your project without importing the entire library.

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

Using Icons in Components

You can use the imported icons within your React components. The Icon component from @wordpress/icons takes an icon prop, which is the specific icon you want to render.

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

const MyComponent = () => (
  <div>
    <Icon icon={check} />
  </div>
);

Customizing Icon Size

You can customize the size of the icons by passing a size prop to the Icon component. This allows you to adjust the icon size to fit your design requirements.

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

const MyComponent = () => (
  <div>
    <Icon icon={check} size={24} />
  </div>
);

Other packages similar to @wordpress/icons

react-icons

react-icons is a popular package that provides a wide range of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar functionality to @wordpress/icons but with a broader selection of icons.

fontawesome

fontawesome is a widely-used icon library that offers a vast collection of icons. It provides more customization options and a larger icon set compared to @wordpress/icons, making it suitable for a variety of projects.

README

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 } />;

Props

Name	Type	Default	Description
size	integer	24	Size of icon in pixels.

Docs & Examples

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

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.