Hey WordPress enthusiasts! In today’s tutorial, we’re going to show you an easy way to add custom icons in Gutenberg—and the best part? You won’t need any plugins! Let’s dive in and make your Gutenberg experience even more versatile.
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.
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.
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.
Voila! You now have your URL-encoded SVG ready to use.
Step 3: Add Custom Icons in Gutenberg
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.
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:
Remember, creativity has no limits. There’s so much more you can do with Gutenberg blocks. Keep exploring and happy WordPress-ing!
Leave a Reply