Skip to content
Ultra Addons
Ultra Addons

Ultra Addons

Best Elementor addons WordPress Plugin

  • Home
  • Features
    • Extension
    • Widgets
    • Changelog
  • Templates
  • Pricing
  • Products
    • Product Table for WooCommerce
    • Min Max Quantity & Step Control
    • Quantity Plus Minus Button
    • Post Classified for making Documentation
    • Add to Cart Text Changer
    • Astha WordPress Theme
  • Doc
  • Blog
Get UltraAddons
Use-Custom-Icons-for-Elementor-[Pro]

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.

Table of Contents

  • How to Use Custom Icons for Elementor Pro: Create Icons Before Uploading
    • Create Icons With Fontell
  • How to Use Fontello Icons in Elementor
    •  
    • Create Icons With IcoMoon
    • How to Use IcoMoon Icons in Elementor
    • Use Custom Icons in Elementor Through Ultra Addons
  • Wrapping Up
  • Ultra Addons
      • The Most Popular Elementor Addons

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.
Download icons from Fontello

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.

Add custom icon in Elementor

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.

Update icons in Elementor

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.

Fontello icons in icon library

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

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

Select 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.

UItra Addons Icons

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. 

Add Ultra Addons Icons

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.

Special Discount for ultra addons

Ultra Addons

The Most Popular Elementor Addons

Get Up To 53% Discount
element Elementor Elementor Pro web design wordpress

Share

Post navigation

Previous: What Happens When You Remove Elementor Pro
Next: How to create a Blog page in WordPress with Elementor using UltraAddons?

Get Started Now

Download UltraAddons Elementor Lite for completely
free and start making beautiful websites today.

Free Download
Get Premium
Subscribe to our Newsletter
Resource
  • Ready Templates
  • Documentation
  • Changelog
  • Video Tutorial
  • Blog & News
  • Write For Us
Company
  • Our Service
  • Get Quote
  • Refund Policy
  • Support Policy
  • Privacy Policy
  • Terms of Service
Our Products
  • Product Table for WooCommerce
  • Min Max Quantity & Step Control
  • UltraAddons Elementor Lite
  • Quantity Plus Minus Button
  • Post Classified for making Documentation
  • Add to Cart Text Changer
  • Astha WordPress Theme
Facebook-f Twitter Linkedin Instagram Youtube
© 2022, UltraAddons from CodeAstrology. All Rights Reserved
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT