Upload almost any icon set to Divi.
I’m not one of them.
I don’t want to wade through the 2400 icons I don’t want to get to the 20 or so icons I do want.
I want the icons that match the project I’m working on now.
Introducing the all new Divi Upload Icons plugin for the Divi and Extra themes
Just “drag n’ drop” the icon sets you want to use. The end.
Filter by Icon Set
Sometimes you’re looking for all of your weather icons. Or all of your e-commerce icons.
If you’re looking for a certain set of icons, you can filter the icon list by icon sets.
Filter by icon name
Looking for something even more specific?
We have a built in icon search bar so you can find a specific icon.
The icon name is determined by the .css file you upload for the icon set.
Works in both the standard Divi Builder and Visual Builder
All features of the plugin including the search bar and the icon set filtering work in both so you build where you feel most comfortable.
You don’t need 2400+ icons.
We are too. Let’s do it together.
Requirements
This plugin requires either the Divi or Extra WordPress themes from Elegant Themes. Divi is more than just a theme, it’s a website building framework that makes it possible to design beautiful websites without ever touching a single line of code.
If you’re going to purchase Divi (totally worth it) want to show some love, consider using the link in the above paragraph. It’s my affiliate link and they may compensate me for the referral at no cost to you.
How it works
Each file in an icon set must have the same name
Make sure your .tff, .svg, .woff, .woff2 and .css files all share identical names. For example, if you download the Material Icon set from the link above, you’ll get the following files:
- materialdesignicons-webfont.eot
- materialdesignicons-webfont.svg
- materialdesignicons-webfont.tff
- materialdesignicons-webfont.woff
- materialdesignicons-webfont.woff2
- materialdesignicons.css
Since all files need to share identical file names, we should change materialdesignicons.css to be materialdesignicons-webfont.css to match the other files names in this icon set.
All files need to share the same name.
Note: most of the time when you download an icon set web font, the css file will be called style.css. This is not uncommon. Be sure to rename this to match the other font files in the icon set.
Upload all of the icon set files, including the .css file
Your newly added icon sets are ready to be used in Divi!
Frequently Asked Questions
Is this plugin GDPR compliant?
Yep! Since the icon fonts are being uploaded to your server there are no external calls to remote servers being made to retrieve them.
How many icons can I have?
You can upload as many icons or as few as you’d like. I originally built the plugin so I could have only the icons I want for each project. I didn’t want to have to filter through 2000 icons.
However, as a test I’ve had ~ 5,500 icons in play at one time and all I can say is thank goodness for the search bar and filter options.
If you’re curious what that looks like, you can watch the video here.
Does this work with Font Awesome 5+?
Out of the box, no, because of the way Font Awesome 5 relies on varying font weights to display different icons using the same unicode. Divi gives all icons the same font weight by default.
That being said, with some tweaking of the Font Awesome 5 files, you could probably access most of the free icons but that would be a project you’d have to take on yourself.
Officially, this plugin does not support Font Awesome 5.
You can upload A TON of other icon fonts on the internet though so I’m sure you can make do.
Best of luck to the bold, though 😉