Custom SVG Icons in Gutenberg for Blocks, Toolbar and Sidebar Settings Tab

Either you create your own Gutenberg block or some buttons for block toolbar or maybe you decided to add some settings fields to the post – in any case you have to add icons. And in this tutorial I will show how.

#Gutenberg  /    /   1

First of all you have to choose an SVG icon, there are a lot of free and premium icons over the internet. So, this shouldn’t be tough.

In the examples below I am going to use this happy face icon – emoji-happy . But you can use anything you want.

Create a React Element for your Icon

The first thing you have to do once you downloaded the icon is to open it in your code editor. It should look something like this:

SVG icon code
SVG icon code

Now out task is to create a React element from this code, keep in mind, that we need only width and height attributes from the <svg> tag and only d attribute from the <path> tag.

const smileIcon = wp.element.createElement('svg', 
	{ 
		width: 20, 
		height: 20 
	},
	wp.element.createElement( 'path',
		{ 
			d: "M10 0.4c-5.302 0-9.6 4.298-9.6 9.6s4.298 9.6 9.6 9.6c5.301 0 9.6-4.298 9.6-9.601 0-5.301-4.299-9.599-9.6-9.599zM10 17.599c-4.197 0-7.6-3.402-7.6-7.6s3.402-7.599 7.6-7.599c4.197 0 7.601 3.402 7.601 7.6s-3.404 7.599-7.601 7.599zM7.501 9.75c0.828 0 1.499-0.783 1.499-1.75s-0.672-1.75-1.5-1.75-1.5 0.783-1.5 1.75 0.672 1.75 1.501 1.75zM12.5 9.75c0.829 0 1.5-0.783 1.5-1.75s-0.672-1.75-1.5-1.75-1.5 0.784-1.5 1.75 0.672 1.75 1.5 1.75zM14.341 11.336c-0.363-0.186-0.815-0.043-1.008 0.32-0.034 0.066-0.869 1.593-3.332 1.593-2.451 0-3.291-1.513-3.333-1.592-0.188-0.365-0.632-0.514-1.004-0.329-0.37 0.186-0.52 0.636-0.335 1.007 0.050 0.099 1.248 2.414 4.672 2.414 3.425 0 4.621-2.316 4.67-2.415 0.184-0.367 0.036-0.81-0.33-0.998z" 
		}
	)
);

As you probably know, usually wp.element.createElement is assigned to a custom variable (constant), there are two the most common ways to do it, the first one:

const el = wp.element.createElement;
const smileIcon = el('svg', 
	{ 
		width: 20, 
		height: 20 
	},
	el( 'path',
 
	...

Or the second one:

const { createElement } = wp.element;
const smileIcon = createElement('svg', 
	{ 
		width: 20, 
		height: 20 
	},
	createElement( 'path',
 
	...

Of course you can name all the variables as you want but I think the good practice is to either use el or createElement.

How to Add an Icon to your Gutenberg Block

Gutenberg allows you to create any custom blocks, and while creating the blocks, you have to specify an SVG icon. On the screenshot below I use the happy face icon.

Custom icon for a Gutenberg block
If you also want to deactivate all the unnecessary blocks, read this tutorial.

wp.blocks.registerBlockType function which allows you to create a block, has a specific parameter – icon. To this parameter you have to pass the React element of the icon we created in the step before.

const { registerBlockType } = wp.blocks;
const smileIcon = ... // I just do not want to copy the same code many times ;)
 
registerBlockType( 'misha/happyblock', {
 
	title: 'Happy block',
	icon: smileIcon,
	category: 'common',
 
	...

Icons for Toolbar Buttons

Either you create your custom block of maybe you decided to modify a default Gutenberg block – in both cases you can make modifications in the Toolbar, add some buttons as on the example below. And these buttons have to have icons! 🙃

Custom SVG icons for buttons in block toolbar

I’m going to publish a separate tutorial about creating your custom Toolbar buttons, but at this moment I just want to show how to use your custom icon there.

When you create a custom toolbar button, you have to use wp.components.Button.

const { Button } = wp.components;
const el = wp.element.createElement;
const smileIcon = ...
 
const toolbarButton = el(
	Button,
	{
		className: {
			// some class names will go here
		},
                onClick: function( e ) {
 			// some onClick event is here        
		}
	},
	smileIcon
)

Icons for Sidebar Settings Tabs

Last but not least – example of creating custom settings for Gutenberg. Did you know that meta boxes are obsolete? 😱

Just a joke 😁 You can still use meta boxes for post types that doesn’t use Gutenberg, but in Gutenberg I highly recommend to create beautiful settings tabs in the sidebar.

And yes, your custom tab has to have an icon!

How to add custom SVG icons for Gutenberg sidebar settings sections
You can see my custom tab under the Plugins section.

And below is a small piece of code how to add an icon to wp.plugins.registerPlugin function.

const { registerPlugin } = wp.plugins;
const smileIcon = ...
 
registerPlugin( 'misha-plugin', {
    icon: smileIcon,
    render: ...,
} );

More Gutenberg

Misha Rudrastyh
About the author Misha Rudrastyh

Passionate about WordPress and snowboarding, creating websites for over 10 years! Let's work together — just contact me.

If you are a developer too, subscribe to my facebook page.

Comments 1

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email