How to Set Block Icons on the WordPress Plugins Repository

On a plugin’s WordPress Plugins repository page, you might see a list of blocks with a set of icons. One of the promises of using Block.json to initialize your blocks is that you can include an SVG icon to represent your block. With this, you can get creative.

This quick tutorial will cover what’s needed to ensure your icons appear correctly.

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 itWebShare

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

Obtaining block icons on WordPress.org is a relatively straightforward process, albeit with some caveats.

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