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.

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
Thank you!
These days I’m reading your fantastic post on Gutenberg … really well done!
Great job misha! :)
About this post I add that alternatively you can also use dashicon in this way:
… maybe this can help someone
And misha … please don’t stop !!! :D
Hi Alessio,
Thanks! I take a little pause, but I am going to continue with the new tuts very soon π
Thanks!