While working on my upcoming Gutenberg Editor Development Course I came across the question, “How do you create a custom icon for a block in the new Gutenberg editor.” This post explains my process in figuring this out 🙂
Block Icons in the Gutenberg Editor
With the new Gutenberg editor in WordPress you have the option to select an icon to go along with your custom block.
Using Default WordPress Dashicons as Block Icons
When you use registerBlockType() to create a new block, one of the parameters is “icon”. You can use any default WordPress Dashicons as an icon.
In the example below we are using one of the default dashicons named “admin-settings“. That will give us a settings icon like this.
Here is the code to make that work (focus just on the icon parameter):
Interestingly, if you look in the Gutenberg Core file ‘components/dashicon/index.js‘ you will see that dashicons are not being used the same way in blocks as they are in as in places like admin menus. Instead, there is a case statement against each default argument, assigning it the proper SVG path.
Creating Custom Gutenberg Block Icons Using SVG Paths
A lot of folks are going to want to create custom icons like this one.
In the example above, I used an SVG icon from this collection here. You can also create you own custom icons.
What you want to do is get the SVG path for your custom icon and create a custom SVG icon using that path.
Here is the code example from the image above. Pay attention to the top, where iconEl is created then passed as the value to the registerBlockType() icon parameter.
You can use this model in your own code and simply replace the path ‘d’ value with the path for your own custom icon svg.
To Learn More About Gutenberg Development
To learn more about creating custom blocks and more with the new Gutenberg editor for WordPress, check out my Gutenberg Development Course.