WordPress Admin Icons: How to Add or Change

WordPress is the most customizable CMS platform. Any aspect of the platform can be customized to meet your needs, including something as trivial as changing admin icons.

While this has no real value, WordPress allows you to change the icons to whatever you want or remove them entirely if you know how. There are two main methods to achieving this.

The first is to use a plugin, and the second is to manually edit your site’s code to edit the admin icons. Neither method is hard, but the plugin method is the recommended approach for most users.

Today, this tutorial will demonstrate two ways you can change admin icons in WordPress.

What Are Admin Icons?

When you enter the WordPress backend, the admin panel is located on your left-hand side. This is where you can access your posts, pages, settings, plugins, and more. Next to every option is a small icon.

These icons are identical on every WordPress install by default. The only exception is when a plugin adds its own icon to its admin panel option. This icon is usually just the plugin’s logo, but it can be something else.

Outside of personal preference, there is no point in changing these icons. But since the option exists, there’s also no reason not to.

That said, sometimes adding your own style can have benefits. For example, if you are designing a site for a customer, adding your custom icons can help make the installation feel unique or more stylized than by using the default images.

Method 1: Using Admin Menu Editor

The first method we will be looking at is using the Admin Menu Editor plugin. This is by far the easier method for beginners as you just need to install the plugin, go to the editor, and select to edit the admin icons.

The plugin itself comes with a variety of icons you can use to replace the default ones, but you are also free to upload your own to the media library. In either case, this process only takes a few minutes to complete.

With this said, it is worth pointing out that this plugin can fully edit the admin panel. You can rearrange what is on the admin panel, and even rearrange the extended options within each entry. You can also change the text.

While we are not covering that today, you may want to explore what the plugin can do to get the most out of it.

Step 1: Install Admin Menu Editor

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Admin Menu Editor in the available search box. This will pull up additional plugins that you may find helpful.

Find the Admin Menu Editor plugin, click the “Install Now” button, and activate the plugin.

Step 2: Change the Admin Icons

With this plugin, changing the admin icons is very quick. Start by clicking on Settings and selecting the Menu Editor option.

Here, you will see the current admin panel. You can select each one to begin editing. The process is identical regardless of which one you select. In this case, I am expanding the options for Posts.

You should see fields for the menu title, target page, and more. Ignore these for now and click on the “Show Advanced Options” link at the bottom right to open up additional settings.

Among these new options should be the Icon URL. Next to it will be the current icon on your admin panel. Click it to begin selecting a new icon. This will open up a small window that contains icons you can use.

Alternatively, you can click on the Media Library tab on this window to select an icon from your library.

The icon will replace what was there before. Click on the “Save Changes” button to finish.

If you look at the admin panel, you will see the new icon.

You can now repeat this step as many times as you want. Just to be clear, you can change multiple icons without having to save the changes; I was simply demonstrating how to change one at a time.

Method 2: Using Code to Change Admin Icons

The second method we will be covering is how to inject custom CSS to change the icons in WordPress. This method is far more involved, and not recommended for beginners because it is easy to make a mistake.

You need to identify the icon you want to replace and directly call and replace it. While it is not very difficult, it can be difficult to begin with if you are unfamiliar with CSS.

Note: Since you are directly editing code for your site, I highly recommend taking a minute to create a backup. This way if something does go wrong, you can quickly restore a working version of your site.

Step 1: Identify the Page URL and Icon Slug

There are two pieces of information you will need to change the admin icons in WordPress. These are the page URL and the icon slug. Neither is hard to locate, so let’s start with the page URL.

While this should be identical for most WordPress installs, there is a chance it is not, so we will manually check it. Simply hover over the icon you want to change on the admin panel.

You will see a URL appear at the bottom, all we need is the last part, which in my case is edit.php. Write this down for later.

Note: Each icon will have a different page URL, so you will need to repeat this for every icon you want to change.

Next, is getting the slug for the icon we want to change to. While you are free to make your own and store them in WordPress, let’s keep it simple and use the default icons in WordPress. We can get the names directly from WordPress by visiting the Dashicons website.

Once here, you will find a full list of the dashicons in WordPress. Locate the one you want to change to. When selected, you will be able to find the slug at the top, copy this for the next step.

You can use this to find the slug of any default icon in WordPress, so take full advantage of it.

Step 2: Add Code

Now that we have this information we can create a code snippet and add it to the functions.php file. First, the code snippet will be as follows:

function change_admin_icon() {
    global $menu;
     
    foreach ($menu as $key => $menu_item) {
        // Replace "edit.php" with the last part of the page URL
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][6] = 'dashicons-welcome-write-blog'; // Change this to icon slug you want to use on the admin panel
        }
    }
}
add_action('admin_menu', 'change_admin_icon');

There are only two things you will need to edit here. The first is replacing the edit.php with the correct page URL for the icon you wish to replace. For example, if you were trying to replace the comments icon, it would probably be edit-comments.php.

Second, you need to enter the icon slug for the icon you want to change to. In the above snippet, that would be the “dashicons-welcome-write-blog” portion of the code.

Now that you know what the snippet will be, you simply need to place it in the functions.php file. There are multiple ways to do this, but the quickest is to just use the theme file editor in WordPress.

Click on Appearance and select the Theme File Editor option.

Next, select the Theme Functions option on the right side for the theme you are currently using.

Once there, scroll to the bottom of the file, paste the above code snippet, while making the necessary edits, and click on the “Update File” button at the bottom.

Reload the site and check out the new icon. In my case, I replaced the icon for Posts.

And that’s it. You can use this method to replace multiple admin icons. However, if you do, you’ll need a unique function name for each one. In other words, you’ll need to replace “change_admin_icon” in the code snippet.

Change Your Admin Icons Today

As you can see, it is very easy to change admin icons in WordPress. While both methods are viable, I think the Admin Menu Editor plugin is the better option. It is easier to use and doesn’t require any coding.

That said, installing too many plugins can impact your site performance, even if the plugins are coded for optimization.

Speaking of performance, it is important to mention that if you upload custom ones, make sure they are sized properly. Failure to do so will create bigger file sizes that can result in longer load times.

This shouldn’t be a problem as long as you optimize the images. This will also help avoid any pixelation or image degradation.

I hope you found this tutorial helpful in learning how to quickly change your admin icons.

How easy was it for you to change your admin icons in WordPress? Why did you want to change your admin icons?

The post WordPress Admin Icons: How to Add or Change appeared first on GreenGeeks.