How to Add an Icon to a Button in Elementor Version 4

If you feel frustrated working with Elementor version 4 (Elementor v4), you are not alone. A lot of users do. One of the annoying things in Elementor v4 is how users need to take extra steps to add an icon to a button.

There is no straightforward method to add an icon to a button like in version 3. I totally get it because Elementor wants users to use a different approach to build a website in this version.

You can still use the classic Button widget and pair it with atomic elements on Elementor v4. But if you truly want to use atomic elements only in your design, then you can continue reading this post to learn how to add an icon to an atomic button in Elementor v4.

Shortcuts ⤵️

• Creating the button
• Styling up the button
• Adding a link to the button
• Adding hover effect
• Video ▶️
• Summary

Adding an Icon to a Button in Elementor v4

So, here is the thing.

Elementor wants users to use a different approach in creating a website starting in version 4. They want users to use a design system because that's how professional designers are supposed to work.

A component is a part of a design system. It is a reusable design element that you can use across your website. And a button is an example of a component.

Well, you can create a website with Elementor v4 without using a component at all.

But to add a button with an icon, you need to create a custom button, which will be helpful if you turn it into a component.

While Elementor v4 already has a native atomic Button element, creating a custom button is a reasonable approach to add a button to your design if you want your button to have an icon.

Here are the steps to create a custom button in Elementor v4.

Creating a Custom Button in Elementor v4

The idea is quite simple. You add a Div block element and then place a paragraph and an icon inside the container.

In Elementor v4, you can use the Paragraph element for the paragraph and use the SVG element for the icon.

Before getting started, it would be nice to prepare the icon that you want to use first. Some websites I can recommend to get a free SVG icon are:

• SVG Repo
• Bootstrap Icons
• Hugeicons

Once you are ready, start by adding a Div block element.

Next, add the Paragraph element to the Divi block and set the content. This will act as the button text.

Next, you can add the SVG element and upload the SVG icon that you want to use on your button.

Your custom button structure is ready and it has the following elements:

• The button wrapper (the Div block)
• Button text (the Paragraph element)
• Button icon (the SVG element)

Now is the time to style it up to make it look like a real button.

A little tip. You can rename the Div block to something like "Button" to make it easy for the identification when your design gets more complex.

Styling Up the Button

Button Wrapper

The very first thing you need to set before you further style up your button is the button size and the button content (text and icon) alignment. To do this, select the Div block element to open the settings panel.

To set the button size, you can open the Size settings block and set the button width and height on the respective fields.

Next, you can open the Layout settings block to set the display setting and content alignment.

To add a background to the button, you can open the Background and Border settings block.

The best thing when you are creating a custom button using this method is you can use an image as the button background if you want to.

If you want to use an image as the button background, you can click the plus icon on the Overlay option and upload the image you want to use. Don't forget to set the set the background size to Cover to maintain the aspect ratio

To make your button content keep visible, you can add another overlay by clicking the plus icon once again. This time, you can use a solid or gradient overlay and set transparency level.

Button Content

You have two content types inside your button wrapper: text and icon. The button is made of the Paragraph element while the button icon is made of the SVG element. Thus, to style up each content type, you can first select a content type you want to style up.

To style up the button text, you can select the Paragraph element. On the Style tab on the settings panel, you can open the settings blocks according to the styles you want to apply.

To change the typography (font family, font style, text color, etc) you can open the Typography settings block.

To style up the button icon, you can select the SVG element then go to the settings panel.

You can open the Size settings block to set the icon size. To set the icon background, you can open the Background settings block.

And to set the border radius, you can radius, you can open the Border settings block.

To set the icon color, you can open the Typography settings block and choose the color you want on the color picker.

Setting the content gap (the space between the text and the icon)

There are several ways to add a space between the button text and the button icon. The best method is by setting the content tab on the wrapper level.

To do so, select the wrapper (the Div block). Go to the Style tab and open the Layout settings block. On the Gaps section, set the column gap to something like 10px and the row gap to 0.

Adding a Link to the Button

Once you are done styling up the button, you can add a link to it. Just like the classic button widget and the native atomic button, you can also add either a static link or dynamic link to your custom button.

One crucial thing to note. The link should be added on the button wrapper. Not the button text. Not the button icon.

So, select the button wrapper (the Div block) and click the plus icon on the on the Link section under the General tab on the settings panel.

Add your link to the appearing field. If you want to add a dynamic link, you can click the database icon.

Adding Hover Effect to the Button

Elementor doesn't offer many options when it comes to hover effects. That's why I created these custom hover effects.

But if you want to add a basic hover effect like transform (scale, skew, rotate, etc) or use a different color on hover state, you can still achieve it.

To add a hover effect to your button, first, you need to click the three-dot icon on the normal state and select Hover.

After you click the option (Hover), all styles you apply will only take place when you hover your cursor over the button.

Video Version

If you encounter an issue in following the above tutorial, you can watch the following video for clearer instructions.

Summary

Elementor v4 has a native atomic Button element to make it easy for you to add a button to your design. But something is missing. You can't add an icon to your button like on classic Button widget.

Creating a custom button is required if you want to have a button with an icon. The process may take time, but it offers more design freedom and flexibility.

You can create a custom button in Elementor v4 by utilizing the Div block element, the Paragraph element and the SVG element.

The Div block will act as the button wrapper and the Paragraph element and the SVG element will act as the button text and button icon, respectively.