Dashicons is the official icon font of the WordPress admin as of 3.8.

The Dashicons project is no longer accepting icon requests. Here’s why: Next steps for Dashicons.

For any issues that appear within WordPress core, please create a new ticket on trac. Use the “administration” component and the “UI” focus when creating the new ticket, and be sure to include “Dashicons” somewhere in the text of the ticket.

Dashicons is licensed under GPLv2, or any later version with font exception.

WordPress Usage

Admin menu items can be added with register_post_type() and add_menu_page(), which both have an option to set an icon. To show the current icon, you should pass in 'dashicons-{icon}'.

Examples

In register_post_type(), set menu_icon in the arguments array.

<?php
/**
* Register the Product post type with a Dashicon.
*
* @see register_post_type()
*/
function wpdocs_create_post_type() {
	register_post_type( 'acme_product',
		array(
			'labels' => array(
				'name'          => __( 'Products', 'textdomain' ),
				'singular_name' => __( 'Product', 'textdomain' )
			),
			'public'      => true,
			'has_archive' => true,
			'menu_icon'   => 'dashicons-products',
		)
	);
}
add_action( 'init', 'wpdocs_create_post_type', 0 );

The function add_menu_page() accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class.

<?php
/**
* Register a menu page with a Dashicon.
*
* @see add_menu_page()
*/
function wpdocs_add_my_custom_menu() {
	// Add an item to the menu.
	add_menu_page(
		__( 'My Page', 'textdomain' ),
		__( 'My Title', 'textdomain' ),
		'manage_options',
		'my-page',
		'my_admin_page_function',
		'dashicons-admin-media'
	);
}

CSS/HTML Usage

If you want to use dashicons in the admin outside of the menu, there are two helper classes you can use. These are dashicons-before and dashicons, and they can be thought of as setting up dashicons (since you still need your icon’s class, too).

Examples

Adding an icon to a header, with the dashicons-before class. This can be added right to the element with text.

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

Adding an icon to a header, with the dashicons class. Note that here, you need extra markup specifically for the icon.

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

Block Usage

The block editor supports use of dashicons as block icons and as its own component.

Examples

Adding an icon to a block. The registerBlockType function accepts a parameter “icon” which accepts the name of a dashicon. The provided example is truncated. See the full example in the Block Editor Handbook.

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
	apiVersion: 2,
	title: 'Example: Basic (esnext)',
	icon: 'universal-access-alt',
	category: 'design',
	example: {},
	edit() {},
	save() {},
} );

Using an icon as a component. A dedicated Dashicon component is available. See the related documentation in the Block Editor Handbook.

import { Dashicon } from '@wordpress/components';
const MyDashicon = () => (
	<div>
		<Dashicon icon="admin-home" />
		<Dashicon icon="products" />
		<Dashicon icon="wordpress" />
	</div>
);

Photoshop Usage

Use the .OTF version of the font for Photoshop mockups, the web-font versions won’t work. For most accurate results, pick the “Sharp” font smoothing.