How to Resize Button Icon in Elementor (Free and Pro)

On most Elementor templates I created, I added at least one button element. In Elementor, you can add a button using the Button widget.

You can tailor the look of the Button widget to make it blend with your design scheme. If you want it, you can also add an icon to the button.

While the Button widget is quite useful to add a button element to a design, some issues exist. Users with no CSS knowledge usually encounter a problem in resizing the icon. That's because Elementor offers no dedicated setting option to resize the button icon.

In this post, I will show you how to resize the icon of the Elementor Button widget. Both on Elementor Free and Pro.

Shortcuts ⤵️

• Finding out CSS selector of the icon
• Resizing button icon on Elementor Pro
• Resizing button icon on Elementor Free
• Video version ▶️
• Summary

Before You Start: Find Out the CSS Selector of the Button Icon

It takes only a few lines of CSS code to resize the button icon. However, there is one crucial step you need to do before you start writing the code: finding out the CSS selector of the icon.

Currently, the CSS selector of the button icon is elementor-button-icon. In the future, Elementor may change it. When they do, you can simply tailor the selector with the new one and your icon will remain resized.

How to Find Out the CSS Selector of the Button Icon

First, you need to know that Elementor utilizes Font Awesome for its icon library. In Font Awesome itself, every icon has a unique CSS class. You can use them to target the button icon.

If you use a custom icon that has no CSS class, you can use the CSS class selector that Elementor uses for the button icon, which currently is elementor-button-icon.

Again, Elementor may change the CSS class of the button icon in the future. So, it is extremely crucial for you to be able to find out the CSS selector.

To do so, first, preview your design on the front-end. Or you can simply hide the settings panel.

Next, right-click the icon element on the Button widget and select Inspect.

The Developer Tools panel will open right after you click Inspect, with the CSS selector of the icon being highlighted.

As you can see above, there are two CSS classes associated with the icon element I inspect: far and fa-address-book. Above the highlighted part, there is another CSS class named elementor-button-icon.

So, which CSS class selector should you use?

You can use any of them to target the Elementor button icon. But I strongly recommend you to use the elementor-button-icon one as it is the global CSS class that Elementor offers for the button icon.

You can use the elementor-button-icon class on any icon instead of a certain icon. So, if you use two or more different icons for your buttons, you don't need to inspect every single icon to find out the CSS class of.

Resizing the Button Icon

You already know how to find out the CSS class of the icon element on the Button widget. Now is the time to use it.

I will show you how to use the selector on both Elementor Free and Pro.

Resizing the Button Icon on Elementor Pro

Adding custom CSS on Elementor Pro is really straightforward as it comes with a custom CSS feature where you can add a CSS snippet directly via the Elementor editor.

First, edit the Button widget where you want to resize the icon element of. Go to the Advanced tab and open the Custom CSS block.

Add the following CSS snippet to the CSS editor.

selector .elementor-button-icon{
    transform: scale(1.5);
}

As you can see above, I use the elementor-button-icon class to target the icon. The prefix of selector is used to target a specific element on a widget (the Button widget in this case).

Without this prefix, all elements on your website that have the class of elementor-button-icon will be resized.

To achieve the icon size you want, you can replace the number inside the brackets.

You can use either a decimal (e.g., 1.5, 2,5, 3,5 etc) or integer (e.g., 1,2,3 etc).

Resizing the Button Icon on Elementor Free

Since Elementor Free doesn't allow you to add custom CSS via the Elementor editor, you need to place your CSS snippet elsewhere.

You can utilize WordPress Theme Customizer to place your CSS snippet. But this time, you need to add an extra CSS class, which you can define yourself.

You can then add the extra CSS class to the button you want to resize the icon of. Here are the steps.

First, go to Appearance -> Customize on your WordPress dashboard to open the Theme Customizer panel.

On the Theme Customizer panel, you can click the Additional CSS block.

Add your CSS snippet to the editor. Don't forget to add the extra CSS class (make sure to include the dot sign). This time, you don't need to add the selector prefix. So, your CSS snippet should look like this:

.custom-icon-size .elementor-button-icon{
	transform:scale(1.5);
}

Click the Publish button to apply the CSS snippet.

Next, go back to the Elementor editor and edit the Button widget where you want to apply the custom size of. Go to the Advanced tab and open the Layout block. Add the additional CSS class to the CSS Classes field (without the dot sign).

You should see the icon resized after adding the class.

Tutorial Video

If the above text is enough for you, I have also created a video version of this tutorial to make it easy for you to follow the steps.

Summary

Elementor has no dedicated setting option to set the size of the icon element on the Button widget. The only way to resize the Button icon is via custom CSS.

You can use the scale function on the transform property to set the size of the icon. But first, you need to find out the selector of the icon element, which I have elaborated above.

Here are the key steps to set the size of the Button icon element in Elementor:

• Find out the CSS selector of the icon element
• Write CSS snippet and target the icon element and use the scale function on the transform property
• On Elementor Pro, place the CSS snippet directly to the Button widget
• On Elementor Free, place the CSS snippet to WordPress Theme Customize. Add an extra CSS class

Not only can you use the above steps to resize the icon of the Button widget. But you can also apply the steps on other widgets that have the icon element. Such Form, PayPa Button and Stripe Button.