Add Custom Icons to WordPress Admin Menu Easily

How to add custom icons to wordpress admin menuWordpress admin menu custom icon tutorialChange wordpress admin menu iconsAdd svg icon to wordpress admin menuCustomize wordpress admin menu iconsWordpress admin menu icon pluginCustom icon for wordpress admin dashboardWordpress admin menu icon changeAdd custom image to wordpress admin menuWordpress admin menu icon customization

Explanation

Want to jazz up your WordPress admin menu with custom icons? Here's how you can do it without breaking a sweat.

Change Existing Icons:

To change the icon for the Dashboard, use a special code called Dashicons. For example, '\f120' changes the Dashboard icon.
Similarly, you can change the Posts menu icon using '\f109'.

Add Custom SVG Icons:

If you have a specific SVG icon, you can set it for a menu item by specifying the path to your SVG file. This will replace the default icon with your custom image.
Ensure your SVG file is accessible and the path is correct.

Create a New Menu with a Custom Icon:

You can add a new menu item with a default Dashicon. For instance, 'dashicons-admin-generic' is used here.
To replace this with your SVG, use the same method as above by specifying the SVG path.

These tweaks are added to the admin area using a bit of CSS magic. Just make sure to place the code in your theme's functions file, and you're good to go!

Code
// Function to add custom icons to WordPress admin menu
function wp_dudecom_custom_admin_menu_icons() {
    ?>
    <style>
        /* Change the icon for the Dashboard menu item */
        #adminmenu #menu-dashboard div.wp-menu-image:before {
            content: '\f120'; /* Dashicons code for a custom icon */
        }

        /* Add a custom SVG icon to a specific menu item */
        #adminmenu #toplevel_page_custom_menu div.wp-menu-image {
            background-image: url('path-to-your-icon.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        /* Example: Change the icon for the Posts menu item */
        #adminmenu #menu-posts div.wp-menu-image:before {
            content: '\f109'; /* Dashicons code for a custom icon */
        }
    </style>
    <?php
}
add_action('admin_head', 'wp_dudecom_custom_admin_menu_icons');

// Function to register a custom admin menu with a custom icon
function wp_dudecom_register_custom_menu_page() {
    add_menu_page(
        __('Custom Menu Title', 'textdomain'),
        __('Custom Menu', 'textdomain'),
        'manage_options',
        'custom_menu_slug',
        'wp_dudecom_custom_menu_page',
        'dashicons-admin-generic', // Default Dashicon
        6
    );
}
add_action('admin_menu', 'wp_dudecom_register_custom_menu_page');

// Callback function for the custom menu page
function wp_dudecom_custom_menu_page() {
    echo '<h1>' . __('Welcome to the Custom Menu Page', 'textdomain') . '</h1>';
}

// Function to enqueue custom SVG icon for the custom menu
function wp_dudecom_enqueue_custom_admin_icons() {
    ?>
    <style>
        #adminmenu #toplevel_page_custom_menu_slug div.wp-menu-image {
            background-image: url('path-to-your-custom-icon.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
    <?php
}
add_action('admin_head', 'wp_dudecom_enqueue_custom_admin_icons');

Instructions

File Location: Add the following code to your theme's functions.php file or a custom plugin file.

Prerequisites:

Ensure you have access to your WordPress theme files or a custom plugin.
Have the path to your custom SVG icons ready if you plan to use them.

Implementation Steps:

Open your WordPress theme's functions.php file or create a new custom plugin file.
Copy and paste the provided code into the file.
Replace 'path-to-your-icon.svg' and 'path-to-your-custom-icon.svg' with the actual paths to your SVG files.
Save the changes to the file.
Log in to your WordPress admin dashboard to see the changes in the menu icons.

Notes:

Ensure your SVG files are uploaded to your server and the paths are correct.
If you encounter any issues, double-check the code for any syntax errors.

Need help with implementation or want more advanced functionality? Visit wp-dude.com for expert WordPress assistance.