WordPress Dashicons: Classes, CSS and Menu Icons

Dashicons is the icon font built into WordPress. The official resource page calls it “the official icon font of the WordPress admin as of 3.8”, so it is already on every WordPress site and there is nothing to install or buy. Each icon is a pair of CSS classes: <span class="dashicons dashicons-smiley"></span> draws a smiley. Inside wp-admin the font is loaded for you. On the public side of your site it is not loaded for logged-out visitors, so add one line to a child theme’s functions.php or a small plugin: add_action( 'wp_enqueue_scripts', function () { wp_enqueue_style( 'dashicons' ); } );

Every Dashicons icon and its class name

Every icon in the set is below, drawn with the font itself and labelled with the class name you need. Type in the box to filter by name, and click any icon to copy its class to your clipboard. The eighteen groups are the ones the official resource uses, so the admin menu icons sit together, the editor toolbar icons sit together, and so on.

Where do you want the icon?

Everything on this page is one of these seven cases. The right-hand column is the only thing that changes.

Where you want the icon	What to write	Stylesheet needed?
Admin menu for a custom post type	'menu_icon' => 'dashicons-chart-pie'	No, wp-admin loads it
Top-level admin menu page	Sixth argument of add_menu_page()	No, wp-admin loads it
Anywhere in your HTML	<span class="dashicons dashicons-smiley"></span>	Yes on the front end
In front of text an element already has	class="dashicons-before dashicons-smiley"	Yes on the front end
An element you cannot add a class to	font-family: dashicons plus a content rule	Yes on the front end
Block inserter icon	icon: 'universal-access-alt'	No, the editor loads it
Inside a block’s edit component	<Dashicon icon="admin-home" />	No, the editor loads it

How do you write a Dashicon in HTML?

Two classes on one element. The base class dashicons is for an element that holds nothing but the icon, normally an empty span. The resource page’s own example is:

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

The helper class dashicons-before is for an element that already has its own text and wants the icon in front of it, which saves you the extra span:

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

Either way the second class, dashicons-{name}, picks the glyph. You can put either pattern in a template, a widget or a Custom HTML block.

How do you set a Dashicon as an admin menu icon?

This is what core designed them for, and it needs no stylesheet work because wp-admin already loads the font on every screen. For a custom post type, pass the class as menu_icon:

register_post_type( 'report', array(
    'labels'    => array( 'name' => 'Reports' ),
    'public'    => true,
    'menu_icon' => 'dashicons-chart-pie',
) );

For a standalone admin page the class is the sixth argument of add_menu_page():

add_menu_page(
    'My Page',
    'My Title',
    'manage_options',
    'my-page',
    'my_admin_page_function',
    'dashicons-chart-pie'
);

Pass the icon class on its own, without the base dashicons class. Both functions document the same three accepted values. You can “pass the name of a Dashicons helper class to use a font icon, e.g. ‘dashicons-chart-pie'”. You can “pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme”, beginning with data:image/svg+xml;base64,. Or you can “pass ‘none’ to leave div.wp-menu-image empty so an icon can be added via CSS”. Left unset, menu_icon defaults to the posts icon.

How do you use Dashicons on the front end?

Core registers the handle on every request but only loads the file where something asks for it. In wp_default_styles() the registration is:

$styles->add( 'dashicons', "/wp-includes/css/dashicons$suffix.css" );

Four core stylesheets then list dashicons as a dependency: wp-admin, login, install and admin-bar. That last one explains the single most confusing thing about Dashicons. A logged-in editor sees the icons on the public site because the admin toolbar drags the font in behind them; a logged-out visitor sees empty boxes, because nothing on the page asks for it. If you test while logged in, everything looks fine and your readers see nothing.

The fix is one line, in a child theme’s functions.php or a small plugin:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'dashicons' );
} );

If your theme enqueues its own stylesheet, declare the dependency there instead so the font is guaranteed to load before your CSS refers to it:

wp_enqueue_style( 'my-theme', get_stylesheet_uri(), array( 'dashicons' ) );

How do you use a Dashicon in CSS?

The class is a wrapper around one CSS rule, and you can write that rule yourself for an element whose markup you do not control, such as a button rendered by a plugin. Set the font family to dashicons and put the glyph code in content:

.my-button::before {
    font-family: dashicons;
    content: "\f102";   /* look the code up, see below */
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
}

The reliable place to find the code for a given icon is the stylesheet already sitting on your own server, wp-includes/css/dashicons.css. Search it for the class name and the content value on that rule is what you copy. That beats any list republished elsewhere, because it is the exact file your site is loading.

The font still has to be loaded on that page, so the enqueue above applies. To recolour the icon set color, because the glyph is text and inherits it. To resize it, change font-size, width and height together: core’s .dashicons rule fixes all three, and a larger glyph left inside the original box will clip.

How do you use a Dashicon in a block?

Two supported routes. When registering a block, the icon property takes a Dashicons name with the dashicons- prefix removed, and the editor draws it in the inserter:

icon: 'universal-access-alt',

Inside a block’s edit component, the Dashicon component renders one on demand:

import { Dashicon } from '@wordpress/components';

<Dashicon icon="admin-home" />
<Dashicon icon="products" />
<Dashicon icon="wordpress" />

Both take the same names as the classes, minus the dashicons- prefix.

Which Dashicon do you want?

The grid near the top of this page answers that fastest. It follows the official resource page, which is the canonical icon browser, and sorts the set into the same eighteen groups: Admin Menu, Welcome Screen, Post Formats, Media, Image Editing, Databases, Block Editor, TinyMCE, Posts Screen, Sorting, Social, WordPress.org, Buddicons, Products, Taxonomies, Widgets, Notifications and Miscellaneous.

Most class names are simply the icon name with no prefix, as in dashicons-products, dashicons-wordpress, dashicons-smiley and dashicons-chart-pie. The Admin Menu group is the exception that catches people out: those carry an admin- prefix, so the house is dashicons-admin-home. Variants of an existing icon end in -alt, -alt2 or -alt3.

One thing worth knowing before you plan around the set: the resource page states plainly that “the Dashicons project is no longer accepting icon requests”. Nothing new is coming. There is no X logo, only the old Twitter bird, and nothing for TikTok, Threads, Bluesky, Mastodon, Telegram or Discord. For current network logos use an inline SVG from the network’s own brand resources.

Should you use Dashicons on the front end at all?

In wp-admin, yes, always. It is already loaded, it matches everything around it, and it costs you nothing.

On a public page the answer is usually no, for three reasons worth weighing rather than dismissing.

The font is all or nothing. One file carries the whole set and there is no per-icon build, so a page using three icons downloads exactly what a page using eighty downloads. In wp-admin that file is cached across every screen and the cost disappears. On a marketing page where the icons are the only reason the stylesheet is there, it does not.

Icon fonts are text, with text’s problems. They show as a blank box until the font arrives, they cannot be more than one colour, and they blur at sizes the font was not hinted for. An SVG is a scalable drawing styled with fill and stroke that renders the moment the HTML does.

Accessibility is your job, not the font’s. A Dashicon is a private-use character inside an empty element, so a screen reader announces either nothing or something meaningless. Give decorative icons aria-hidden="true", and give meaningful ones visible text or a hidden label:

<button type="button">
    <span class="dashicons dashicons-search" aria-hidden="true"></span>
    <span class="screen-reader-text">Search</span>
</button>

So: reach for Dashicons when the icon lives in wp-admin, when it must match the admin menu, or when you need something working in the next five minutes. Reach for an SVG when the icon is on a public page, when you need a current brand logo, or when the artwork has more than one colour.

If you are building admin screens, our roundup of WordPress dashboard plugins covers customising the rest of wp-admin, and a user role plugin decides who sees the menu items you are adding icons to. Icons inside a navigation menu are a separate job, because core gives you no class slot on a menu item’s link text; a menu builder or a walker filter handles that. If your site still runs the classic editor, the TinyMCE group is the toolbar set you will want when keeping the classic editor. Everything here is checked against the primary source, as set out in how WPNeon verifies what it publishes.

Frequently asked questions

What are WordPress Dashicons?

Dashicons is the official icon font of the WordPress admin, and it has shipped inside core since version 3.8. Each icon is drawn with a pair of CSS classes rather than an image file, so there is nothing to download and nothing to install. WordPress loads the font for you in wp-admin, on the login screen, in the installer and behind the admin toolbar, which is why the icons appear in your dashboard without any work at all.

How do you use Dashicons on the WordPress front end?

Enqueue the stylesheet that core already registers, by hooking wp_enqueue_style with the handle dashicons onto wp_enqueue_scripts in a child theme functions.php file or a small plugin. Then add the markup, for example an empty span carrying the two classes dashicons and dashicons-smiley. Logged-in visitors who see the admin toolbar already have the font because the toolbar depends on it, which is why front-end icons often look fine to you and broken to everyone else.

What is the CSS class pattern for a Dashicon?

Two classes on one element: the base class dashicons plus the icon class, so dashicons dashicons-smiley draws a smiley. The alternative helper dashicons-before puts the icon in front of an element that already has its own text, which saves you a wrapper span. In plain CSS you can reproduce the same glyph by setting font-family to dashicons and putting the glyph code in a content declaration.

How do I find the class name for a Dashicon?

Use the icon grid near the top of this page: type part of a name into the filter box, then click any icon to copy its full class name to your clipboard. The icons are sorted into the same eighteen groups the official resource uses, so you can browse a category such as Media or Social when you are not sure what you are after. If you would rather read the source, every class is defined in wp-includes/css/dashicons.css on your own server, where each rule appears as .dashicons-name:before with the glyph code beside it.

Do Dashicons come with WordPress or do you install them?

They come with WordPress. Dashicons has been the official icon font of the WordPress admin since version 3.8, and core ships the stylesheet at wp-includes/css/dashicons.css and registers it under the handle dashicons on every request. There is nothing to download, nothing to buy and no plugin needed. The only work is loading it on the public side of your site, because core loads it only for wp-admin, the login screen, the installer and the admin toolbar.

Can you use a Dashicon as the menu icon for a custom post type?

Yes. Set menu_icon to a class such as dashicons-chart-pie in the arguments you pass to register_post_type, or pass the same class as the sixth argument of add_menu_page. Use the icon class on its own, without the base dashicons class. Both functions also accept a base64-encoded SVG data URI, which WordPress recolours to match the admin scheme, and the value none, which leaves the icon container empty for your own CSS.

Is there an X or TikTok icon in Dashicons?

No. The Social group holds the old Twitter bird and nothing for X, TikTok, Threads, Bluesky, Mastodon, Telegram or Discord. The official resource page states that the Dashicons project is no longer accepting icon requests, so none of these will be added. For a current network logo, use an inline SVG taken from the brand resources that network publishes.