Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
Share on:

WordPress Dashicons: How to Use and Make the Most Out of It?

Invicti Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

Icons are fascinating!

They have the power to communicate quickly with the audience by establishing a strong visual connection.

This is why icons are used extensively everywhere, including WordPress websites.

Also, using the same theme on your site for several months can be boring. It’s common.

And then, you will be in search of something more interesting, using that, and get bored again,

And the cycle goes on and on…

So, how can you skip that cycle of boredom?

Dashicons are an excellent way!

It can spice up the aesthetics of your site and help you stand out. It will also save you from putting on extra efforts and crowding your site with unnecessary images that slow down the page speed.

So, let’s explore Dashicons and how you can use them effectively on your WordPress website.

What’s WordPress Dashicons?

Dashicons are WordPress’ official icon fonts introduced years ago with its version 3.8. These fonts are cool and awesome to look at if you use it on your website. They are top-quality SVG files that you can scale easily to any size with no pixelization.

As they possess native WordPress support because of being created by their team itself, you can use them directly without loading additional scripts. There are around 350 icon fonts included, which you can find inside the official WordPress Developers Resources.

They have categorized these icons based on the topic, plus you could see a dynamic search field that allows you to filter available icons.

You can use these icons on:

  • WordPress dashboard
  • Navigation menus
  • Pages and posts
  • Metadata
  • Editor elements
  • Custom plugins and themes
  • Admin panels
  • Front-end design

Do you notice I’m saying “icons” repeatedly?

Here, I mean just icon fonts.

Not images in the form of icons.

Yes, there’s a difference between the two.

Let’s unravel that.

Difference between image icons and icon fonts?

Icon fonts and image icons are somewhat similar, but instead of alphabets, vector symbols are there in icon fonts.

Did that get too technical?

Let me clarify that.

Basically, these icon fonts resemble images that you can use to add symbols on your website, but not an actual image.

They provide a lot of benefits to you.


Figure out in the next section.

Why should you use them?

  • Scalable like texts used on your website as they are fonts
  • Lightweight which does not affect your page loading speed as compared to images
  • Capable of setting the icon color through CSS and adding extra properties such as gradient color, shadow, etc.
  • Great at saving too many HTTP requests by allowing you to load fonts all at once, which you can use across your pages. If you use lots of images on the site, you will have to make lots of requests to fetch them, which increases page loading time.
  • Easy to use and adjust than images. You can add recognizable and creative symbols with no need to recreate them every time you need an icon for a video player, email, music, or any other thing.
  • Greater accessibility because they are built right into WordPress

How to use them?

Using Dashicons is no rocket engineering.

Trust me; I am familiar with both :0

Just follow some steps mentioned below to get started with WordPress Dashicons.

Step 1: Enable Dashicons on your WordPress site

Before you begin, enable Dashicons where you need to, for example, a theme. For this, you need to add a few codes to the function.php file.

To do it:

  • First, go to the Theme/Appearance Editor from your WordPress Dashboard.
  • Open the function.php file.
  • Scroll till the end of the file and add a few lines of code to enqueue scripts
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );

The above example is to enable Dashicons on the frontend.

Make sure you create a child theme before editing the functions.php file. It’s because if you directly edit the theme file and then an update comes for that theme, then it will override all the changes you make to the file.

Step 2: Find Dashicon HTML & CSS codes offers a library of Dashicons, which helps you find CSS and HTML codes belonging to each icon. Here, go to Developer Resources to find the Dashicons you want to use and then:

  • Click on the icon of your wish.
  • Choose between “Copy CSS” or “Copy HTML” by clicking on it.
  • Now, you will see a pop-up window. Just copy the code to the clipboard.
  • Decide where you want to use the icon, such as themes, Metadata, navigation menu, etc.
  • Paste the copied code into the chosen place’s Text Widget or Text Editor.
  • Modify icon looks using custom CSS

That’s it.

Besides, by default, all the icons are sized 20 pixels. You can change it using the CSS elements from options such as Google Chrome’s Inspect Element or Firefox’s FireBug.

How to make the most out of WordPress Dashicons?

You saw how you could use Dashicons on your site, and now we will see its usage for specific purposes.

1. Using the navigation menu

To add icons to the menu, follow the steps below:

  • Go to Menus/Appearance from the dashboard
  • Copy HTML codes designed for menu icon from
  • Paste it on the “Navigation Label” on the dashboard
  • Click on the “save” button and then load the home page. It should display the cool and crisp icon.

2. Using on post meta

You will be able to use Dashicons just in front of a date, author’s name, tag, or category based on the theme plus data it displays.

As you have enqueued Dashicons already, open the style.css file. Otherwise, you can also go for a Custom CSS editor, which does not let you lose your changes after theme updates. Next, add your CSS code after finding a matching selector.

3. On the WordPress backend

If you want different icons included for different custom post titles, post types, or widgets, it’s easy to do.

A quick tip: Create a shortcode

To use Dashicons easily, you can create a shortcode for it. It is useful, especially when you make a website for your clients who would find it easy to insert Dashicons without messing around with the codes.


I hope things are pretty clear on your side regarding WordPress Dashicons. They not only cover the aesthetics of your website but are also easy to use and improve the page loading speed.

And you know, ‘beauty and brains’ is a rare combination.

So, hurry, use those eye-catching Dashicons on your WordPress site!

Thanks to our Sponsors
More great readings on WordPress
Power Your Business
Some of the tools and services to help your business grow.
  • Invicti uses the Proof-Based Scanning™ to automatically verify the identified vulnerabilities and generate actionable results within just hours.
    Try Invicti
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.
    Try Brightdata
  • Semrush is an all-in-one digital marketing solution with more than 50 tools in SEO, social media, and content marketing.
    Try Semrush
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder