Custom svg admin menu icon in WordPress

I'm really counting on your help in this one. I searched a lot and found no solution. I want to have a custom icon for my plugin in admin menu, and I want it to integrate well with the color scheme.

I looked here Under $icon_url

(WP 3.8+) If 'data:image/svg+xml;base64...', the specified SVG data image is used as a CSS background

However, if I put a URL to an SVG icon there, all I get is an img with SVG in its src attribute, so it doesn't integrate at all with the color scheme. It's supposed to be a CSS background.

Also, I don't understand this data:image/svg+xml;base64... What does it mean exactly?

I tried embedding inline SVG in the $icon_url but obviously, it won't work, but I just had to try it.

Dashicons are not an option, there's no icon there suitable for my project.


Step by Step example using FontAwesome:

Including color and custom post types 👍
1 Pick an icon
2 Get the SVG
Bring the SVG into Wordpress
  • Inside your functions.php, where you register your custom post type, add the following snippet:

    add_action('init', 'my_init');
    function my_init() {
        register_post_type('labs', [
            'label' => 'Labs',
            // .. ect
            'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns=""><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')

Important notes:

  • The contents of base64_encode is the copied raw string from Font Awesomes github page.
  • You need to change two small things within the svg string:
    • 1: Add a fill="black" attribute to the path/s elements - this allows the color to be change by Wordpress.
    • 2: (optional) Change the width and height to 20, as this is the admin width/height size and seems to result it a crisper result.

I got the solution by analyzing Woocommerce. If no url is supplied to the add_menu_page function, WordPress uses the default dashicon. So it's just a matter of overriding the default style. Like add this to admin styles:

#adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
    font-family: your_font !important;
    content: '\eiconid';
    font-size: 1.3em!important;

I converted svg to font on Icomoon.

Just thought I should add the following:

To get the SVG to automatically re-colour to match the theme, it needs to have a fill attribute set. This is because it's dynamically altered through script, and it otherwise won't know what part to re-colour.

After you have converted the icondata in base 64, correct way to put it is like this;

The "," is important


The svg file must have the fill attribute set in it to work. Open the svg file in an editor like Atom, and make sure it looks like this:

<path fill="black" d="....

You can put any kind of color you want in there, WordPress uses JS to automatically update the fill value based on the admin theme.

You have to paste a Base64 encoded image (data URI), into the src...

More on Wikipedia.

Need Your Help

Difference in c_str function specification between C++03 and C++11

c++ string c++11 c++03 c-str

In the C++ reference of c_str() in std::string the following appears:

"Link with editor" in android studio

android eclipse editor android-studio

What is the equivalent option in Android studio to Eclipse "Link with editor"?