Custom svg admin menu icon in WordPress Custom svg admin menu icon in WordPress wordpress wordpress

Custom svg admin menu icon in WordPress


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="http://www.w3.org/2000/svg"><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.

enter image description here


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.


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

The "," is important

'data:image/svg+xml;base64,'.$icon_data_in_base64