Professional Educator & WordPress Expert

How to Add Custom Icons to Gutenberg Editor Blocks in WordPress Using Dashicons or SVG

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.

Example of icons with default 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.

Example of custom block with ‘admin-settings’ dashicon

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.