Looking to enhance your Elementor website with unique icons that reflect your brand? Elementor Pro makes it easy to add your own custom icons without writing a single line of code or installing third-party plugins.
In this step-by-step tutorial, you’ll learn how to upload and use custom icons in Elementor using tools like Fontello, Fontastic, and more. This simple process allows you to go beyond the default icon library and create a truly personalized user experience.
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.
Unlike static SVG uploads, these icons are added as font files and become available globally via Elementor’s Icon Library. That means you can use them in widgets like buttons, headings, menus, and more.
Learn about how to upload SVG in Elementor without any plugins or addons.
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.
To select the icon of your choice, visit Fontello website.
Choose the icon you prefer and click on the Download Button
Step 2: Uploading Icon Pack 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 Editor
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.
Now that you’ve learned how to add custom icons in Elementor, why stop there? Take your designs even further with the Elementor Addon Elements plugin packed with powerful widgets, extensions, and styling options to help you build visually stunning websites without writing a single line of code.
Want to see a live example of how icons and text can be used together to enhance layout separation? Check out our Text & Icon Separator widget demo to see how you can combine custom icons and headings beautifully.
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 explore more creative customization options? Learn how to add custom fonts in Elementor.
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.