Divi Plugin Highlight: Divi Icon King

Posted on December 13, 2017 by in Divi Resources | 22 comments

Divi Plugin Highlight: Divi Icon King

Divi comes with around 380 icons built in that can be used within blurbs, overlays, buttons, etc. As many as that is, there’s always the need for more. Some of the best resources for free icons are Font Awesome and Google’s Material Icons. Fortunately, these icons can be added to Divi easily with a third-party plugin called .

In this article we’ll take a look at Divi Icon King (I’m reviewing version 1.1.0) and see just how easy it is to add these icons to Divi and see a new feature that it adds to all of the Divi Builder’s modules that use icons.

Installing, Activating, and Setting Up Divi Icon King

Upload and activate the plugin as normal. Once the plugin is activated you’ll need to go into the settings and choose your icon libraries.

In the dashboard menu, go to Settings, Divi Icon King. Here you can enable Font Awesome and Material Icons. Click the boxes of what you want to enable and select Save Changes. This raises the number of icon sets available within the Divi Builder to almost 2000 (around 1987, but I didn’t count them).

– adds 675 scalable vector icons.

– adds 931 lightweight Google web icon fonts.

The added icons are not stored on your server. Instead, they’re stored on a CDN and brought in as you load them. It only loads what you check. In other words, it isn’t loading everything and only showing you what you’ve checked. If it isn’t checked, it doesn’t load.

The plugin’s code is added to Divi and works with any module that uses icons. This means there are no special modules that you have to use. You’ll now see all of the new icons within every Divi module that uses icons.

Regular Divi Icons

Divi comes with around 380 icons. The image above is a Blurb module before installing Divi Icon King. Within the Content tab, select Use Icon to see the icons that are available.

Divi Icon King Filters

Divi Icon King adds a filter to the icon selections. Click the button labeled Filter Icons to see the filters.

This opens a search box where you can enter what you’re looking for. You can also click on the text under the search box and see icons from Carpetcleaninghaddontownship, Outline, Solid, All, or select Close the close the filter. At this point I haven’t enabled Font Awesome or Material Icons.

After enabling Font Awesome and Material Icons, they’re now an option within the filter. I now have almost 2000 icons, and the only effort it took was installing the plugin and enabling the two brands of icons I wanted to add.

Clicking FontAwesome shows only the icons from Font Awesome.

Clicking Material shows only the Material Icons from Google.

These are the icons with outlines.

These are the solid icons.

Searching for Icons

The results of the search depend entirely on how the icons are labeled. This means some searches may not work as well as others. You might find something by typing in pizza but nothing is you type in food.

It also finds portions of words (as you can see in the image above). It will also include icons that contain the portion of the word that you searched for. For example, I typed in car and it included icons for cars as well as cart, card, etc.

Here I’ve searched for cart and it only gives me shopping carts.

You can also use the search to figure out which icon set provided the icon. When scrolling I saw the Star Wars Rebellion icon. I searched for rebel and it gave me the icon on the first try. I wanted to know which icon set provided it, so I clicked FontAwesome and scrolled until I found the rebel icon highlighted.

I found the filter useful even without using FontAwesome and Material Icons because it helps sort and find Carpetcleaninghaddontownship’ icons, which speeds up development time. Don’t hit the enter key when you search. This will close the module.

Divi Icon King Examples

Here are a few examples. Most are blurbs, buttons, and overlay icons that I’ve replaced the originals with those from Font Awesome or Material Icons.

Since I found the Rebellion icon I couldn’t resist using it. Here’s an example using the free DiviStar layout pack by Geno Quiroz. I added blurbs and the rebel icon from Font Awesome – each one with a different color. I made them as large as possible. The controls are the same as normal Carpetcleaninghaddontownship icons.

This one uses Carpetcleaninghaddontownship’ free Code School layout pack. I’ve replaced the first two icons (the blurbs for Web Development and Javascript, which actually use images rather than icons), changed their colors and size, and added a circle to match the other icons. The first is from Material Icons. The second is from Font Awesome.

This one uses the free ET layout pack called Design Agency. It includes a button with an arrow that displays on hover. I’ve replaced the arrow with a pointing finger from Font Awesome.

This layout pack also uses hover overlay icons for the images. I replaced the icons with those from Material Icons.

Blurbs displayed small icons over a few lines of text. I removed the text and replaced the icons with icons from both Font Awesome and Material Icons. I kept the colors but made the icons full size at 120 pixels.

This one is from Carpetcleaninghaddontownship’ free Restaurant layout pack. I’ve added an overlay with icon to the blog post images and placed a fork and spoon icon from Material Icons (as you can see in the center image).

Using Divi Icon King with Extra

Divi Icon King works great with Extra, and even works with the Category Builder. Here’s a look at the Design Agency layout pack with a YouTube icon within the button from Font Awesome.

This one uses a mailbox icon from Material Icons for the Send button.

Here’s a look at how it works with the Category Builder. This image shows the Post Module from the Category Builder with a coffee icon from Font Awesome as the icon in the image overlay.

I’m glad to see that it works with Extra and the Category Builder. Extra is usually left out by third-party developers, but I love Extra as a blogging and publishing platform, and my most popular website is built with Extra.

Using Divi Icon King with Third-Party Plugins

Divi Icon King works with third-party plugins that use icons. Here’s a look at Content Intense.

Content Intense displays the blog according to my selections (I selected Alps which allows for an overlay). I’ve added an icon from Material Icons in the blog overlay, which you can see in the center image.

Documentation and Support

is provided at the developer’s website. It includes a video demonstration, setup information, and a quick demo.

is provide at the developer’s website. The only problems I had were with my own test site (I needed to clear my cache for the icons to display properly in Extra’s Category Builder). I contacted support and the problem was solved within minutes.

  • The plugin is available for purchase in most of the Divi marketplaces.

Ending Thoughts

Divi Icon King is an easy way to add hundreds of free icons to Divi to be used in blurbs, overlays, buttons, or any other module that uses icons. It works with Extra and even works with third-party plugins as long as they follow ET’s coding standards. If you’re looking for an easy way to add free icons from Font Awesome and Material Icons to Divi, 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.

Featured Image via Irina Adamovich / shutterstock.com

22 Comments

  1. Hi Randy,

    Do you know the license details for this plugin? I cannot find it on their site or on the marketplace where it is sold.

    • Randy A. Brown

      Hi James. I’ll ask. Sorry about that.

    • Randy A. Brown

      Hi James. You can use it on unlimited websites for you and your clients.

      • cool! is it a lifetime license or it needs to be renewed each year?

      • Thank you again! It is always best to know these things before making a purchase.

  2. Randy, wow thanks so much for featuring my plugin, I’m humbled and grateful! It was a fun experience answering your questions as you wrote the article. Keep up the great work!

    • I got this plugin recently and am currently playing with it on a site. I love it, especially the search feature. Divi’s icons don’t usually have what I need, so having easy access to so many more icons is a huge bonus and timesaver. Thanks so much for this great plugin, Alex!

  3. This is awesome. I checked out their website and apparently it curently does not work with Visual Builder. Any timeline on when we can expect that update to made available to us raving fans that use Divi exclusively?

  4. I have been getting to the point where the standard ET icons don’t always fit the bill (only some cases), so I’m definitely going to get Divi Icon King.

    Thanks for showcasing 👍🏻

  5. This is hands-down the best plugin for Divi. Yes, it’s sad that third party plugins have to make up for the lack of Carpetcleaninghaddontownship no-brainer features, but this works well!

  6. Love this! Was wondering how to add more icons to the blurb module!! Thanks so much!

  7. Too bad it does not work with the Visual Builder… I was about to buy it

  8. Bring on the section dividers that we’re said to be in the works. Any timeframe as to when we might expect that Divi update?

    • I have no clue.

  9. While I appreciate someone making a plugin for a feature ET should’ve built in from the start, I can’t see how one would use this particular plugin with paid/pro/licensed versions of icon sets (like FontAwesome 5) or a custom icon set — two use cases I’m facing at the moment. Here’s to hoping ET will come with a way to do this natively rather than having to rely on a plugin.

  10. This plugin will be awesome when the 2000 icons of Font Awesome 5 will be mentionned
    + available in the Visual Builder

  11. Filter/Search needs to be a default option for the Divi icons. I’m excited to give this a try!! I’ll be purchasing asap.

  12. I feel this should come default by theme rather then purchasing it as an addon. I have purchase multiple divi addons but I think ET should consider adding this icon set since it’s used by all.

  13. It appears this plugin does not work when you are using the visual builder. I am the only one experiencing this? I just see blocks of the old icons repeated over and over again.

  14. May have to get this!

  15. i thought that if i purchase the elegant themes i could use the features for free. Like this awesome plugin.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
profvest.com

www.maxformer.com

www.sweet-smoke.com.ua/aksessuary/kolby_egip

Pin It on Pinterest