How to Use Dashicons in WordPress

Dashicons are a set of font icons bundled with WordPress that provide an easy way to add icons to your WordPress site. Since the project was first introduced it has grown to be a valuable resource including a rich array of well over 300 individual icons!

Dashicons are easy-to-use and cover most use cases for your icons needs, and so reduces the need for 3rd-party external icon libraries.

Fun fact: Every time you visit the Dashicons homepage it displays a random icon! Try it out for yourself.

What Are Font Icons?

Font icons are exactly what they sound like. Each font icon set (e.g. Dashicons) is a regular font, just like any other, but one that contains symbols instead of letters and numbers.

This makes them easy to use but one downside to Dashicons is that they’re effectively compiled down to a single large sprite (an arranged large single image that contains all the individual icons).

As you can imagine, the larger the icon collection grows, so does the overall size of the font icon sprite. Even with caching it’s not ideal to include every single icon if you just need one or two.

However, this hasn’t prevented font icons from being tremendously popular over the last several years.

Accessing Dashicons in WordPress

The good news is that Dashicons are included in WordPress core so they’re available and ready to use out of the box. They’re actually automatically added to each WordPress admin page so you don’t have to do much work at all in order to make use of them.

However, if you intend to display Dashicons on the front-end of your site then they need to be enqueued first before you attempt to use them.

To enable Dashicons on the frontend of your site add this to a plugin or theme:

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

Now we’re all set to start using Dashicons on our WordPress website!

How to Display Dashicons

Now for the part you’ve been waiting for! Dashicons can be added to your site in a few different ways depending on your requirements:

• a custom plugin icon in the WordPress admin menu
• a custom icon for a plugin settings page markup
• a block icon component
• anywhere inside post or page content on the front-end

Creating a Custom Menu Icon for a Plugin

If you’re developing a plugin then you can take advantage of Dashicons being readily available in the WordPress admin by displaying a custom menu icon for your plugin, and also for the heading on the plugin settings page if you wish.

function htud_add_options_page() {
  add_menu_page(
    'How to use Dashicons',
    'How to use Dashicons',
    'manage_options',
    'how-to-use-dashicons',
    'htud_render_settings_page',
    'dashicons-superhero-alt' // Add Dashicon to menu.
  );
}
add_action('admin_menu', 'htud_add_options_page');

function htud_render_settings_page() {
  // Add Dashicon to settings page title.
?>
<div class="wrap" style="display:flex;align-items:baseline;">
    <span class="dashicons dashicons-admin-site"></span>
    <h1 class="heading"><?php _e( 'Settings Page', 'text-domain' ); ?></h1>
  </div>
  <?php
}

And this is how it looks in the WordPress admin:

You can also use Dashicons in the admin menu for custom post types.

function custom_post_type() {
  $args = array(
      'label' => __( 'My Custom Post Type', 'text_domain' ),
      'show_ui' => true,
      'menu_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
  );
  register_post_type( 'My Custom Post Type', $args );
}
add_action( "init", "custom_post_type" );

This adds a menu icon for your custom post type, similar to the settings page example above.

Using Dashicons in a Gutenberg Block

If you develop blocks for the Gutenberg editor you can also use Dashicons directly in your code via the <Dashicon/ > component.

The component is very easy to use. Just import it and add it to a block as follows:

import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <Dashicon icon="businessman" />
      <Dashicon icon="awards" />
      <Dashicon icon="pets" />
      <Dashicon icon="heart" />
    </div>
  );
}

This renders the four specified Dashicons on a single row.

Inspecting the code shows the actual markup the <Dashicons /> component outputs, which is a span tag with the same content structure generated from the Dashicons website when you select and icon and click the Copy HTML link.

Adding Dashicons With the Core HTML Block

The other way that Dashicons can be used on your site is to add the icon markup via the core HTML block. This enables you to enter the Dashicon markup directly.

Note, for this to work on the front-end then you’ll to manually enqueue the Dashicon font as described earlier.

Conclusion

In this post, I explained what Dashicons are and how they work in WordPress. Then, I showed you a few ways you can include Dashicons in your own WordPress sites or plugins.