How to add vector icons to Gutenberg without a plugin

I love icons and I miss a native feature to use icons in the great Gutenberg editor. ALso I love vectors and most of the icon libraries offer great iconfonts to use icons as perfectly scalable vectors. Also there are huge websites with plenty of awesom SVG icons out there.

Still Gutenberg does not offer a native feature to add neither of both. Also WordPress still refuses to accept SVG for security reasons (though there is a nice plugin called Safe SVG).

So I came across this awesome tutorial to safely use SVG icons in Gutenberg:

Go to Iconify and search for a nice icon

Convert the SVG raw code to „data URL“

Now you can not simply enter this code in Gutenberg editor assuming this will add it as an image there. Fortunately, there is a workaround to make it happen. And for that, we need to use another online free tool which will encode the SVG code to something we can use as an image URL in the Gutenberg Image block. 

Re render the code to create raw data

Go to this site and paste it below to transform the code on the fly. Now you need to copy the image URL only from the “Ready for CSS” box. The image URL you need to copy is in between url(“COPY_CODE_HERE“). So just copy that code without brackets or quotation marks.

Insert the code of the SVG icon URL in Gutenberg

Finally, you get the SVG icon encoded URL that can be used in Gutenberg Image block. Now in Gutenberg editor take an Image block and insert that URL which you have copied in that.

You are done

Wow, that’s it. You now have added an SVG icon as an image block in Gutenberg. That is awesome and can be scaled and used like a real image. Now that means you get all the image block features with it as well. You can adjust the size of the icon, set alignment, etc.

Well, this method is obviously useful if you are looking to add a few icons on a page and you are not willing to load a Gutenberg plugin for that. But if you are going to use many icons and need more features to manipulate the icon easily you can search for icon blocks at Gutenberg Block Directory