How to Set an Icon for a Gutenberg Block

The first time this tutorial was published back in the beginning of 2019, just after Gutenberg editor became the part of WordPress core.

A lot has been changed since then. Setting an icon for a block has become so much simpler.

The reasonable question is – where to get the icons?

Dashicons Set

First of all you can use any icon from Dashicons set which is already included in WordPress admin. Just choose an icon from the website, copy its ID. For example for our “Subscription block” we need something with an envelope, don’t we?

I like this one. Its ID is buddicons-pm (not “dashicons-buddicons-pm”). Let’s add it in block.json:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "rudr/form",
	"title": "Subscription form",
	"category": "text",
	"icon": "buddicons-pm",
	
	...

Here we are:

how to set an icon for Gutenberg block

Use any custom SVG icon

But what to do if none of the Dashicons icons fits your purpose? Maybe to use any custom SVG icon then?

Unfortunately in this case we have to forget about block.json file and set an icon directly on the client side in registerBlockType() function.

registerBlockType(
	metadata,
	{
		icon: {
			src: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
				<g>
					<g>
						<path d="m499.2,203.5l-123-187.8c-3.2-4.9-10.1-6.9-15.8-2.1l-273.4,226.6c-4.2,3.1-5.3,9.4-2.1,13.6l124.1,187.8c3.8,5.7 11.6,5.1 14.7,2.1l273.4-226.6c4.2-3.1 5.2-9.4 2.1-13.6zm-147.1-155.6l-38,215.4-194.5-23.2 232.5-192.2zm-132.6,371.7l-104.1-158.7 207.1,25.5h1.1c4.2,0 9.5-4.2 10.5-10.5l39.5-227 103.5,157.8-257.6,212.9z"/>
						<polygon points="75.8,322 11,375.6 24.4,391.7 89.2,338.2"/>
						<polygon points="97,376.2 32.3,429.7 45.7,445.9 110.4,392.3"/>
						<polygon points="54.2,484.7 67.6,500.9 132.4,447.3 118.9,431.2"/>
					</g>
				</g>
			</svg>
		},
		edit: Edit,
		save: Save
	}
)

And… we have our custom SVG icon!

how to set a custom svg icon for a Gutenberg block

Here we also have some place for icon configuration, for example we can set its foreground and background color. An example:

registerBlockType(
	metadata,
	{
		icon: {
			foreground: '#fe0000',
			src: <svg ...
Custom icon foreground color.
Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter