Do you know the most annoying part when building a website with Elementor? You need to download icons from an external site because the built-in icons that Elementor offers are not good enough for real use cases.
Elementor still solely relies on Font Awesome for its icons collection, while other builders (including Divi) offer multiple vendors. Divi even built their own icons collection.
My team and I barely use the built-in icons that Elementor offers because we find they are too basic. Instead, we often use icons from Bootstrap Icons and SVG Repo. Once in a while, we also download icons from Hugeicons.
If you are in the search of Font Awesome alternatives to get free SVG icons for your projects, we have compiled the best ones.
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
Using a Custom SVG Icon in Elementor
The ability to use a custom SVG icon in Elementor is available on both the Free and Pro version. You can use a custom SVG icon on any widget that has an icon element. Such as Button, Icon List, Icon Box, etc.
To use a custom SVG icon, you can simply click the upload icon on the settings panel whenever you want to add an icon on a widget. This will open the Insert Media window of WordPress where you can select an SVG file.
Worth to note that you need to enable the Enable Unfiltered File Uploads setting option before you can upload an SVG file. You can find the setting option under the Advanced tab on the Elementor settings screen.
After enabling the option, you will be able to upload an SVG file, which you can download from the websites below.
This setting is also required if you want to import an Elementor template in JSON format.
Free Alternatives to Font Awesome
Here is the list of websites you can visit to get free SVG icons if you are not interested in using the built-in icons collection from Elementor, which are provided by Font Awesome.
| Site name | Commercial projects | Requires credit |
|---|---|---|
| Remix Icon | ✅ | ❌ |
| Hugeicons | ✅ | ❌ |
| Bootstrap Icons | ✅ | ❌ |
| SVG Repo | ✅ | ❌ |
| Lucide | ✅ | ❌ |
| Friconix | ❌ | ✅ |
| Noun Project | ✅ | ✅ |
1. Remix Icon
- Key highlights: Completely free. No pro version
Remix Icon is the first website I can recommend if you are looking for a Font Awesome alternative to download SVG icons for free.
The best part of downloading SVG icons from this website is that you can use the icons on both personal and commercial projects without a mandatory to give the website a credit.
A credit will be much appreciated, but it's totally fine if you decide not to give it.
On Remix Icon, you can download icons individually or in a bundle (ZIP). If you love the icons collection it offers and want to download multiple icons, you can add icons to a folder and download them as a ZIP.
Remix Icon offers icons in a wide range of categories. From brand logos, devices to most-used icons like arrows.
2. Hugeicons
- Key highlights: Requires login to download an icon
If you want to add unique icons to your website, then you Hugeicons is worth trying. I tried to type "arrows" on its search box and a huge amount of arrow icons showed up. And they were not generic arrow icons like the ones on Font Awesome.
Of course, there are also other icon categories. Including brand icons, business icons, to emojis.
Unlike Remix Icons in which all of its icons are free, Hugeicons offers paid icon packs too, starting from $99 per year.
If you are not interested in its paid icons, the free versions are great enough. There are over 5,000 free SVG icons you can search and download. The site offers a useful filter to make it easy for you to filter free only icons.
The annoying thing about Hugeicons is that you are required to login to the website before you can start to download. You can login using a Hugeicons account, using your Google account or using your GitHub account.
3. Bootstrap Icons
- Key highlights: Over 2,000 SVG icons.
Many people know Bootstrap as a CSS framework. Only a few of them who know it offers free icons too.
Bootstrap Icons is my favorite website to download SVG icons to replace Font Awesome icons. I mostly use arrow icons on some templates I created.
I prefer to use Bootstrap Icons rather than Font Awesome because the icons collection that Bootstrap Icons offers are more modern. Especially the arrow icons. Bootstrap Icons also has modern, more premium-looking icons but you need to upgrade to the pro version to use them.
Just like the CSS framework, the icons collection of Bootstrap are also released for free under the MIT License. Meaning that you can use them without being obligated to give credit.
Also, you can download the icons without needing to login.
4. SVG Repo
- Key highlights: Multiple licenses, forcing you to learn the license before you use an icon
SVG Repo is a user generated icons provider. Meaning that icons available on this website are not created by a single designer or a group of people under a certain company.
Every icon on SVG Repo has a different license so you need to be careful before you can use an icon. If an icon is licensed under SVG Repo License, MIT, or GPL, you can use it for free without needing to give a credit to the author.
If an icon is licensed under Creative Commons, you can use it for free for any purpose, but a credit is required.
You can learn more about the licenses on its licensing page.
Being a user-generated platform, SVG Repo has a huge collection of icons. There are over 500,000 free icons available on the website.
Apart from icons like the ones you can find on Font Awesome, you can also find other vector files like illustrations and emojis.
5. Lucide
- Key highlights: Licensed under MIT License
Lucide is another great website you can visit if you are looking for a free alternative to Font Awesome. I got to know this website from one of the newsletters I subscribed to.
After visiting the website, I found that the website has a good enough icons collection that I can use on my Elementor designs.
In total, there are over 1,700 free SVG icons available on the Lucide website. They are licensed under the MIT License, a popular open source license that allows users to use a product without needing to credit the author.
In other words, you can use the icons from Lucide without needing to give a credit to Lucide as the icon provider.
The icons collection on the Lucide website are well organized in categories accessible on the left side.
6. Friconix
- Key highlights: Unclear licensing
Friconix doesn't have a fancy website like the first websites above, but it is definitely worth visiting if you want to use icons for your website other than the ones from Font Awesome.
There are 27,000 free SVG icons available on this website.
The biggest issue with Friconix is that it has unclear licensing. There is no dedicated page on its website about how to use the icons it offers.
All you will find is a "do and don't" section on the individual icon page. And the section still doesn't provide clear enough information about the usage of the icons.
If you have a big concern on licensing, Friconix may not be the best solution to become a Font Awesome alternative.
7. Noun Project
- Key highlights: Requires attribution to use an icon. Requires login to download and an icon
Noun Project may not be your popular go-to website every time you need a new icon to be added to your website because it has some requirements.
First, you need to login to download an icon. You can login with your Google account instead of creating a Noun Project account but I still find it annoying enough.
Second, you need to give an attribution to Noun Project if you want to use an icon from this website on your commercial projects because the icons on this website are licensed under regular Creative Commons (not CC0).
Even for a simple arrow icon, you can't use it on a commercial project without giving credit to Noun Project. You are required to make a purchase to use an icon without an attribution.
I mention Noun Project on this listicle because it has a huge icons collection and some of you may have no problem in giving an attribution to the website by mentioning it on the site footer.
Summary
Most websites need icons. For the buttons, for features list, for navigation, and so on. Unfortunately, this is something that Elementor left behind other builders.
Elementor relies on the free version of Font Awesome for its icons collection. The number of icons is huge, but they are too basic.
The built-in icons that Elementor offers are only suitable for basic websites and landing pages. If you want to add a premium vibe to your design, then using custom SVG icons is a must.
All websites mentioned above offer SVG icons downloadable for free. Some websites may offer a pro version but it's always available as an option, not obligation.