How to Set Block Icons on the WordPress Plugin Directory

Block Icons on the 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"><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": "", "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.

Block.json Icon Output on WordPress.org
Block.json Icon Output on WordPress.org

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": "", "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": "", "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.

Ronald Huereca
By: Ronald Huereca
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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Default Avatar
Choose an Avatar

Shopping Cart
Scroll to Top