How to Set Block Icons on the WordPress Plugin Directory

One of the promises of using Block.json to initialize your blocks is that you can include an SVG icon to represent your block.

This quick tutorial will cover what’s needed in order for your icons to show up properly.

Step 1: Find your SVG

For brevity, I’m going to use Font Awesome to grab the SVG I want and show you how to add it to Block.json.

Here is the SVG I picked out:

The resulting SVG code is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z"/></svg>Code language: HTML, XML (xml)

Step 2: Strip out the unnecessary bits (e.g., comments, whitespace)

Strip out things like HTML comments and whitespace.

The modified SVG code from above would be:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z"/></svg>Code language: HTML, XML (xml)

Step 3: Set a fill color

WordPress.org doesn’t set colors for you, so you’ll have to do this yourself.

Depending on the SVG, you can set the fill attribute on the path tag.

For this example, I’m going to set the SVG to red.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FF0000" d="M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z"/></svg>Code language: HTML, XML (xml)

Step 4: Change the quotes from double to single quotes

When editing the raw SVG, you will have to convert the quotes from double quotes to single quotes. This is so it can live inside Block.json as a string. It should just be a simple search and replace.

Here’s the resulting SVG with single quotes:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#FF0000' d='M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z'/></svg>Code language: HTML, XML (xml)

Step 5: Add the SVG to Block.json

Here’s a sample Block.json with the above SVG included.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"title": "My Sample Block",
	"apiVersion": 2,
	"name": "dlxplugins/sample-block",
	"category": "block-category",
	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#FF0000' d='M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z'/></svg>",
	"description": "A sample block.json file",
	"version": "1.0.0",
	"textdomain": "sample-block"
}Code language: JSON / JSON with Comments (json)

Step 6: You’re done!

Now package up your plugin and submit the changes to .org.

Pin itShare

A few more example Block.json files

Here are a few more examples of icons I’ve included in Block.json.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"title": "Material UI Alert",
	"apiVersion": 2,
	"name": "mediaron/alerts-dlx-material",
	"category": "alertsdlx",
	"icon": "<svg version='1.1' viewBox='0 0 600 477' xmlns='http://www.w3.org/2000/svg'><g><path d='m0 260v-260l225 130v86.6l-150-86.6v173z' fill='#1EA0FF'/><path d='m225 130 225-130v260l-150 86.6-75-43.3 150-86.6v-86.6l-150 86.6z' fill='#156DC1'/><path d='m225 303v86.6l150 86.6v-86.6z' fill='#1EA0FF'/><path d='m375 476 225-130v-173l-75 43.3v86.6l-150 86.6zm150-346v-86.6l75-43.3v86.6z' fill='#156DC1'/></g></svg>",
	"description": "An alert and notification block inspired by Material UI.",
	"keywords": ["alert", "info", "hint", "success", "error", "notice", "notification", "warning", "material"],
	"version": "1.0.0",
	"textdomain": "alerts-dlx"
}Code language: JSON / JSON with Comments (json)

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"title": "Bootstrap Alert",
	"apiVersion": 2,
	"name": "mediaron/alerts-dlx-bootstrap",
	"category": "alertsdlx",
	"icon": "<svg viewBox='0 0 167 134'><path fill='#6500FB' d='M34.617,0.282c-9.51,0 -16.546,8.324 -16.231,17.351c0.302,8.672 -0.091,19.904 -2.918,29.063c-2.837,9.187 -7.633,15.006 -15.468,15.753l0,8.435c7.835,0.747 12.631,6.567 15.468,15.753c2.827,9.16 3.22,20.391 2.918,29.064c-0.315,9.025 6.721,17.35 16.233,17.35l97.443,-0c9.51,-0 16.545,-8.324 16.23,-17.35c-0.302,-8.673 0.091,-19.904 2.918,-29.064c2.838,-9.186 7.622,-15.006 15.457,-15.753l-0,-8.435c-7.835,-0.747 -12.619,-6.566 -15.457,-15.753c-2.827,-9.158 -3.22,-20.391 -2.918,-29.063c0.315,-9.026 -6.72,-17.351 -16.23,-17.351l-97.446,0l0.001,0Zm78.377,81.728c0,12.429 -9.271,19.967 -24.656,19.967l-26.191,0c-1.55,0 -2.825,-1.275 -2.825,-2.824l0,-64.972c0,-1.55 1.275,-2.825 2.825,-2.825l26.041,-0c12.829,-0 21.248,6.949 21.248,17.619c0,7.488 -5.663,14.193 -12.88,15.367l0,0.391c9.824,1.078 16.438,7.88 16.438,17.277Zm-27.512,-41.699l-14.934,-0l0,21.093l12.578,-0c9.723,-0 15.084,-3.915 15.084,-10.914c0,-6.558 -4.61,-10.179 -12.728,-10.179Zm-14.934,29.462l0,23.247l15.483,-0c10.123,-0 15.486,-4.062 15.486,-11.697c-0,-7.635 -5.513,-11.55 -16.137,-11.55l-14.832,-0Z'/></svg>",
	"description": "An alert and notification block inspired by Bootstrap.",
	"keywords": ["alert", "info", "hint", "success", "error", "notice", "notification", "warning", "bootstrap"],
	"version": "1.0.0",
	"textdomain": "alerts-dlx"
}Code language: JSON / JSON with Comments (json)

Conclusion

Getting block icons on WordPress.org is a fairly easy process with some caveats.

Just make sure that all the path elements have a fill attribute so that the color and style shows up on the WordPress Plugin Directory.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

First Last

Email(Required)

Δ

Published On: on October 4, 2022

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.