How to Set Gutenberg Block Icons

You can also download the source files from this video using the link below:

Sorry, but you don’t have access to the source files. Sign in or buy the course.

The first reasonable question that comes to mind is – “Where to get the icons?” We have two options here:

• You can use any icons from the WordPress Dashicons set. This icon set is already included with WordPress, so all you need to do is provide an icon slug (ID).
• Another option is using a custom SVG icon for that.

Below, we will discuss both of the options.

Using an Icon from the Dashicons Set

Let’s begin with the icons that are already available in the WordPress Block Editor. For example, since in this video course we’re working with the “Subscription form” block, I like this one.

This icon slug (ID) is buddicons-pm (not “dashicons-buddicons-pm”). Let’s add it to the block.json file right away.

Something like this should suffice:

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

Here you go:

Using a Custom SVG Icon for a Gutenberg Block

All right, but what about when the Dashicons icon set is not enough for your goals? Is it possible to use a custom SVG icon then?

Yes, of course, you can do that.

Unfortunately, in this case, we have to forget about the block.json file and set an icon directly on the client side with the help of the 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 a room for icon configuration, for example, we can set its foreground and background colors. An example:

registerBlockType(
	metadata,
	{
		icon: {
			foreground: '#fe0000',
			src: <svg ...

Custom SVG icons in block.json

But the main question is whether it is 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 maybe this:

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

And… it seems like it is not possible at this moment. In both cases, we are going to have something like this in the result:

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.

Gutenberg Block Development

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 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 X