Customizing the WordPress admin area can be a rewarding experience, making it feel more personalized. Small adjustments, like changing icons, can enhance the overall appearance of the dashboard, especially when working on client projects or long-term sites.
While the default WordPress icons serve their purpose, they lack uniqueness. If you’ve created custom post types or designed a specific admin interface, the standard icons may not accurately represent your site’s brand or objectives.
Over the years, we’ve explored various techniques to modify admin icons—some straightforward and others more complex. Whether you’re looking for a quick plugin solution or a method to change icons using code, we will guide you through both approaches step by step.
This guide is ideal for site owners, developers, and freelancers who want their WordPress dashboard to match the custom look of their website’s front end.
What Are WordPress Admin Icons?
Admin icons are the small graphics displayed next to each item in the WordPress dashboard menu. They enable quick identification of different sections of your site, such as Posts, Pages, Plugins, and Settings.
By default, WordPress utilizes an icon font known as Dashicons, which has been in use since 2013 with few updates. While functional, it can appear somewhat outdated or generic, particularly for custom-built websites.
Customizing these icons revitalizes the admin area, allowing you to align them with your brand, streamline the menu for clients, or simply inject some personality into your site.
If you’re creating a site for someone who is new to WordPress, updating the icons can help them navigate more efficiently. This small adjustment can significantly enhance the overall experience of the dashboard.
Now, let’s explore two straightforward methods to change admin icons: one using a plugin and the other with a simple code snippet.
- Method 1: Change Admin Icons in WordPress Admin Using a Plugin
- Method 2: Manually Change Admin Menu Icons Using a Code Snippet
- Bonus: Add Icons for Custom Post Types in WordPress
- Explore More Ways to Customize Your WordPress Admin Area 🎁
Method 1: Change Admin Icons in WordPress Admin Using a Plugin
For this method, we will utilize the Admin Menu Editor plugin, which, as its name implies, enables easy customization of WordPress admin menus.
First, install and activate the Admin Menu Editor plugin. For detailed instructions, refer to our tutorial on how to install a WordPress plugin.
Once the plugin is activated, navigate to the Settings » Menu EditorOn this page, you will find your WordPress admin menu displayed in a user-friendly interface (UI) that allows for easy customization.
The UI features a toolbar at the top, enabling you to add or remove menu items, insert separators, copy and paste items, and more.
Below the toolbar, you can click on any menu item to expand it and view its specific settings. For example, we have expanded the Posts menu item.
When you expand a menu item, additional options will appear. If it’s a parent menu, you’ll also see any child menu items listed in the right column.
To add, replace, or remove a menu icon, click on the ‘Show advanced options’ link located at the bottom.
Next, click the button next to the ‘Icon URL’ field.
This action will open a popup displaying all available Dashicons. Alternatively, you can click the ‘Media Library’ button to upload your own image icon.
If you choose to upload your own image icon, we recommend using a 32×32 pixel image in transparent PNG format for best results.
After selecting your icon, click the ‘Save Changes’ button to apply your settings.
Your custom menu icon will now be visible in the admin menu.
Method 2: Change Admin Menu Icons Manually with a Code Snippet
This method involves adding custom code to modify the icons.
If you haven’t done this before, we suggest checking out our guide on how to add custom code in WordPress.
The simplest and safest method to add custom code in WordPress is by using WPCode. This is the top WordPress code snippets plugin, allowing you to safely insert custom code, CSS, and HTML into your WordPress site without the risk of causing errors.
Important Note:The plugin also offers a free version called WPCode Lite, which is sufficient for basic needs. However, the pro version includes additional features that may be beneficial.
Example 1: Changing an Icon Using Default Dashicons
In this example, we will utilize the default Dashicons to replace an icon from the current icon set.
It’s worth mentioning that WordPress automatically loads Dashicons, which are optimized for performance, ensuring that using them won’t affect your page load speed.
Before executing the code, make sure to note the following:
- The URL of the menu item you wish to modify
- The name of the icon you want to apply
First, locate the page URL for the menu item you want to customize. For example, if you want to change the icon for the ‘Posts’ menu.
Hover your mouse over the Posts menu to view the URL in your browser’s status bar at the bottom of the page. You only need the last part of the URL, which in this case is edit.php.
Next, visit the Dashicons website and select the icon you wish to use.
Clicking on any icon will display its name and slug at the top. Make sure to copy the slug, as you will need it for the next step.
Once you have that, navigate to the Code Snippets » + Add Snippet page and hover over the ‘Add Your Custom Code (New Snippet)’ box.
Then, click on the ‘+ Add Custom Snippet’ button that appears.
On the following screen, enter a title for your snippet and choose PHP Snippet from the Code Type dropdown.
After that, you can copy and paste the following code into the code editor box:
function change_post_menu_icon() { global $menu; // Loop through the menu items foreach ($menu as $key => $menu_item) { // Find the "Posts" menu item (default URL is 'edit.php') if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') { // Change the icon to a different Dashicon class $menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug } }
}
add_action('admin_menu', 'change_post_menu_icon');
Remember to update the dashicons-format-aside with the slug you copied earlier.
Your code will look like this in the editor:
Next, you need to specify where WordPress should execute this code.
Admin menu icons are displayed in the WordPress admin area. On the same page, scroll to the Insertion section and select ‘Admin Only’ under the Location option.
Finally, set your snippet to Active and click the ‘Save Snippet’ button to apply your changes.
WordPress will now use the selected icon for the Posts page.
Example 2: Use a Font Awesome Icon for a Menu Item in the WordPress Admin Area
The default Dashicon library offers a limited selection of icons. Fortunately, you can enhance your options by using a font and icon library like Font Awesome, which provides a much broader range of icons.
Keep in mind that integrating Font Awesome will require loading additional resources, which may cause a slight delay in your WordPress admin area (typically just a few milliseconds).
Before adding any code, you need to select the icon you wish to use. Visit the Font Awesome website and navigate to the Free Library.
Here, you will find all the icons available for free.
Select the icon you want to use, and it will open in a popup window. From there, copy the icon’s Unicode value.
Next, navigate to the Code Snippets » + Add Snippet section in your WordPress dashboard.
Click on the ‘+ Add Custom Snippet’ button located within the ‘Add Your Custom Code (New Snippet)’ box.
On the subsequent screen, enter a title for your snippet and choose PHP Snippet as the Code Type option.
Then, you can copy and paste the following code into the code editor box:
// Load Font Awesome in the WordPress admin area
function enqueue_font_awesome() { wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add a custom class to the Posts menu item
function add_custom_post_menu_class() { global $menu; foreach ($menu as $key => $menu_item) { if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') { $menu[$key][4] .= ' custom-post-menu-class'; } }
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '
‘; } add_action(‘admin_head’, ‘custom_admin_menu_icon’);
