Dashicons

Dashicons is the official icon font of the WordPress admin as of 3.8. Dashicons is licensed under GPLv2, or any later version with font exception.

Social dashicons-share f237 Copy CSS Copy HTML Copy Glyph

Instructions

Click on any icon below, then use the links to the left to "copy" the code to use it.

menu
menu (alt)
menu (alt2)
menu (alt3)
site
site (alt)
site (alt2)
site (alt3)
dashboard
post
media
links
page
comments
appearance
plugins
plugins checked
users
tools
settings
network
home
generic
collapse
filter
customizer
multisite

Welcome Screen Welcome Screen

write blog
add page
view site
widgets menus
comments
learn more

Post Formats Post Formats

aside
image
gallery
video
status
quote
chat
audio
camera
camera (alt)
images (alt)
images (alt2)
video (alt)
video (alt2)
video (alt3)

Media Media

archive
audio
code
default
document
interactive
spreadsheet
text
video
playlist audio
playlist video
play
pause
forward
skip forward
back
skip back
repeat
volume on
volume off

Image Editing Image Editing

crop
rotate
rotate left
rotate right
flip vertical
flip horizontal
filter
undo
redo

Databases Databases

database add
database
database export
database import
database remove
database view

Block Editor Block Editor

align full width
align pull left
align pull right
align wide
block default
button
cloud saved
cloud upload
columns
cover image
ellipsis
embed audio
embed generic
embed photo
embed post
embed video
exit
heading
HTML
info outline
insert
insert after
insert before
remove
saved
shortcode
table col after
table col before
table col delete
table row after
table row before
table row delete

TinyMCE TinyMCE

bold
italic
unordered list
ordered list
ordered list RTL
quote
align left
align center
align right
insert more
spellcheck
expand
contract
kitchen sink
underline
justify
text color
paste word
paste text
remove formatting
video
custom character
outdent
indent
help
strikethrough
unlink
RTL
LTR
break
code
paragraph
table

Posts Screen Posts Screen

align left
align right
align center
align none
lock
unlock
calendar
calendar (alt)
visibility
hidden
post status
edit
trash
sticky

Sorting Sorting

external
arrow up
arrow down
arrow right
arrow left
arrow up (alt)
arrow down (alt)
arrow right (alt)
arrow left (alt)
arrow up (alt2)
arrow down (alt2)
arrow right (alt2)
arrow left (alt2)
sort
left right
randomize
list view
excerpt view
grid view
move

share
share (alt)
share (alt2)
RSS
email
email (alt)
email (alt2)
networking
Amazon
Facebook
Facebook (alt)
Google
Instagram
LinkedIn
Pinterest
Podio
Reddit
Spotify
Twitch
Twitter
Twitter (alt)
WhatsApp
Xing
YouTube

WordPress.org WordPress.org

hammer
art
migrate
performance
universal access
universal access (alt)
tickets
nametag
clipboard
heart
megaphone
schedule
Tide
REST API
code standards

Buddicons Buddicons

activity
bbPress
BuddyPress
community
forums
friends
groups
pm
replies
topics
tracking

Products Products

WordPress
WordPress (alt)
Pressthis
update
update (alt)
screen options
info
cart
feedback
cloud
translation

Taxonomies Taxonomies

tag
category

Widgets Widgets

archive
tagcloud
text

Notifications Notifications

bell
yes
yes (alt)
no
no (alt)
plus
plus (alt)
plus (alt2)
minus
dismiss
marker
star filled
star half
star empty
flag
warning

Miscellaneous Miscellaneous

location
location (alt)
vault
shield
shield (alt)
sos
search
slides
text page
analytics
chart pie
chart bar
chart line
chart area
groups
businessman
businesswoman
businessperson
id
id (alt)
products
awards
forms
testimonial
portfolio
book
book (alt)
download
upload
backup
clock
lightbulb
microphone
desktop
laptop
tablet
smartphone
phone
index card
carrot
building
store
album
palm tree
tickets (alt)
money
money (alt)
smiley
thumbs up
thumbs down
layout
paperclip
color picker
edit large
edit page
airplane
bank
beer
calculator
car
coffee
drumstick
food
fullscreen (alt)
fullscreen exit (alt)
games
hourglass
open folder
PDF
pets
printer
privacy
superhero
superhero (alt)

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-share'.

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>
);