How to Add Custom Dashboard Icons in WordPress

Do you want to add a custom dashboard icon in WordPress? Often people replace the WordPress logo with a custom dashboard icon for branding purposes. In this article, we will show you how to add a custom dashboard icon in WordPress for branding.

Custom dashboard logo in WordPress

Method 1: Add a custom dashboard logo in WordPress using a plugin

This method is easier and is recommended for most beginners.

The first thing you need to do is install and activate the plugin White Label CMS . For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » White Label CMS page and click on the Brand tab to expand it.

Adding custom dashboard logo in WordPress using White Label CMS plugin

Next, you need to click ‘Yes’ to hide the WordPress logo and then upload your own custom logo. Custom logos must be exactly 16 x 16 pixels in size.

Don’t forget to click the save changes button to save your settings.

Custom logo in WordPress dashboard

In addition to a custom dashboard logo, White Label CMS also offers other features to rebrand your WordPress installation. See our guide on how to white label the WordPress admin dashboard for detailed instructions.

Method 2: Manually Add Custom Dashboard Logo in WordPress

This method is for users who are comfortable pasting code snippets in WordPress.

First, you need to save your custom logo as a custom-logo.png file on your computer. It should be exactly 16 x 16px in size.

Once you have your custom logo, you need to upload it to the /wp-content/themes/your-theme/images folder using FTP . If your theme doesn’t have an images folder, then you need to create it.

After uploading your custom logo image, simply add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_custom_logo() {
echo '

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;


//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

This code simply adds the necessary CSS to display your custom logo in the WordPress admin bar.

That’s all we hope this article helped you learn how to add custom dashboard icons in WordPress for branding. You may also want to check out our guide on how to hide unnecessary items from WordPress with Adminimize.


By Nguyen Manh Cuong

Nguyen Manh Cuong is the author and founder of the tvtoolsalterid blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.

Leave a comment

Your email address will not be published. Required fields are marked *