How to Remove Dashicons in WP and Replace with Lightweight Alternative

You may notice a large “dashicons.min.css” stylesheet being loaded on the frontend of your website. It may be flagged as render-blocking according to Google PageSpeed Insights, and/or as unused CSS.

These dashicons may be used, for example, by certain blocks of the Ultimate Addons for Gutenberg plugin. In my case, I was only using three or four of them, so the stylesheet was like 98% unused of the entire 30 KB of data!

There is a way to remove this CSS file to improve your loading times, while still using icons in the same locations on your site. And it’s pretty simple!

Gather the Required CSS and Add to Child Theme or Additional CSS

Before we remove dashicons from loading on the front-end, let’s copy only the CSS being used from that file. We can quickly accomplish this by using the Chrome extension “CSS Used”: CSS Used – Chrome Web Store.

DevTools window showing where to find the CSS Used tab highlighted with a red rectangle

After activating the extension, open up DevTools on your site, and find the new tab added by this extension named “CSS Used.”

Gather CSS

Click this to generate the CSS used on the current page. It labels which stylesheet each group of CSS came from, so find the CSS generated from the dashicons.min.css in the result. Or just do a text search for “dashicons” in the result.

Start by copying the main .dashicons class. You may whittle away, modify, or add to this chunk later if desired.

Next, copy the CSS for the class of each dashicon used. For example, if you have the calendar dashicon on your page, that would show up in your CSS Used as something like:

.dashicons-calendar:before {content:"\f145";}

Do not include the @font-face stuff, which is a very long string of characters.

Remember the CSS Used only looks at the current page. So make sure you run the CSS Used on any pages which have different dashicons, so that you end up with a complete list of all that are being used.

Add CSS to Child Theme style.css or Additional CSS

For example, one page might be using an up arrow for a Table of Contents or Scroll to Top, and another page a calendar and a tag dashicon in a Post Grid block. So we have their 3 classes:

.dashicons-arrow-up-alt2:before {
	content: "\f343";
}
.dashicons-calendar:before {
	content: "\f145";
}
.dashicons-tag:before {
	content: "\f323";
}

And the main class. I ended up with something like this for the main class:

.dashicons {
	font-family: dashicons;
	display: inline-block;
	line-height: 1;
	font-weight: 400;
	font-style: normal;
	speak: never;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: auto;
	width: 20px;
	height: 20px;
	font-size: 20px;
	vertical-align: top;
	text-align: center;
	transition: color .1s ease-in;
}

Add the CSS to your child theme’s stylesheet, or add it to your site in some way such as Additional CSS in the Appearance->Customize area.

Remove dashicons.min.css from Loading on Front-End

Now that we have independently added the CSS we need, we want to stop dashicons.min.css from loading on the front-end.

In my case, my default WordPress environment already was NOT loading dashicons.min.css on the front-end, but I was using some code in functions.php to load them on the front-end. So I could just remove the code that was loading them.

But if you didn’t add dashicons.min.css yourself, and the file is still loading on the front-end, you should be able to stop it via several methods.

Method 1: Some plugins may have a setting for this, such as Perfmatters, but not many that I know of.

Method 2: Unload the style using your functions.php. If the following code does not successfully stop loading dashicons.min.css on the front-end, you may need to look around online for a different code snippet, but something like the following should do the trick:

// Disable dash icons on front end
function wpdocs_dequeue_dashicon() {
    if (current_user_can( 'update_core' )) {
        return;
    }
    wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

To check whether you’ve successfully stopped dashicons.min.css from loading on the front-end, you can enter your page’s URL at GTmetrix.com and check the waterfall section, or any other online tool showing a waterfall of the files comprising your page load.

Add New Non-dashicon Icons

Now for the fun part! Choosing a new icon to replace each of those dashicons that we copied.

For the most lightweight alternative, we could use an HTML entity, or even an emoji, for the dashicon content. There are many to choose from.

Here is a list of some HTML arrows and their codes from toptal.com.

To use them, we simply take the CSS content code. Here’s an example for an up arrow to be used for a scroll to top, from which we will use \21E7.

HTML arrow icons showing their various codes for HEX, Unicode, and CSS

So we find our original dashicon class for the arrow:

.dashicons-arrow-up-alt2:before {
	content: "\f343";
}

And we replace the content with whatever we want, in this case, we chose the HTML arrow \21E7.

.dashicons-arrow-up-alt2:before {
	content: "\21E7";
}

It’s that simple!

For more flexibility, you can even use SVGs in the pseudo elements!

.dashicons-arrow-up-alt2:before {
	content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4M12 16V8"/></svg>');
}

The above code would render something like the following, which you can still style as you would a regular SVG element.

There are just a few things to keep in mind when using SVGs this way, for example when using the hex character # as in stroke="#ac1c28", use %23 instead: stroke="%23ac1c28".

Now that you know the process, here are just a couple sites to start you off looking up HTML entities that may be of interest:

UTF-8 Icons (utf8icons.com)
HTML Character Entity (unicode-table.com)

The neat thing is this also works with unicode emoji characters, which does not have to rely on WordPress emojis but rather is recognized by most browsers. If there is not a specific CSS code shown, it’s often just part of the unicode number (but not all of the time). So U+2705 would correspond to \2705 for CSS.

TL;DR & Conclusion

When you are using dashicons on your site, but don’t want to load a large 30 KB CSS file, you can unload dashicons.min.css and just use different HTML entities in place of them. It’s a three-step process:

1. Gather & Add: Use the Chrome extension “CSS Used” to copy only the CSS that you need from dashicons.min.css. You should only need to copy the main .dashicons class along with the individual dashicon classes your site uses with their ::before pseudo element content. For example, grab the main .dashicons{…} and then for an individual dashicon class such as an up arrow, you’ll copy .dashicons-arrow-up-alt2:before{content:"\f343;"}. Add this to your child theme’s style.css or to your Additional CSS via the Customizer.

2. Remove: If you did not add dashicons.min.css on the front-end manually, and the file is still loading, you’ll need to find a way to stop loading it. Most likely you’ll add some code to functions.php. Check DevTools or an online waterfall to verify it’s not loading anymore.

3. Replace: Search for an HTML entity or unicode character or emoji similar to what you had with the dashicon. Copy and replace the CSS content code with what you found. Or, use an SVG instead!

I hope this was not difficult to follow. Please feel free to comment with any errors I may have or ideas for improvement!

2 thoughts on “How to Remove Dashicons in WP and Replace with Lightweight Alternative”

Leave a Reply to Nate Cancel reply