Custom Admin Menu Icons

As most of you know, WordPress introduced SVG type icons in WordPress 3.8 that are used in WordPress backend components like admin bar and admin menu. These icons look pretty good on all devices such tablets and smartphones so we are not limited to have good UX on desktop machines only.

So, let’s see the changes. The best to way to see the difference is to compare them side by side.

WordPress Custom Admin Menu Icons Comparison
WordPress 3.7 vs WordPress 3.8 admin menu icons comparison

As we can see, WordPress adopted new trends in UX that became popular in the last few years in mobile and web and that is “flat design”. This approach is mainly focused on content, keeping as low information as possible but giving focus on content and minimalistic styles. No shadows, no extra lines and borders. Just keep it simple as much as possible. User is not distracted with to much information and he or she can easily navigate through the menu.

Interesting thing about these SVG icons is that they are now part of CSS files, and are hosted there. There is no actual link to an image located in directory structure, like it was the case in previous WordPress versions, but rather images are loaded with CSS. They’re also applied within CSS so, the only thing that is contained out of the CSS is CSS class of an image that is stored in HTML.

Here is an example of how WordPress uses dashboard icons in WordPress admin menu:

 <span class=”dashicons dashicons-grid-view”></span>

That’s it! You just add one class in HTML and you’re ready to go! Everything else is stored in CSS that is already loaded by WordPress.

We are still limited to use only default dashboard icons in our WordPress admin menu.

How to Use Custom Admin Menu Icons in WordPress

What if we want to change default WordPress admin icons and replace them with some other dashboard icons? Or what if we just want to change colors of the current menu items so we can keep our branding colors? Unfortunately, this is just not possible to do in WordPress. WordPress does not allow us to change its icons in any way. Icons look good, but we are limited to use them as WordPress defines them for us.

But, are we really limited with default icons? Is there anything we can do about it?

You would need to have at least some programming skills and know WordPress API add_menu_page in order to add your custom icons.  Another way to do this would be to add custom CSS that will overwrite the default WordPress icon classes. You can add this in functions.php of your theme:

 

function custom_admin_menu_icons_css() {
    ?>
    <style>
        /* Example: Change Dashboard icon */
         #adminmenu .dashicons-dashboard:before{
            content:"\f227";
         }
        /* Add other CSS icons styles */
    </style>
    <?php
}

add_action( 'admin_head', 'custom_admin_menu_icons_css' );

You can find all codes at WordPress Dashboard Dashicons page.

However, the easiest way to change admin menu icons is by using Cusmin plugin for WordPress. It supports WP Dashboard icons but also Font Awesome icons.