Skip to content
Mc Starters Main Logo Circle
  • Home
  • CompanyExpand
    • About Us
    • Meet with Team
    • Media Assets
    • We’re Hiring
    • Offers
    • Sidebar Advertisement
    • Sponsored Post
    • Guest Posts
    • Link Insertion
    • Contact Us
  • Top CategoriesExpand
    • WooCommerce
    • Elementor
    • Webflow
    • Divi
    • WordPress
    • SEO
    • Payoneer Guides
    • Shopify Tutorials
    • Squarespace
    • Weebly
    • Wix
    • Website Builders
    • CRM
    • Payment
  • Tips and TricksExpand
    • AI
    • Business
    • Insurance
    • Resources
    • Review
    • Science and Technology
    • Windows 10
    • Windows 11
  • ServicesExpand
    • WordPress Web Design
    • Elementor Expert
    • Divi Theme Experts
    • Blog Setup
    • WordPress Customization
    • E-Commerce Websites
    • Crocoblock Expert
    • Hire Webflow Expert
  • Free TemplatesExpand
    • Elementor Templates
    • Elementor Header
    • Elementor Footer
    • Elementor Single Post Templates
    • Elementor Mega Menu
    • Divi Templates
    • Divi Header Layouts
    • Divi Footer Layout
  • Tools

Lifetime Pro Access to Elementor & Divi Templates

Grab deal
Mc Starters Main Logo Circle
Home / WordPress / How to Add Custom Icons to Elementor Pro & Elementor Free

How to Add Custom Icons to Elementor Pro & Elementor Free

Published By :Mudassar Shakeel April 13, 2024April 13, 2024 WordPress, Elementor
add custom icons to Elementor Pro & Elementor Free

Would you like to create & add custom icons to Elementor Pro and Elementor Free?

Default Elementor icons affect website performance. That’s why, in this article, we will show you how to add custom icons to Elementor Pro and Elementor Free.

Elementor supports Fontello, Icomoon, or Fontastic icons. We use Fontello icons in this article. I show step by step-by-step process, of how to the download Fontello icon and upload it into Elementor.

Add Custom Icons To Elementor Pro

Before starting please Fontastic icons file here. We upload this file to the Elementor icon library and use them on the website.

Download Fontastic File

Step:1   After downloading the file  you need to go to Elementor –> Custom Icons

Click on Elementor Custom Icons Screenshot

Step 2: Now enter the name of the custom icons and then click on “CLICK HERE TO BROWSE”. 

Upload Elementor Custom Icons File

Step 3: Select a file that you download and then click on Open. 

Add Custom icon to Elementor

Step 5: Go to Elementor editor and click on custom icons. Select the icon and use it. Done

Elementor Custom Icons Library

This is how you add custom icons to Elementor Pro. I hope you do this easily. If you need any help then leave a message in the chat box. I will help you.

Add Custom Icon to Elementor Free

Step:1  Install & activate the “Custom Icon For Elementor” plugin

Install Custom Icons For Elementor Plugin

Step:2  Go to Elementor and click on ” Custom Icons”

Go to Custom Icon Setting

Step 3: Upload a custom icons file.

Upload Custom Icons Set File

Step 4: Select a file and click on open.

Upload Custom File From PC

Step 5: When uploading is complete then go to Elementor Editor click on the custom icon tab and use the icon.

See also  How to add Google Maps API Key in Elementor
Elementor Libary Custom icon

This is how you add a custom icon to Elementor Free. 

Watch Video

How to Add Custom icon to Elementor Free and Elementor Pro

We hope this article helped you learn how to add custom icons to Elementor Pro and Elementor Free. Custom icons also help you with website Speed optimization.

You might also want free Elementor templates, Footer templates, and header templates.

Conclusions: Add Custom Icons to Elementor Pro & Elementor Free

Adding custom icons to Elementor Pro & Elementor Free is effortless: in Pro, utilize the extensive library or upload custom SVGs; in Free, integrate third-party icon libraries or upload custom SVG icons via the “Icon” widget. Both options enable users to enhance website aesthetics and personalize designs with ease.

Frequently Asked Questions

How do I add custom icons to Elementor Pro?

Utilize Elementor Pro’s extensive icon library or upload custom SVG icons directly into the “Icon” widget settings.

How do I add a PNG icon to an Elementor?

In Elementor, insert an “Image” widget and upload the PNG icon. Alternatively, convert the PNG icon to SVG format for compatibility with the “Icon” widget.

How do I add icons to my Elementor for free?

In Elementor Free, integrate third-party icon libraries through plugins or upload custom SVG icons using the “Icon” widget.

How do I add a custom widget icon to my Elementor?

With Elementor, navigate to the “Icon” widget settings and upload a custom SVG icon. Alternatively, customize widget icons using CSS classes or third-party plugins.

Mudassar - WordPress Developer - get 50% off.

Post Tags: #custom icons#Elementor Pro

Best VPN Services Cheapest Hosting converkit convertkit Create Custom Header Credit Cards CRM Software customization tips Customize Elementor Styles Detailed Comparison divi guide divi tips Elementor Error Elementor Guide Elementor mega menu Elementor Pro Elementor Templates Elementor tips email marketing tools Hosting service Insurance Industry integrate Elementor Form Managed hosting Marketing tools comparsions mega menu design NordVPN payment tips Shopify speed optimization tips & trick tools for small business Top CRM System webflow guide Webflow Tips Website builder Website navigations Woocommerce tips WordPress wordpress developer WordPress developer USA Wordpress guide wordpress guides WordPress Maintenance services WordPress plugin Wordpress support

Facebook FacebookTwitter TwitterInstagram InstagramPinterest PinterestYouTube YouTube

© 2025 Mc Starters Blog

  • HTML Sitemap
  • XML Sitemap
  • Affiliate Disclosure
Scroll to top
  • Home
  • Company
    • About Us
    • Meet with Team
    • Media Assets
    • We’re Hiring
    • Offers
    • Sidebar Advertisement
    • Sponsored Post
    • Guest Posts
    • Link Insertion
    • Contact Us
  • Top Categories
    • WooCommerce
    • Elementor
    • Webflow
    • Divi
    • WordPress
    • SEO
    • Payoneer Guides
    • Shopify Tutorials
    • Squarespace
    • Weebly
    • Wix
    • Website Builders
    • CRM
    • Payment
  • Tips and Tricks
    • AI
    • Business
    • Insurance
    • Resources
    • Review
    • Science and Technology
    • Windows 10
    • Windows 11
  • Services
    • WordPress Web Design
    • Elementor Expert
    • Divi Theme Experts
    • Blog Setup
    • WordPress Customization
    • E-Commerce Websites
    • Crocoblock Expert
    • Hire Webflow Expert
  • Free Templates
    • Elementor Templates
    • Elementor Header
    • Elementor Footer
    • Elementor Single Post Templates
    • Elementor Mega Menu
    • Divi Templates
    • Divi Header Layouts
    • Divi Footer Layout
  • Tools
Facebook X Instagram YouTube Pinterest
Search