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

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.

Admin Menu Admin Menu

  • menu
  • menu (alt)
  • menu (alt2)
  • menu (alt3)
  • site
  • site (alt)
  • site (alt2)
  • site (alt3)
  • dashboard
  • post
  • media
  • 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
  • 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
  • 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

Social Social

  • 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
  • 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
  • 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-{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.