Skip to main content
The @wordpress/icons package is the official WordPress icon library, providing a comprehensive collection of SVG icons for use in your WordPress projects.

​
Installation

Install the package using npm: 
npm install @wordpress/icons --save
This package assumes that your code will run in an ES2015+ environment. If you’re using an environment with limited support for such language features, include the polyfill shipped in @wordpress/babel-preset-default.

​
Basic Usage

Import the Icon component along with the specific icon you want to use: 
import { Icon, check } from '@wordpress/icons';

function MyComponent() {
	return <Icon icon={ check } />;
}

​
Icon Component Props

The Icon component accepts the following props:
PropTypeDefaultDescription
iconComponentrequiredThe icon component to render
sizenumber24Size of the icon in pixels

​
Examples

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

<Icon icon={ star } />
Here are some commonly used icons from the library:

check

Checkmark for confirmations

close

Close or dismiss actions

arrowLeft

Back or previous navigation

arrowRight

Forward or next navigation

plus

Add or create new items

trash

Delete or remove items

cog

Settings and configuration

search

Search functionality

star

Favorites or ratings

​
Using Icons as Components

You can also use icons directly as components without the Icon wrapper: 
import { check as checkIcon } from '@wordpress/icons';

function StatusIndicator( { isComplete } ) {
	return (
		<div>
			{ isComplete && checkIcon }
		</div>
	);
}

​
Icon Categories

The icon library includes icons across various categories:

​
Action Icons

Icons for common actions: 
import {
	plus,
	minus,
	trash,
	edit,
	check,
	close,
	upload,
	download
} from '@wordpress/icons';
Icons for navigation: 
import {
	arrowLeft,
	arrowRight,
	arrowUp,
	arrowDown,
	chevronLeft,
	chevronRight,
	chevronUp,
	chevronDown
} from '@wordpress/icons';

​
Block Editor Icons

Icons specific to block editing: 
import {
	paragraph,
	heading,
	image,
	gallery,
	quote,
	list,
	table,
	button
} from '@wordpress/icons';

​
Social Icons

Social media platform icons: 
import {
	wordPress,
	twitter,
	facebook,
	instagram,
	youtube,
	linkedin
} from '@wordpress/icons';

​
Styling Icons

Icons inherit the current text color by default. You can style them using CSS: 
import { Icon, heart } from '@wordpress/icons';

function ColoredIcon() {
	return (
		<Icon
			icon={ heart }
			style={ { color: 'red' } }
		/>
	);
}
Or with CSS classes: 
.my-icon {
	color: #1e3a8a;
	width: 32px;
	height: 32px;
}

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

<Icon icon={ star } className="my-icon" />

​
Browse All Icons

Explore the complete icon library with interactive examples: View Icons in Storybook →

​
Contributing New Icons

To add a new icon to the library:
1

Add the SVG file

Place your SVG file in the src/library/ directory using kebab-case naming (e.g., my-new-icon.svg).
2

Update manifest.json

Add an entry to src/manifest.json:
{
	"slug": "my-new-icon",
	"label": "My New Icon",
	"filePath": "library/my-new-icon.svg",
	"public": true
}
Set public: true only if you want to expose this icon through the SVG Icons API. Once public, removing icons becomes difficult, so consider carefully.
3

Build the package

Run the build script to generate TypeScript files:
npm run build
The build script automatically generates .tsx files from SVGs and updates manifest.php. Do not edit these files manually.

​
TypeScript Support

This package includes full TypeScript definitions: 
import { Icon } from '@wordpress/icons';
import type { IconType } from '@wordpress/icons';

interface MyComponentProps {
	icon: IconType;
	size?: number;
}

function MyComponent( { icon, size = 24 }: MyComponentProps ) {
	return <Icon icon={ icon } size={ size } />;
}

​
Peer Dependencies

This package requires React as a peer dependency: 
{
	"peerDependencies": {
		"react": "^18.0.0"
	}
}
Make sure you have React 18.0.0 or higher installed in your project.

​
Package Details

{
	"name": "@wordpress/icons",
	"version": "11.7.0",
	"description": "WordPress Icons package, based on dashicon.",
	"dependencies": {
		"@wordpress/element": "file:../element",
		"@wordpress/primitives": "file:../primitives"
	}
}

​
Icon Design Guidelines

When creating custom icons for the WordPress ecosystem:
  • Use a 24×24px viewBox
  • Keep designs simple and recognizable
  • Use a 2px stroke width for consistency
  • Maintain visual balance and optical alignment
  • Follow the existing icon style
  • Test icons at different sizes
  • Ensure accessibility with proper labels
Always test your icons at the default 24px size and common multiples (48px, 96px) to ensure they remain crisp and clear.

Build docs developers (and LLMs) love

Get started for freeTalk to us