Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

How to Use Dashicons in WordPress

by
Read Time:4 minsLanguages:

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 websiteDashicons websiteDashicons website

Dashicons are easy to use and cover most use cases for your icon needs, so they reduce the need for third-party 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 front-end of your site, add this to a plugin or theme:

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.

And this is how it looks in the WordPress admin:

Settings page menu iconSettings page menu iconSettings page menu icon

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

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

Custom post type menu iconCustom post type menu iconCustom post type menu icon

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:

This renders the four specified Dashicons on a single row.

Dashicons component in block editorDashicons component in block editorDashicons component in block editor

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 an icon and click the Copy HTML link.

Dashicons HTML markupDashicons HTML markupDashicons HTML markup

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.

Dashicons raw markupDashicons raw markupDashicons raw markup
For this to work on the front-end, you'll have 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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.