Best SEO and PPC Tool - Extended Free Trial  GO!

How to Use Custom Icons for Elementor

Last modified: June 20, 2022


When you’re using Elementor Pro, you can use the Elementor Pro’s Custom Icons feature to use your own custom icons. There are three different options here including Fontello, Icomoon and Fontastic that can help you create unique icons and fonts for your website. In this guide, we will teach you how to use custom icons for Elementor.

Show More

* This button will show the rest of the post and open up an offer from a vendor

Why Use Custom Icons for Elementor?

There are numerous reasons why you might want to use custom icons for Elementor. For one, you might be looking to create a unique look on their website for a certain brand image.

A unique branding can help bring new customers to you as you will appear much more identifiable. More identifiable websites help to convert customers and allow you to retain audiences with ease. This is also a good skill to know if you’re looking to be a developer.

So here are three options for you to add your own custom icons for Elementor.

Using Fontello

This is one of the easiest options that you have. The first thing that you need to do is to go to the website. Then you need to choose the icons that you’re looking to upload to your website or create your own using an SVG file.

Click on the wrench icon and then add a CSS prefix, ensuring that it is unique.

After this, you can give the icon set a name and then download the font to upload directly to your WordPress website.


This is a simple option as well, but it takes a little more effort. The first thing that you need to do is go to the IcoMoon app. Then you choose the icons or upload your own custom SVG files. You can then click on the ‘Generate Font’ tab and click on the preferences button.

Within the preferences options, give the icons a name and then add a unique prefix within the ‘Class prefix’ area. You can then click on the ‘X’ to exit.

When complete, click on ‘Download’ to get the zip file.


For this, you need to create a Fontastic account. Then you can create your icons or select ones available from the menu. You can then import by clicking ‘Add More Icons’ in the top menu bar. You can then select the option on the ‘Modify Font’ tab. You should also give the icon set a unique name and then a unique CSS Class Prefix.

When you’re ready, save the settings, and then use the option ‘Publish’. Finally, you can select the ‘Download’ option to get your Zip file.

Installing your Font Set

Once you’ve got your zip folder, you can then add the icons to your website. This doesn’t take long. All you need to do is to go into the ‘Elementor’ option and then click on ‘Custom Icons’. Select the option to ‘Add New’ and then you’re able to drag and drop your font zip file into the upload section.

You can also enter the icon set name and then click on ‘Update’.

Then you’re ready to go.

Final Word: How to Use Custom Icons for Elementor

Above are the steps on how to use custom icons for Elementor. It is really easy to do and can be completed by anyone, even those with no technical experience.

Save 4 Later
Email liked links to yourself