Many of the Divi modules include icons. These icons are drawn well and are great for many common uses, but there are times when designers need something a little more creative. Icons are almost like colors – the more options you have the better. Many designers like to use Font Awesome and Material icons. The best way to use them with Divi is with a plugin called Divi Icon King.
Divi Icon King is a third-party plugin that integrates Font Awesome and Material icons with a search feature into all of the Divi Builder modules that use icons. In this article we’ll take a look at the features of Divi Icon King and see what it can do.
Divi Icon King Settings
A new link is added to the Settings menu in the dashboard called Divi Icon King. Here you can choose to enable Font Awesome, Material Icons, and use local versions. The local versions allow you to load them from your local server instead of the icon provider’s CDN. None of the icons will be available until you select them here.
Divi Modules Without Divi Icon King
Without Divi Icon King installed, the Divi modules have 380 icons to choose from.
Divi Icon King Icons within Divi Modules
Font Awesome adds 675 icons and Material Icons adds 931 icons. Between them, Divi Icon King adds 1606 icons, bringing the total number of icons to 1986. This opens up a lot of design opportunities.
Divi Icon King also adds a filter so you can see specific types of icons. Filter by Elegant Themes, Font Awesome, Material, outlined icons, solid colored icons, all, and close. It also includes a search box to help you find what you’re looking for.
In this example I searched for social icons. It has quite a few to choose from. I like this search feature. In my opinion this plugin is worth using just for the search feature alone.
Divi Icon King Examples
Here’s an example of the standard Divi icons in use. This example is from the Graphic Illustrator layout. They look great, but any layout that uses the standard Divi icons will look the same. I’ll replace them with both Font Awesome and Material icons.
Here’s a look at the new icons within the Divi Graphic Illustrator layout. They can be more specialized than the standard Divi icons. Since Divi Icon King imports the icons into the Divi Builder, you can style them the same way as the standard Divi icons.
This includes customizing them from the Visual Builder. You’ll still need to choose them from the backend, but the frontend is great for styling. In this example I’ve increased the icon size from 40 to 100.
In this one I’ve increased the size to 120 and placed the icons on the top.
I did have issues choosing the icons from the Visual Builder. The styling works great, but the icons themselves don’t show up within the selection screen, so you’ll have to choose them from the backend builder.
Here’s the Car Dealer layout. It uses some simple icons. I’ll replace them with something more specific to cars.
Here’s the layout using one from Font Awesome and one from Material Icons.
This one is from the Life Coach layout pack. These are the original Divi icons.
Here is the layout using more specific icons from Font Awesome and Material Icons.
Here’s the Pharmacy layout pack. It uses images instead of icons within the blurbs. They look great, but there are a few things you can do with icons such as add a circle, change their color, and change their size, that will add some design options.
I’ve added icons and made each one a different color to blend with its specific location within the gradient background. I’ve set the icon size to 120.
Here’s the same example but I’ve changed the icons to white. Everything else is the same.
Here are the icons with styling similar to the buttons within the layout.
Here I’ve changed the background to blue with a touch of transparency using the frontend builder. I’ve copied and pasted the styles to each of the modules.
Divi Icon King also works great with Extra. This is the pharmacy layout pack. I didn’t have to make any changes for the icons to work with Extra.
Divi Icon King is $19.97 and is available in the Divi Cake store. You can see several video demonstrations on the product page to help you decide if this plugin is right for your needs. The page also includes support links, which is provided by the developer.
Ending Thoughts on Divi Icon King
Divi Icon King is easy to use. Once it’s installed and you enable Font Awesome and/or Material icons you have close to 2000 icons to use in your designs. I like that they icons are added automatically and that styling them is the same as styling any Divi icon. I also like the search feature, which greatly reduces the time it takes to look through the icons to find the perfect one for your design.
Even though I used blurbs in these examples, it actually works with any module that uses icons. It also works great with Extra. Divi Icon King isn’t 100% compatible with the Visual Builder (the Font Awesome and Material icons are not visible), but I did get the styling portion to work great.
If you’re interested in adding more icons to the Divi Builder in the easiest way possible, Divi Icon King is worth a look.
We want to hear from you. Have you tried Divi Icon King? Let us know what you think about it in the comments.