How to Add Icons in WordPress Block Editor (Without Plugin)

In web design, we use icons to indicate information as a visual in small elements. Adding icons to your page also can replace words, making your web design look simpler. For example, you can put a phone icon to replace the use of the word “call center.”

This article will show you how to add icons in WordPress Block Editor/Gutenberg without the help of any plugins, yap without using any plugins!

Steps to Add Icons in Gutenberg

Step 1: Choose your Preferred Icon

First, choose what icon you want to add to your WordPress block editor. Many great icon libraries and toolkits are available on the internet, such as Font Awesome, Iconify, etc (Read: 8 Best Font Awesome Alternatives for SVG Icons). In this tutorial, we will use Iconify to search for the icons we want to add to Gutenberg. Iconfy allows you to use many open-source icon sets with a wide choice of open-source icon components, so we recommend you use Iconify to make it easier.

Alright, go to the Iconify site, then search and choose what icon you like to add to the WordPress block editor.

Step 2: Copy the SVG Icon’s Code

Once you choose the icon, please copy the SVG code of the icon.

Step 3: Convert SVG code to URL

Now you got the code but can’t necessarily use it to add icons in the WordPress Gutenberg editor. You need to convert the SVG code to a URL. So, how to convert the SVG code to the URL? Luckily, we have an online free tool that can help encode the SVG code to URL data that we can use later to add an icon in the WordPress block editor.

Visit this website and paste the SVG icon’s code into the Insert SVG field.

Afterward, you need to copy the image URL. Copy the code without the brackets and quotation marks on the Ready for CSS field. An image URL is located between the brackets and quotation marks (see the highlighted text in the image below).

Step 4: Add an Icon with a URL

Well, now we’re moving on to the last step. Go to the WordPress block editor and add an Image block to the editor. Once you add the Image block, click the Insert from URL button, then paste the image URL to the available field.

That’s it. Now the SVG icon is added to WordPress Gutenberg as an Image block.

The Bottom Line

This article shows how easily you can add icons in WordPress block editor/Gutenberg without the help of any plugins. WordPress block editor or Gutenberg is an interpretation of WordPress itself–simple and easy to use. Because of their simplicity, they have some limitations; and adding icons is one example.

Building and designing with the WordPress website builders, such as Elementor and Divi Builder, might be a better option if you want to get more features so that your creativity in designing your website has no limits.