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.

Screen Shot 2017-12-07 at 4.51.01 PM

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.

default-gutenberg-icon.png

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.

gutenberg-dashicon-case-statement.png

Example of Dashicon component in Gutenberg Core assigning default SVG paths.

Creating Custom Gutenberg Block Icons Using SVG Paths

A lot of folks are going to want to create custom icons like this one.

custom-gutenberg-icon.png

Example of Custom Block with Custom SVG Icon

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.

One thought on “How to Add Custom Icons to Gutenberg Editor Blocks in WordPress Using Dashicons or SVG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s