Divi Upload Icons is a premium plugin for Divi that adds an uploader where you can upload almost any icon set you want and use it within Divi including both the backend and frontend builders. You’re not limited to the few icon sets that a plugin connects with. If it’s a common icon format with a CSS file you can add it to your Divi Builder.
In this plugin spotlight, we’ll take a look at Divi Upload Icons and see what it can do.
– You can purchase Divi Upload Icons in the Elegant Marketplace shop.
Installing Divi Upload Icons
To install Divi Upload Icons, first upload and activate the plugin as normal.
Next, you’ll need to activate your license. In the dashboard menu, go to Settings > Divi Upload Icons and enter your license key. Click Activate License. Once the license is activated you can start uploading your icons.
Where to Get Icons
You can use just about any set of icons you want but you’ll need to use one of the common formats, which includes .eot, .svg, .ttf, .woff, .woff2, and .css. The icons will also need the accompanying CSS file.
There are lots of places to get free or premium icons online, but not all icon sets include the formats or CSS files that Divi Upload Icons needs to work correctly. There’s a list of known compatible icons at the developer’s website. The list currently includes links to 17 libraries of icons and includes enough for just about any need. This list includes thousands of icons.
Uploading Icons
A new menu is added to the dashboard under Settings called Divi Upload Icons. This includes the uploader and a set of instructions to step you through of how to use it. drag and drop the icons and their CSS files into the uploader.
For this example, I’m using Material Icons. There are a few files you’ll need that typically comes with icons when you download them. This is the unzipped file from Material Icons. First, open the CSS folder.
You’ll see several files within this folder. In this folder there are two CSS files: one is the standard file and the other is the minified file. You’ll need to rename this and upload it along with the icons. I prefer to copy this file and paste it into the folder with the icons, where they can all be dragged into the uploader together.
Paste it into the Fonts folder. Now you can see that the name of the CSS file doesn’t match the icons file. The names have to match so Divi Upload Icons knows how to use the files.
In this example, I’m adding -webfont to the CSS file-name. You can name your files anything you want as long as they match.
Next, drag the icons and CSS files to the uploader.
As they’re uploading you’ll see a circling icon and the icons will appear in the list to the right. The Material Icons are now available in my Divi Builder within every module that uses icons. You can click the X to delete any of the icons in order to remove them from Divi. If you do remove any of the font sets, by deleting them or by deactivating the plugin, you’ll need to reassign the icons within your modules.
Icons in the Divi Builder
The Material Icons are now available in the Divi Builder. They’re already added to the modules that use icons, so there’s nothing else that needs to be done in order to use them. Divi Upload Icons also adds a filter where you can filter or search the icons.
The names of your icon sets are added to the filter as a button. You can filter the icons by clicking on the icon set’s file-name. In this case, it adds materialdesigns-webfont as a filterable option.
It also works from the front-end builder, where you can see and filter your new icons in real-time.
It also works with Extra from both the backend and frontend builders. Here’s an example from the Visual Builder.
I’ll add a few more icon sets to see how well the filter works and how easy they are to use. In this example, I‘ve added Foundation Icon Fonts 3 from Zurb.com. Foundation Icons is added to the filter.
Here’s a look at IcoFonts. As expected, IcoFont is added to the filter. When you hover over the icons you’ll see the IcoFont name in the tool-tip.
These are Map Icons.
These are from Themify. I uploaded a different file-type than the others. They all play well together.
These icons are from Linea. These also use a different file-type.
I ended up with over 4100 icons, and as you can see in the examples above it’s easy to use that large amount because they’re filterable and searchable. Here, I’ve searched for ‘chart’ and I’ve found icons from each of the icon sets that I’ve uploaded that have the word ‘chart’ in their name.
I’ve just used blurbs up to this point, but they work just as well in buttons and other modules, and you can style them just like the regular Elegant Themes icons.
If you have issues it’s probably something as simple as misnaming the CSS file (guess how I know). When you upload the files it provides a clickable block where you can see if the upload was successful. If it wasn’t a successful upload it will show an icon next to the icon’s name. Hover over this icon and you’ll see an error message.
This example shows that the CSS file is missing. In this case, I didn’t upload a CSS file when I uploaded the icon set. It will also give you this error if the CSS file name doesn’t match the icons. If the icons won’t upload at all it’s most likely a file-type that isn’t supported (I’ll bet you can guess how I know this one too).
License and Documentation
Divi Upload Icons is $47 in the Elegant Marketplace shop. The license is unlimited, meaning it can be used on unlimited websites for both you and your clients. This also includes unlimited updates.
Documentation is provided at the developer’s website. It includes several tutorials, troubleshooting, and a video walkthrough
Ending Thoughts
I found Divi Upload Icons to be easy to use (as long as I used the correct file types and named them correctly). If you have any issues, I do recommend that you read through the documentation or watch the video, as it can be easy to upload the icons incorrectly, such as using the wrong file names or file types. The documentation is great for troubleshooting through those issues.
I did have a few problems with a few of the svg sets that I had downloaded, but I uploaded a different format and they worked fine. It’s fortunate that they provide icons in multiple formats.
Divi Upload Icons is the easiest way I’ve seen to upload your own icons or specific icon sets to the Divi Builder. Whether you need to upload a small handful of icons, or if you’re one of those who prefers to have thousands of icons to choose from, Divi Upload Icons makes them easy to use.
The value of this plugin is easy to see just from a few examples. I like having lots of icon sets to choose from. This is an easy plugin to recommend.
We want to hear from you. Have you tried Divi Upload Icons? Let us know what you think about it in the comments below.
