How to 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.

This is one of the easiest options that you have. The first thing that you need to do is to go to the Fontello.com 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.

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.