Get all patterns & templates for $99. Special intro price!✨
Qara Yahya

Qara Yahya

Article

How to add custom icons in Gutenberg (without plugin)

Hey there, WordPress enthusiasts! Today, we will walk you through a handy trick to add an icon to your WordPress site using only Gutenberg blocks. Guess what? No plugins are required!

Here’s the thing, Gutenberg’s image block is more versatile than you might think. You can actually use it to add an icon by inserting a URL-encoded SVG. Sounds complicated? Don’t worry, we’re breaking it down for you.

Step 1: Get your SVG icon ready.

You can find plenty of free SVG icons online, or design one yourself if you’re feeling creative. One such website is Basicons or Google Icons. It offers a wide array of simple SVG icons that you can use for your website.

Basicons
Google icons

Step 2: Convert SVG code to data URL.

Once you have your SVG icon, you need to URL-encode it. A quick and easy way to do this is by using an online tool like Yoksel’s URL Encoder:

1. Open the Yoksel’s URL Encoder website in your browser, and paste your SVG icon code in the “Insert SVG” box.

image 1

2. The tool will automatically URL-encode your SVG. The URL-encoded SVG will appear in the “Ready for CSS” box.

3. Copy the image URL. To do this, select the code within the “Ready for CSS” field, but omit the brackets and quotation marks. The image URL is found between these brackets and quotation marks, as shown in the highlighted section of the image below.

image 2

Voila! You now have your URL-encoded SVG ready to use.

Step 3: Insert the Icon with a URL

Next, go to your WordPress site and either create a new post or edit an existing one. Insert a new Gutenberg image block, and instead of uploading an image, paste the URL-encoded SVG directly into the image link field.

image 3
image 4

And that’s it! You’ve successfully added an SVG icon as an image block in Gutenberg. This allows you to take advantage of all the features available in the image block, such as resizing the icon, setting its alignment, and more.

This method is ideal for adding a few icons to a page without the need to install additional Gutenberg plugins. However, if you plan to use many icons and require more advanced features for easy manipulation, consider exploring The Icon Block plugin: https://wordpress.org/plugins/icon-block/.

Here’s an example I quickly created using this tutorial:

image 5
image 6

Remember, creativity has no limits. There’s so much more you can do with Gutenberg blocks. Keep exploring and happy WordPress-ing!