🥽 Beta testers needed! Stay up to date with the latest news from CTRLS.DEV

2 Methods to Quickly Add Any SVG to Gutenberg Editor

Learn how to add SVG icons to the Gutenberg editor.



Have you ever wanted to include and add an SVG icon or two on your page, via the Gutenberg editor? Without the need to install a WordPress plugin or load an entire set of web fonts.

Well here is a quick and easy trick that you may want to try.

Quick Intro

We are going to use the SVG file format which will make it easier for your icons to scale and have the same quality on different screens. Also, you could easily customize them with CSS (change color, add a background, etc.).

In addition, by using SVG we will have a faster load and improve page speed performance.

Note: There is already a built-in icon font within WordPress called Dashicons, but at this moment the icon set is pretty limited and it does not utilize the SVG file format. (very soon this might change and give us some additional icons in SVG)

The Trick

We will load the SVG as Image Block and you can either use the API URL or CSS method. The first one will load the SVG to Gutenberg via an API link and for the second one, we will convert the SVG into CSS and load it as a background image.

We are going to use Iconify.design library but you can utilize the same with any other SVG icons.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

SVG as URL

  1. Go To the Iconify library, they have close to 20,000 SVG icons.
  2. Select the icon set you want to use and then select the icon you want to load.
  3. Go to the CSS tab and copy the URL e.g. https://api.iconify.design/mdi:account-box-outline.svg
  4. Return back to your Gutenberg editor and add an Image Block.
  5. Use the Insert from URL button and paste the SVG URL we previously copied.

SVG as CSS

  1. Go To the Iconify library.
  2. Select the icon set you want to use and then select the icon you want to load.
  3. Go to the SVG tab and copy the SVG tag contents, for example (see below).
  4. Go the URL Encoder for SVG site, paste the SVG content, and then copy the Ready for CSS content.
  5. Return back to your Gutenberg editor and add an Image Block.
  6. Use the Insert from URL button and paste the CSS we previously copied.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M19 19H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2.5 13.25c0-1.5-3-2.25-4.5-2.25s-4.5.75-4.5 2.25V17h9M12 12.25A2.25 2.25 0 0 0 14.25 10A2.25 2.25 0 0 0 12 7.75A2.25 2.25 0 0 0 9.75 10A2.25 2.25 0 0 0 12 12.25z" fill="#626262"></path></svg>

What’s the difference you may as between the two methods? In the second one even though more steps are required we don’t rely on the API server. This way if the server has a downtime the icons will still display on our page.

What’s Next?

The Iconify library has an option to install an API client on your server and include icons without the need to do all of the steps above. Actually there are several different ways you could use the library, take a look at their documentation page and see which one best fits your needs.

‘TIl the next time.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

5 Popular Web Page Components Done with Pure CSS

Open/close a modal window, create mobile navigation, build tab navigation, image gallery slider, and switch & button groups. All with pure CSS, no JS required.

READ MORE...

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP

How to add a monitor to dynamically updated file with Sublime Text 3 and SFTP package.

READ MORE...

6 Expert Gutenberg Tips and Tricks You Should Know

6 expert tips and tricks you probably didn’t know that may improve your workflow and productivity within Gutenberg.

READ MORE...

Leave a Reply

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

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP
5 Popular Web Page Components Done with Pure CSS

Thank you for reading our content. Use the buttons below to spread the love and share 6 Expert Gutenberg Tips and Tricks You Should Know with your followers.