Learn how to enhance your WordPress site with Dashicons, the official icon font in WordPress. This tutorial covers adding Dashicons to themes, plugins, and custom post types for better user interfaces.
You want an icon next to a custom menu item, a button, or a widget, and you’d rather not pull in Font Awesome or ship an SVG sprite just for that. Good news: WordPress already ships a full icon font. It’s called Dashicons, it’s baked into core, and you’ve been staring at it every day in wp-admin.
This guide covers the practical stuff: how to load Dashicons where you actually need them, how to drop them into menus, post types, and the front-end, and where the library falls short so you don’t build on a dead end.
Table of Contents
- What Are Dashicons?
- How to Add Dashicons to Your WordPress Theme
- Using Dashicons in WordPress Admin Menus
- Dashicons for Custom Post Types
- Customizing Dashicons with CSS
- Adding Dashicons to the Front-End
- Best Practices for Using Dashicons
- Conclusion
What Are Dashicons?
Dashicons are the official icon font for the WordPress admin dashboard, added back in WordPress 3.8. You get social icons, form elements, media controls, and a pile of action indicators, all usable across themes and plugins.
Because it’s a font, it scales cleanly on any screen without a separate retina asset. And since it ships in core, there’s no external library to load and no extra HTTP request to manage.
One honest caveat before you lean on it: Dashicons got its last real update in WordPress 5.5, and the project stopped accepting new icon requests back in 2020. It isn’t being expanded anymore. For the common UI icons it’s still great, but if you need something modern or niche that isn’t in the set, reach for an SVG instead of hoping a new Dashicon shows up.
Advantages of Using Dashicons
- Performance: They load with WordPress, so there’s no external library to pull in.
- Consistency: They match the look of the admin, which keeps custom UI feeling native.
- Customizable: They’re font glyphs, so a line or two of CSS changes size, color, or position.
- Availability: The full set is already on every WordPress install, so there’s nothing to bundle or version.
How to Add Dashicons to Your WordPress Theme
Here’s the one gotcha people hit: WordPress loads the dashicons stylesheet in wp-admin automatically, but not on the front-end. If you want icons on the public side of your site, you have to enqueue the handle yourself:
<?php
/**
* Enqueue Dashicons for the front-end.
*/
function enqueue_dashicons() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
With that in place, Dashicons are available on the front-end. Now you can attach one to any element using the dashicons class.
Example: Adding a Dashicon to a Button
Here’s how to add a Dashicon to a button element:
<button class="dashicons-before dashicons-admin-home">Home</button>
The dashicons-before class puts the icon in front of the button text, and dashicons-admin-home picks which icon.
Using Dashicons in WordPress Admin Menus
In the admin this is where Dashicons pay off fastest. When you register a menu page, pass the Dashicon class as the icon argument and WordPress handles the rest.
<?php
/**
* Add a custom menu with a Dashicon.
*/
function add_custom_menu() {
add_menu_page(
'Custom Page',
'Custom Menu',
'manage_options',
'custom-page-slug',
'custom_page_callback',
'dashicons-admin-site', // Dashicon class
6
);
}
add_action( 'admin_menu', 'add_custom_menu' );
Here the dashicons-admin-site icon shows up next to your custom menu item.
Dashicons for Custom Post Types
Same idea for custom post types. Set the menu_icon argument in register_post_type() and your CPT gets a proper icon in the admin sidebar instead of the default pin.
<?php
/**
* Register a custom post type with Dashicons.
*/
function create_custom_post_type() {
$args = array(
'labels' => array(
'name' => 'Custom Post Type',
'singular_name' => 'Custom Post'
),
'public' => true,
'menu_icon' => 'dashicons-format-aside', // Dashicon class
'supports' => array( 'title', 'editor', 'thumbnail' ),
);
register_post_type( 'custom_post', $args );
}
add_action( 'init', 'create_custom_post_type' );
That registers the post type and hands it the dashicons-format-aside icon.
Customizing Dashicons with CSS
Since Dashicons are a font, styling them is just CSS. Size is font-size, color is color, and everything else you’d expect from text works too.
Changing the Color and Size of Dashicons
.dashicons {
font-size: 24px; /* Adjust icon size */
color: #ff0000; /* Change icon color */
}
That bumps the icon to 24px and turns it red. In practice you’ll want to target a more specific selector than .dashicons so you’re not restyling every icon on the page.
Adding Dashicons to the Front-End
Once the style is enqueued (see the earlier snippet), you can drop icons into your markup anywhere in the theme or plugin. The standard pattern is an empty span with the dashicons class plus the specific icon class:
Example: Displaying Dashicons in a Widget
<?php
/**
* Create a simple widget that uses Dashicons.
*/
class Dashicon_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'dashicon_widget',
__( 'Dashicon Widget', 'text_domain' ),
array( 'description' => __( 'A widget that displays a Dashicon', 'text_domain' ) )
);
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
echo '<span class="dashicons dashicons-heart"></span>';
echo $args['after_widget'];
}
}
// Register widget.
function register_dashicon_widget() {
register_widget( 'Dashicon_Widget' );
}
add_action( 'widgets_init', 'register_dashicon_widget' );
That’s a bare-bones widget rendering the dashicons-heart icon through a span.
Best Practices for Using Dashicons
- Performance: Only enqueue Dashicons on the front-end when a page actually uses them, so you’re not loading the stylesheet everywhere for nothing.
- Accessibility: This is the big one people get wrong. Dashicons are decorative by default and carry no built-in labels, so a screen reader announces nothing. If an icon is purely visual, hide it with
aria-hidden="true". If it carries meaning (an icon-only button, say), add your ownaria-labelor visually hidden text. - Customization: Style icons with CSS to match your theme, and scope your selectors so you don’t accidentally restyle admin icons too.
Conclusion
For admin menus, custom post types, and simple front-end touches, Dashicons are the path of least resistance: no dependency, no bundling, already installed. Enqueue the handle when you need it on the front-end, add a class, and you’re done.
Just keep the ceiling in mind. The set is frozen at its WordPress 5.5 state, so treat it as a solid library for standard UI icons and reach for SVG when you need something it doesn’t have. Handle accessibility yourself and you’ll get clean, native-feeling icons without adding a single kilobyte of third-party assets.
Pingback: How to Change Dashicons in WordPress Admin Menu Easily - kkcollecter