How to Use Custom Icons for Elementor [Pro] | Step-by-step Guide

Elementor never stops benefiting its customers. Upload your own custom icons to your website using Elementor Pro’s custom icon feature. You can use Fontello, Icomoon, or Fontastic for work.

Before you read this article, we should mention using custom icons is only possible with Elementor Pro, the lite version doesn’t support this feature. You will get to use the Font Awesome icons by default, in the Elementor lite version. Basically, the Elementor library always does the job, which is accessible in both the free and pro version. However, you will need to insert custom icons for certain scenarios. And Elementor Pro lets you do that.

In this article, we are going to discuss how to use custom icons for Elementor Pro. With that said, we really suggest using Ultra Addons if you want to use custom icons using the standard version of Elementor.

How to Use Custom Icons for Elementor Pro: Create Icons Before Uploading

Yes, you should know the process of creating custom icons before uploading them on Elementor. There are many ways to create a custom icon set. In this tutorial, we are going to show you how to create icon sets through Fontello, Icomoon, etc. We will also show how easily you can add your favorite icons in Elementor using Ultra Addons.

Create Icons With Fontell

Fontello icons are accessible in the icon library. So, it is a great option to use with Elementor. Follow the steps to create an icon set with Fontello-

• Go to the official website of Fontello.
• There are many icons to choose from. You can either select some icons or upload custom SVG files.
• Add a unique CSS prefix by clicking the wrench. 
• After that, give your icon a name
• Finally, download the icons as a zip file.

How to Use Fontello Icons in Elementor

Once you have downloaded the icons, you need to upload them to your website.

1. In the dashboard, go to – Elementor >> Custom Icons

2. After that, click on “Add New” and give your icon set a suitable name.

3. You can either drag & drop the zip file or upload the file manually by clicking “CLICK HERE TO BROWSE”.
4. Hit the ‘Update’ button to upload the icon set on your website. You will notice the new custom icon set under Custom Icons.

5. To find the Fontello icons inside Elementor, go to the icon library. You will notice a new tab of the icon set that you have added.

6. Each icon from Fontello can be customized from the Elementor’s Style tab.

You may find it interesting –

How to Copy a Page in WordPress Elementor in 3 steps.

Create Icons With IcoMoon

Next up, is creating an icon set from IcoMoon. This option can help you find plenty of cool icons that are not available in the icon library. So, let’s get to it –

• Go to the official website of IcoMoon.
• You can either upload your own custom SVG files or choose some icons.
• After that, click on the “Generate Font” tab, and following that click on ‘Preferences’.  
• Give your icon set a suitable name.
• Don’t forget to give it a unique prefix, which is under ”Class prefix”. 
• Click the (X) icon to exit the current tab.
• Click ‘Download’ to download the icons set as a zip file.

How to Use IcoMoon Icons in Elementor

Just like before, you need to upload custom IcoMoon icons to your website. This is the second phrase to use custom icons in Elementor from IcoMoon. The process is a bit similar to Fontello.

1. Just like how we described uploading Fontello icons, here you also need to go to –

Elementor >> Custom Icons

2. Then, click on the “Add New” button and give your icon set a suitable name.
3. Similarly, you can either drag & drop the zip file or simply click the “CLICK HERE TO BROWSE” button to upload manually.
4. Hit ‘Update’ to upload the custom IcoMoon icons to your website. This will add the icon sets to the icon library as well.
5. Awesome! Similar to Fontello icons, these icons can be found inside the Elementor library.

Also read –

How to Create a 404 Page Easily with Elementor Pro

Use Custom Icons in Elementor Through Ultra Addons

When you install and activate Ultra Addons on your website, you will see a bunch of extra icons inside the icon library. 
You can use these icons for any Elementor widgets. While editing an Elementor widget, select the section where you can implement an icon. Let’s say we want to add an icon to a button. We should click on the button to open its settings.

1. Select the circle icon from the ‘Icon’ field, this will open the icon library.

2. Once the library tab is opened, select the “UltraAddons Icons” tab. You will find a range of extra icons that are not available in the icon library.

3. Then, select an icon and click on ‘Insert’ to add an icon to the button. We can also adjust the icon’s position and spacing. 

Wrapping Up

Element’s icon library is filled with perfectly crafted, well-designed, and pixel-perfect icons. Icons are a great visual tool that makes the content of a web page easily understandable and memorable. This enhances the experience of an on-page user by drawing attention to the content. Now that you know how to use custom icons for Elementor Pro, you just need to use the right icon in the right place.