Want to add unique icons to your Elementor designs that match your brand perfectly? With Elementor Pro, you can easily upload and use custom icons—no coding or third-party plugins required.
Whether you’re looking to stand out with branded visuals or just need more variety than Elementor’s default icon library offers, this guide will walk you through the simple steps to add your own icons using Fontello or other popular icon platforms.
Let’s dive in and help you customize your site like a pro!
Key Takeaways
- Elementor Pro lets you upload and use custom icons without extra plugins or coding.
- You can download icon sets from platforms like Fontello, Flaticon, or Fontastic.
- Uploaded icons appear directly in the Elementor Icon Library.
- You can style your custom icons just like built-in ones using Elementor’s design controls.
What Are Custom Icons in Elementor?
Custom icons in Elementor refer to icon sets you upload yourself, outside of the default Icon Library that comes with Elementor or Elementor Pro. These can be icons you design, download from external libraries like Fontello, Flaticon, or any other source that provides web font icons.
Instead of being limited to the default icons, custom icons allow you to:
- Add brand-specific symbols (like a custom logo or mascot).
- Use stylistically consistent icons throughout your site.
- Access thousands of icon styles from third-party sources.
- Visually enhance your UI/UX without writing a single line of code.
Steps to Add a Custom Icon in Elementor
Step 1: Download an Icon
Before adding the icons to the Elementor library, we need to download the icon’s zip file. For this, there are multiple resources available like Fontello, Fontastic, Flaticon, and many more. Here in this tutorial, I will use the Fontello websites to get the icons.
Step1: To select the icon of your choice, visit Fontello website.
Choose the icon you prefer and click on the Download Button
Step 2: Installing Icons in Elementor
Once you are done downloading your favorite icons’ zip files, you need to install them inside Elementor’s Icon Library.
To begin with, go to the WordPress admin dashboard and navigate to the Elementor >> Custom Icons.
Enter a name for the Icon Set and just browse the icon file that you have just downloaded.
After you are done with uploading all the files, click on Publish, and you are all set.
Once the files are uploaded, they will be available in Elementor’s Icon Library.
Step 3: Add & Use Custom Icons in Elementor Widgets
Next, edit the page in the Elementor editor where you want to place the icon, and add the Icon widget inside a Container
Edit the icon settings, and then click on the Icon Library.
Click on the Folder containing your icon and select the icon that you want to add, and then simply hit Insert.
That’s it! Your preferred icon is inserted, and you can style it according to your choice.
FAQs on Custom Icon in Elementor
Do I need Elementor Pro to add custom icons?
Yes, the custom icon upload feature is available only in Elementor Pro. Free version users can’t upload icon sets directly.
Can I upload SVG files directly instead of using zip icon packs?
No, Elementor’s custom icon feature requires icon packs in a specific web font format (e.g., from Fontello). SVG upload is not part of this process.
Are custom icons responsive on all devices?
Yes, once added, custom icons behave like any other icon in Elementor — they are fully responsive and scalable.
Can I use these custom icons inside buttons or menus?
Absolutely! Custom icons can be used anywhere you can use regular Elementor icons — in buttons, headings, navigation menus, etc.
Will the uploaded icons be available globally across my website?
Yes, once uploaded, they’ll be available in the Icon Library site-wide, so you can use them on any page or template.
Can I delete or replace icon sets later?
Yes. From Elementor → Custom Icons, you can manage, delete, or re-upload icon sets as needed.
Make Your Brand Stand Out With Custom Icons
Icons help communicate faster, cleaner, and better. With Elementor Pro’s custom icon support, you can now add your unique branding or expand design possibilities beyond the default icon library — all without touching code.
Want to make your website stand out?
Start uploading your custom icons today and give your site a personalized, professional edge!
This is an awesome tutorial. For some days, I am trying to add a custom icon but can’t. Now after reading this tutorial I was able to add a custom icon easily. Thanks for sharing.