Howdy Reader

Elementor as a page builder is great. That's why it is powering 13% of the websites on the internet.

But let's be honest. There are some areas where Elementor is left behind other competitors. And if you ask me which area where Elementor gets left behind the most, I will answer the icons collection.

Divi, the Elementor's biggest competitor in the WordPress scene, is better in this area because it offers its own icons collection, combined with Font Awesome.

Elementor, meanwhile, still relies on Font Awesome only (the free version).

I barely use Elementor default icons because they make my designs look cheap. Many pro designers who use Elementor also do the same. This is the simple secret sauce to make your designs look premium.

So, where do I get the icons from?

There are two websites I rely on the most to get icons (free icons more precisely). The first one is Bootstrap Icons. And the second one is SVG Repo.

The two allow you to get free SVG icons.

And if you need to edit an icon before you use it on your Elementor design, the tools I recommend are Boxy SVG (the desktop version is great) and Vector Ink.

To use a custom SVG icon itself, you can simply click the Upload SVG icon. You can find this icon on all widgets that have an icon (Button, Icon Box, Icon, Icon List, etc.).

The sizing issue

The issue commonly happens when you use a custom icon is that you can't resize the icon. This usually happens if you use a custom icon from Bootstrap Icons.

To fix the issue, you can simply add this simple CSS snippet and tailor the value of the scale function.

If you don't have Elementor Pro, you can replace the "selector" prefix with a CSS class you can define yourself and use the HTML widget to place your CSS snippet.

That's it. Hope this gives you another design insight.

Talk soon,

Aliko

Founder of Totheweb (UtilizeWP, WPPagebuilders, Pagebuildertemplates.com)