Search

How to Add Icon to a Button in WordPress Gutenberg Editor (Without Plugin)

You can add one or more buttons to your page or post on WordPress block editor/Gutenberg using the Buttons block. The Buttons block offers customization; you can customize the button’s text and links and style it to your preference. Unfortunately, there is one feature that is not available on the Buttons block; that is adding icons. That’s right, until this article was published, Gutenberg has no option to add an icon to the button by default.

This article will show you how to add icons to the Buttons block in the WordPress Gutenberg editor without the help of any plugin.

Steps to Add Icons to Button in Gutenberg

Step 1: Add the Buttons Block

We need a button in advance before we add the icon to the button on your page or post.

Go to the WordPress Gutenberg editor and add a Buttons block to the editor. Once you add the Buttons block, you can insert any text to the button. In this example, we create a “DOWNLOAD PDF” button.

Step 2: Choose Your Preferred Icon

Next, choose what icon to add to the Buttons block. Many great icon libraries and toolkits are available online, 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 the button. 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 Buttons block.

Step 3: Copy the SVG Icon’s Code

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

Step 4: Add the SVG Icon’s Code to the Buttons Block

We’re returning to the button you’ve created on the Gutenberg editor. We will add the SVG icon’s code we’ve copied previously to the Buttons block by editing it on the HTML editor.

Click on the block, and the toolbar will be displayed. Go to the Options block by clicking the Options button, then navigate to Edit as HTML.

Now, it’s time to insert the SVG icon’s code into the Buttons block in HTML editor mode. You can put that code before or after the name of the button. This means if you want to place the icon before the name of the button, you must paste that code before the name of the button; otherwise, paste that code after the name of the button if you want to place the icon after the name of the button.

In this example, we want to place the icon after the name of the button “DOWNLOAD PDF,” so we paste our SVG icon’s code after the name of the button right before the </a> tag (see the GIF below).

Save the draft and review your project by clicking the Save draft and Preview button, and you will see the icon is already added to your button.

Step 5: Add Additional CSS to Setting the Button

As in the image above, you can see that the SVG icon is successfully added to your button, but the button’s looks are not good. So, we will add a simple CSS snippet to the WordPress Customizer CSS editor. to make the button look proper.

On your WordPress dashboard, navigate to Appearance -> Customize. If you use a block theme, you can read our article here to learn how to enable theme customizer in a block theme.

Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

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

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

Alright, return to your project on preview mode, reload the page, and you will see the promising button.

That’s it. If you’re happy with the result (as in the image above), keep it like this. But if you want to customize your button, you can edit the button on the block settings, such as the width, size, color, border radius, etc. You can also edit the values on the CSS snippet to customize the SVG icon, such as the width and color.

The Bottom Line

Adding the icon to the button in the WordPress Gutenberg editor without the help of any plugins is very easy, as we’ve shown you in this article. 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 an icon to the button is no exception.

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.

Happy designing! 🙂

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment