Create Custom SVG Admin Icons in WordPress

November 25, 2020 Posted by Danilo Andreini

This article explains how to create a custom SVG icon for an administrative menu of WordPress.

Create the icon in Illustrator

Create a new document with Illustrator, and under the Project Details section, set the dimension of the image. Any size is fine as long as the width and height are equal.

A simple square icon realized in Illustrator
The 20×20 menu icon in Illustrator.

It’s now the time to create the actual SVG icon. Use your favorite process to create the icon, then set a fill color for all the shapes used to represent a positive space in the image.

WordPress replaces all the SVG menu icons fill colors with the color scheme base color (the base color of the color scheme associated with the user) when the administrative area loads. The wp-admin/js/svg-painter.js file performs this process.

When creating an SVG admin icon with Illustrator, please consider what follows:

  • WordPress does not recolor the strokes, so don’t use them in the icon (use the Object -> Expand Illustrator function if needed)
  • An SVG with a 20 x 20 width/height is ideal
  • Hidden layers increase the SVG and Base64 size, so remove them before saving the icon.

Convert the SVG icon in the base64 format

The Base64 representation of the SVG data is required to create a custom admin icon with this method. In this case, to convert the SVG icon created with Illustrator in the Base64 format, you can use an online tool like SVG to Base64.

Base64 data generated by the Base64.Guru website
The Base64 data generated by the Base64.Guru website

Add the SVG icon in WordPress

As states in the add_menu_page() function documentation, the parameter used to define the menu icon accepts a Base64-encoded SVG using the data URI scheme.

//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=';

//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;

This complete example generate a custom menu named “Example” with a square icon provided to WordPress in the data URI scheme format.

function register_menu_with_custom_svg_icon() {

//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=';

//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;

add_menu_page(
'Example',
'Example',
'manage_options',
'example',
'',
$icon_data_uri,
);

}

add_action( 'admin_menu', 'register_menu_with_custom_svg_icon' );
Menu with a custom SVG icon
The new “Example” menu with the SVG icon created in this tutorial