How to Add Icons to Buttons in Gutenberg Editor

When visiting WordPress websites, you may have seen many eye-catching buttons with icons inserted. However, we all know that WordPress does not support you to upload icon images if you’re using Gutenberg. Thus, you have to make it yourself using SVG icons.

SVG (Scalable Vector Graphics) is an image format. With this format, we can resize icons without affecting their sharpness.

So how to add these SVG icons to the button in a post?

Before inserting icons, we need a button in advance. I will add a Download button in this post:

The Download button looks not really impressive if it does not have an icon, so I want to add a stunning icon to make it more attractive.

Step 1: Download an Icon

Nowadays, there are many websites providing free SVG icons like iconify.design, flaticon.com or freeicons.io,... In this post, I will use icons in freeicons.io.

After going to these websites, you just need to find one icon you like and download it:

And here we’re ready for the next step!

Step 2: Find the SVG Code

WordPress allows you to upload a lot of formats like JPG, PNG, GIF, MP4,... But SVG is not in this list. Hence, if you want to insert a SVG icon to WordPress, you must use the SVG code of that icon.

After you have chosen an icon, some websites will show its SVG code when you click the icon like this:

Now you just need to copy the code.

If you go to a website not providing SVG code, follow these following steps:

After downloading SVG icons successfully, you drag and drop the file to Chrome browser, or any other browsers:

Next, you go to DevTools by pressing F12. At this time, click the code beginning with (svg xmlns…) in the Elements tab, then press F2 to display the SVG code.

Keep in mind that you have to press F2 before copying this code. This is an important code to use in the next step, so don’t forget to save it. Now you just need to conduct the last step to add an icon to your button.

Step 3: Add the Icon to the Button

We all know that WordPress does not allow you to insert images in the visual editor, so you need to convert to the code editor.

Do you remember the cheesy purple Download button I have added from the beginning? I will click this button, then click the three-dot icons on the toolbar, then click Edit as HTML to move to HTML editing mode.

In the code editor, you insert the code SVG that you have saved behind or before the name of the button. For example, I have a Download button, so I paste the code behind the word “download” (right before </a>).

After that, you will see the button displaying like this:

If we keep it unchanged, this button will look awful. Thus, we need to configure the button a little bit to make it more beautiful.

Step 4: Configure the Button Using CSS

I will use CSS to resize the icon, and change its color from black to white. To do this, go to Customize > Additional CSS and add some codes.

This is my additional code for you to take a look:

.wp-block-button__link {
display: flex;
align-items: center;
}
.wp-block-button__link svg {
width: 20px;
margin-left: 10px;
}
.wp-block-button__link svg path {
fill: #fff;
}

Here we have our final result:

After inserting an icon to the button and configuring it a little bit, my Download button has become much more attractive! What are you waiting for? You also can add a stunning icon to the button within minutes. Maybe you can even make it more beautiful than my own one!

Last Words

Generally, adding an SVG icon to a button in Gutenberg is not really hard. All of the steps above are easy to do. Some of you may be confused with going to the DevTools to find SVG code, but trust me, do it several times and you will get used to it.

Buttons are an important part in each website, “Subscribe” buttons or “Like” buttons for example. Therefore, you should insert SVG icons in a smart way to make it more attractive to users. Good luck with your work!