Add a Custom Icon to WordPress Admin Menu

Adding a custom icon to your WordPress admin menu gives your plugin or theme a unique and professional touch. Whether creating a new feature or a custom dashboard page, a personalized icon makes navigation easier and enhances user experience. Using add_menu_page(), you can create a new menu item, and adding a custom icon makes it more attractive and user-friendly. 

In this article, we’ll guide you on how to add a custom icon to WordPress admin menu. 

What Is add_menu_page()?

add_menu_page() is a function in WordPress that allows developers to add new menu items to the admin panel. You can customize the menu by giving it a title, a link to your page, and—most importantly—a custom icon to make it stand out.

Steps to Add a Custom Icon with add_menu_page()

Step 1: Open Your Plugin or Theme Functions File

1. Log in to your WordPress dashboard.
2. Go to Appearance > Theme File Editor or Plugins > Plugin File Editor if you’re working on a plugin.
3. Open the functions.php file or the main plugin file.

Step 2: Add Code to Create a Menu with a Custom Icon

Here’s a basic code example of how to add a menu page with a custom icon.

function my_custom_menu() {

    add_menu_page(

        ‘Custom Menu Title’, // Page title

        ‘Custom Menu’,        // Menu title

        ‘manage_options’,     // Capability

        ‘custom-menu-slug’,   // Menu slug

        ‘my_custom_function’, // Callback function

        ‘dashicons-coffee’,   // Custom icon

        6                     // Position

    );

}

add_action(‘admin_menu’, ‘my_custom_menu’);

This code creates a new menu in the WordPress admin area. Let’s break it down:

• Page title: What users see on the page.
• Menu title: What appears in the menu.
• Capability: Who can access the menu (e.g., manage_options).
• Menu slug: A unique identifier for the page.
• Callback function: The function that outputs content on the page.
• Icon: This is where we’ll focus next—either a built-in icon or a custom one.

Step 3: Use a Custom Icon

You can use Dashicons (WordPress’s built-in icons) or your custom icon.

Option 1: Use a Dashicon

In the example above, we used ‘dashicons-coffee’. You can find more Dashicons here. Just replace ‘dashicons-coffee’ with your preferred icon name.

Option 2: Use a Custom Icon (URL or Base64)

Here’s how you do it if you want to use a custom image instead.

function my_custom_menu() {

    add_menu_page(

        ‘Custom Menu Title’,

        ‘Custom Menu’,

        ‘manage_options’,

        ‘custom-menu-slug’,

        ‘my_custom_function’,

        ‘https://yourwebsite.com/path-to-icon.png’, // Custom icon URL

        6

    );

}

add_action(‘admin_menu’, ‘my_custom_menu’);

• Replace ‘https://yourwebsite.com/path-to-icon.png’ with the link to your icon.
• You can upload your icon to Media > Add New and use the file URL.

Step 4: Adjust the Icon with CSS (Optional)

If your custom icon doesn’t align well, tweak it with CSS. Here’s an example:

1. Go to Appearance > Customize > Additional CSS.
2. Add this CSS code:

#adminmenu .menu-icon-custom-menu-slug img {

    width: 20px;

    height: 20px;

    margin-top: 5px;

}

This CSS makes sure the custom icon fits perfectly in the admin menu.

Step 5: Test Your Custom Menu

1. Save your changes in the functions file or plugin file.
2. Go back to the WordPress dashboard.
3. Refresh the page, and you’ll see your new menu with the custom icon.

If the icon doesn’t show or looks off, try the following:

1. Clear your browser cache and reload the dashboard.
2. Check the icon URL for errors.
3. Make sure the icon size is small (20×20 pixels work best).
4. Use a Base64-encoded image if URL icons don’t display.

Conclusion

Using add_menu_page() with a custom icon helps make your WordPress admin dashboard more user-friendly. Whether you use a Dashicon or a custom image, the process is simple and enhances your plugin’s or theme’s appearance. Now that you know how to do it try adding your custom icon to give your WordPress menus a unique touch.