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:

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!

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 SVG icons in block.json

But the main question – is it possible to use custom SVG icons in your block.json file? Maybe this way:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"icon": "<svg width=\"20\" height=\"20\" ... ",

Or this way:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"icon": "file:./assets/icon.svg",

And… it seems like it is not possible at this moment, becase in both cases what we provided to icon parameter is going to be displayed just as a part of CSS class.

If you know the way, please let me know in the comments and I will update this tutorial right away! But for now we just have to combine block.json metadata with metadata in JavaScript, please check the first code example here.

# Gutenberg, Gutenberg Blocks

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