Divi Plugin Highlight: WP and Divi Icons

Posted on October 17, 2018 by in Divi Resources 22 Comments

Divi Plugin Highlight: WP and Divi Icons
Blog / Divi Resources / Divi Plugin Highlight: WP and Divi Icons

WP and Divi Icons is a third-party plugin for WordPress that works with any WordPress theme and integrates into the Divi Builder. For use with Divi, it includes exclusive layouts you can use in your projects. The icons are available in the WordPress editor and in any Divi module that allows you to choose icons. In this article, we’ll take a look at WP and Divi Icons and see what makes it stand apart from the crowd.

WP and Divi Icons adds over 2500 icons to WordPress. It includes Font Awesome Icons, Material Icons, and 450 custom designed icons including 48 multi-colored icons. It’s available in both a free and a pro edition. I’m testing the pro edition.

Installing WP and Divi Icons

Upload and activate the plugin as normal. I’m using version 1.1.0 with Divi version 3.17 and WordPress 4.9.8.

Next, you’ll need to activate your license. You can navigate to the activation screen or click the message that appears at the top of the screen. It’s still helpful to know how to navigate there, though, because this page will become the options screen once you enter your license key.

To get to the screen regardless of what theme you’re using, click on the Instructions link in the plugin’s description in the plugin list. If you’re using Divi, a new menu item is added to the Divi menu in the dashboard called WP and Divi Icons. Click this and enter your license key.

Customizing the Multi-Colored Icons

After entering your license key it opens the screen with the instructions, list of 48 multi-colored icons, and tools to create your own color schemes for those icons.

You have control over three colors. Adjust the color controls and wait for a few seconds to see the results. Clicking Remove deletes the color scheme. The colors add a little shading effect, which creates darker versions of each color and looks amazing.

Clicking Add Color Scheme creates a new set of the multi-colored icons that you can adjust.

Add as many color schemes as you want. This greatly expands what you can do with icons. The controls are intuitive. As it turns out, I found this to be a little bit addictive.

Using WP and Divi Icons in WordPress with Any Theme

To use the icons with any theme, select the new icon that’s added to the WordPress editor.

This opens the editor where you can choose an icon, edit the color by typing it into the color field or using the color picker, change the size by entering the number in pixels or using the slider, add a title, and add a class. You can also search for icons.

Any changes you make are shown live. In this example, I’ve entered the color I wanted, changed the size to 106 pixels, and changed the name to Green Leaf.

Clicking OK adds the icon to your content.

Double-click the icon to open the editor and make changes.

Click OK and the changes are reflected to the icon within your content.

This editor doesn’t edit the multi-colored icons. You’ll have to edit those in the main settings screen that I demonstrated above. You can still select them from this editor, change their size, add a title, add a class, and insert them into your content from here.

The icons look great within the content.

Using WP and Divi Icons with the Divi Builder

Lots of new icons are added to the Divi Builder that can be accessed from any module that allows you to select icons. A new search feature is added and the icons are much larger, making them easier to see (which shows this plugin was probably designed by an old guy like me. I can both relate to and appreciate this feature).

I would like to see a filter added so I could choose between Font Awesome, Material, or the custom icons. This way I could easily see the custom icons and ignore the Font Awesome and Material icons if I wanted something different from everyone else, or build with just Font Awesome or Material Icons, or blend my icons selectively.

It includes both single and multi-colored icons.

Search and change icons live from the frontend.

They’re adjustable just like any Divi icon.

You can also add multi-colored icons from the frontend builder. You can’t adjust the icon’s colors here (that’s done in the multi-color icons editor), but you can add a circle, add a border, adjust their colors, and adjust the icon’s size from the module’s settings.

In this example, I’ve added a circle with a border.

You can use them from both the frontend and the backend.

The WordPress icon editor is also available in the Divi text module. This editor works exactly the same as with any WordPress theme.

WP and Divi Icons Layouts

The plugin works with any theme, but it does have special features just for Divi. One of the greatest advantages of using it with Divi is the exclusive custom layouts. They were custom designed using WP and Divi Icons and the download link is only available within the plugin. They are available for download to anyone with the plugin and can be used on any project. They are full layouts with many styled modules.

There are already several available and several more on the way. Here’s a look at each one with a focus on how they use the icons. You can see them at the developer’s demo page.

eCommerce Layout

This layout includes a styled header with bubbles to show the types of payment gateways and shipping partners the company uses. Multi-colored icons show the services offered. How it works are shown in tabs. It also includes pricing tables, testimonials, FAQ’s newsletter signup, and footer.

Creative Agency Layout

This one includes a styled header, an area about the types of services you offer, a portfolio, a slider covering how you work and the steps you take, testimonials, awards, about your team, contact, and footer. It uses lots of angled corners and deep shadow effects. The multi-colored icons show the services.

Business Layout Dark

This one has a two-column header with an image in one side and text in the other. A section showing the services you offer uses multi-colored icons and shows images and text alternating down the page. Other sections use large background text and show the history of the company, the team members with multi-colored icons in the overlay, contact form, contact information, and footer.

Business Layout Light

This is the same layout as Business Layout Dark, but with light colors.

Nonprofit Layout

This one displays a full-screen image slider with a vertical menu on the right and uses icons for social follow buttons. A slim section under this shows a donation CTA. It also includes an about section, causes that you support, an event section, projects, blurbs with icons, sponsors, and a footer.

License and Documentation

Prices range from free for a limited edition, $39 for a single site, $59 for 3 sites, and $79 for unlimited sites. You can purchase the plugin on the developer’s website.

It includes premium support and 3 years of updates. Documentation is provided at the developer’s website.

Ending Thoughts

WP and Divi Icons is easy to use. It does take a few extra seconds to load the icons when I click on them in the Divi modules. I’m sure this is mostly due to my slow “welcome-to-country-life” Internet connection. I would like to see a filter added to the Divi modules. The search feature is helpful for finding icons based on keywords.

I like that it adds Font Awesome and Material Icons, but my favorites are the custom icons- and especially the multi-color icons. The editor is simple fun to use. I think it’s a great plugin even without Divi, but it’s even better with Divi because of the free layouts.

We want to hear from you. Have you tried WP and Divi Icons? Let us know what you think about it in the comments.

Featured Image via VectorsMarket / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday

Divi Supreme Pro

With 50+ Divi premium modules and extensions to choose from. Take ...

View Product

7683 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

5146 Sales


A powerful menu builder that brings the coolest designs and popups ...

View Product

3639 Sales


Most Popular Divi Plugin with 40+ Powerful Modules, 4+ Useful ...

View Product

1100 Sales

Woo Essential

The best all-in-one approach to WooCommerce website design for all ...

View Product

525 Sales

Divi Essential

All in one set of 60+ design modules with 500+ layouts for all Divi ...

View Product

2841 Sales

Graphina-Divi Dynamic Charts & Graphs

Most Powerful Data visualization plugin for WordPress Divi Builder.

View Product

569 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

5262 Sales

Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: WP and Divi Icons Pro

Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 in Divi Resources

WP and Divi Icons Pro is a third-party plugin that adds over 3900 icons with 11 different styles to the Divi Builder. Icons include Font Awesome, Material Design, and custom icons. You can also upload your own and use them with all the others. In this post, we’ll take a close look at WP and Divi...

View Full Post
Divi Plugin Highlight: Divi Shop Builder

Divi Plugin Highlight: Divi Shop Builder

Posted on November 19, 2022 in Divi Resources

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want...

View Full Post


  1. Thanks this is actually really useful.

  2. The most important question: Are the icons stored locally on the server and can be used afterwards without reloading for website visitors. So-called DNS prefetching is unfortunately not DSGVO-compliant (GDPR).

    • I have the same question. Thanks for asking it.

    • + 1

  3. Nice article. Having icons available is a quick way of adding a nice touch without having to open illustrator or Photoshop. I have a pro version of font awesome: is there any way I can add them to the divi-builder? Thank you!

  4. Great icon set at a great price. Thank you!!

    I did a quick read above. Can you set a color palette to be used on all icons within the site, or do you have to adjust every icon’s colors?

    Aspen Grove, that yearly membership is looking better!!!

    If you get your themes into layout packs and a mega menu that uses VB modules, that would ROCK!

    • Hello, each color scheme you create will affect all of the multi-colored icons, not individually. You can create multiple color schemes which is very useful 🙂

  5. Thanks for the write up Randy!

  6. Surprised Divi does not have this feature by default already.

  7. *No Offense Please*

    Why Divi doesn’t have font awesome or material or any other free icon sets? Or an easy way to add those free icon sets?

    • I agree. The Divi icons are great but somewhat limited. Font Awesome 5, Material etc would be a great addition.

    • I have the same question. Thanks for asking it.

    • I think divi has it.. it includes modules font. Add blurb modules, turn on icon.. and you will see its there..

      • no, only ET icon pack & we can’t use the custom icon.

    • I agree. Should not have to pay just to get FA built in.

  8. Yet another great plugin from Aspen! I’m definitely into this kind of stuff, but this is another one to add to an ever-growing list of plugins. Looking at the demos I would actually consider buying something like this. The icons looks great! I just can’t get over adding another plugin to my list. Maybe if it was cheaper, I might consider the premium version.

    Looks great either way…Keep it up Aspen!

    • Our membership to all Plugins and Child Themes makes it very affordable 🙂

  9. Hi Randy, how does one get to the layouts you have mentioned in the post? also are these only on the paid version of the plugin?

    downloaded and installed the free version to take it for a spin but could not find a way to check out the layouts

  10. It would much better if Divi just supported Font Awesome as the Divi icons pale in comparison and are not updated with any of the latest icons that many use today. The Divi icons were a good resource years ago back in its infancy, but frankly, there is no point justifying their use when Font Awesome provides far greater selection and updates.

  11. Thanks, we will have to try some of these icons out ourselves. The ability to change colors is such a great feature, not many icons go with out colors.

  12. I agree. I also bought Font Awesome Pro and would rather Divi just make things easier to use THAT. Why reinvent the wheel? FA specializes in ONE thing. And they do it right.

  13. *** DO NOT USE THIS PLUGIN ***
    I only cared about using the 48 multicolored icons. Unfortunately, this plugin does not work as expected. First, I noticed this plugin is a huge resource hog and greatly slows DIVI down in all respects – sorry to say. Second, you cannot use the multicolored icons like you think – let me explain.

    After applying a couple of colors to a multicolored icon gallery & saving it, I inspected the page elements code to get what is needed for when you want to use them. Why? Because when you are trying to apply a multi-colored icon in a blurb module, it’s only possible to get them in the content area – NOT the Blurb’s actual icon area.

    DEACTIVATED this plugin, and deleted it from my WordPress site. I’ll stick with Font Awesome for now.

Join To Download Today