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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Import __ from i18n internationalization library | |
| const { __ } = wp.i18n; | |
| // Import registerBlockType() from block building libary | |
| const { registerBlockType } = wp.blocks; | |
| // Import the element creator function (React abstraction layer) | |
| const el = wp.element.createElement; | |
| /** | |
| * Register Block using default icon options. | |
| * | |
| * @param {String} name Block name, namespaced | |
| * @param {Object} settings Block settings | |
| * @return {?WPBlock} Return the block or 'undefined' | |
| */ | |
| registerBlockType('js4wpgb/static-content', { | |
| title: __('Custom Block', 'JS4WPGB'), | |
| // Icon for the block | |
| // Choose from here by default https://developer.wordpress.org/resource/dashicons/ | |
| icon: 'admin-settings', | |
| category: 'common', | |
| edit( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| }, | |
| save( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| } | |
| }); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Import __ from i18n internationalization library | |
| const { __ } = wp.i18n; | |
| // Import registerBlockType() from block building libary | |
| const { registerBlockType } = wp.blocks; | |
| // Import the element creator function (React abstraction layer) | |
| const el = wp.element.createElement; | |
| /** | |
| * Example of a custom SVG path taken from fontastic | |
| */ | |
| const iconEl = el('svg', { width: 20, height: 20 }, | |
| el('path', { d: "M12.5,12H12v-0.5c0-0.3-0.2-0.5-0.5-0.5H11V6h1l1-2c-1,0.1-2,0.1-3,0C9.2,3.4,8.6,2.8,8,2V1.5C8,1.2,7.8,1,7.5,1 S7,1.2,7,1.5V2C6.4,2.8,5.8,3.4,5,4C4,4.1,3,4.1,2,4l1,2h1v5c0,0-0.5,0-0.5,0C3.2,11,3,11.2,3,11.5V12H2.5C2.2,12,2,12.2,2,12.5V13 h11v-0.5C13,12.2,12.8,12,12.5,12z M7,11H5V6h2V11z M10,11H8V6h2V11z" } ) | |
| ); | |
| /** | |
| * Register Block using a custom icon. | |
| * | |
| * @param {String} name Block name, namespaced | |
| * @param {Object} settings Block settings | |
| * @return {?WPBlock} Return the block or 'undefined' | |
| */ | |
| registerBlockType('js4wpgb/static-content', { | |
| title: __('Custom Block', 'JS4WPGB'), | |
| icon: iconEl, | |
| category: 'common', | |
| edit( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| }, | |
| save( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| } | |
| }); |
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.
WordPress Educator Zac Gordon 
I have been using Gutenberg for client blogs. I’m mainly using Gutenberg for live editing. It is a really wonderful plugin. I’ve added SVG custom icon by using this tutorial. Thanks
LikeLike