Search

How to Set the Custom Size on the Elementor Button Icon

Everybody must be happy if they are given the freedom/ flexibility to create something because more flexibility means more productivity. Talking about flexibility, in this article, we will show you how to set the custom size on the Elementor button icon.

By default, the Elementor button widget can customize the icon size. But, the choice to set is limited to five fixed option sizes (extra-small, small, medium, large, and extra-large). Not only limited to five selected options size, but the setting isn’t individual. This means when you want to set the size, it will impact two elements of the button (icon and text).

Maybe you are wondering, “Is it possible to set the custom size on the Elementor button icon?”. Well, everything is possible in Elementor. Without the help of any add-ons, you can do that easily.

How to Set the Custom Size on the Elementor Button Icon

Before we start the tutorial, we want to inform you that this tutorial will work with Elementor custom CSS. The custom CSS feature is only available on Elementor Pro; ensure you’ve upgraded to the pro version.

Well, let’s get started!

Go to your Elementor editor. We will start everything from scratch, so create a section with a single column. Afterward, please select the button widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the button widget, you can edit and style up the widget to your preference. Such as adding an icon, text background color, etc.

As you can see from the image above, the icon and text sizes are the same. When you want to change the icon size only by setting it on the Size option on the widget settings, it will also impact the text (see the GIF below).

Alright, now we will fix that issue. On the widget settings, navigate to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-button-icon { font-size:100px; color: inherit;
}

selector .elementor-button-text {margin:auto;}

You can customize the icon size by editing the value on the CSS snippet (see the image below).

That’s it. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows you how to set the custom size on the Elementor button icon using Custom CSS by Elementor. But, if you want a more straightforward way to customize your button icon size because you don’t like working with any codes, we suggest you use an Elementor add-on.

The Elementor add-on that we highly recommend to you is JetElements by Crocoblock. JetElements has 40+ Elementor widgets. In this case (customize button icon size), you need the Button widget.

With the Button widget from JetElements, customizing the button icon size is very simple and seamless.

Screenshot of the JetElements Button widget settings
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?

2 thoughts on “How to Set the Custom Size on the Elementor Button Icon”

  1. I had exactly this problem: One of a series of buttons with svg icons was a custom made svg (in Adobe Illustrator, because there was no ready-made icon for that topic) and no matter what I tried, it would be displayed smaller than the others (that were part of the elementor set).

    So my question is: How do you select that one button icon without resizing all icons? Because then they would still be differently sized.

    Reply
  2. Hi Laptopleon,
    Thanks for visiting our site.
    Regarding your question, you can modify the button icon size by adjusting the font-size value on the CSS snippet.
    Each button may need a different value (font-size) to be able to display the same size on all buttons.

    Thank you

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?