Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 by 7 Comments

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

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 Icons Pro to help you decide if it’s the right Divi plugin for your icon needs.

Let’s get to it!

About WP and Divi Icons Pro

WP and Divi Icons Pro include over 3400 single-color icons and 500 multicolor icons. It works with the classic editor, Gutenberg, and it integrates into Divi modules so it’s always available regardless of the editor you’re using. The multicolor icons include an editor so you can specify the colors. This makes them work well with your branding.

For Divi, it’s available within any Divi Module that includes icons or a content editor such as the Icon Module, Blurb Module, Accordion Module, Button Module, Toggle Module, Text Module, Call to Action Module, etc. We’ll see both options in this post.

WP and Divi Icons Pro Divi Module Settings

All the Divi modules that display icons have a new option to choose the icon type, more icons to choose from, and more options in the filter. It also includes a link to the WP and Divi Icons Pro plugin settings page (more on this later). An example of a Divi module that contains an icon is the Blurb Module. As soon as you install and activate the WP and Divi Icons Pro plugin, an entire new range of icons will appear in the icons area.

WP and Divi Icons Pro Tutorial

Icon Type

The Icon Type lets you select between Single Color Icons and Multicolor Icons. With Single Color Icon selected, you’ll see the standard icon picker with search and a filter (as seen in the image above). With Multicolor Icon selected, you’ll see a new selection window called Icon Style. This has 9 options to choose from. These options divide the icons by design style.

WP and Divi Icons Pro Tutorial

Selecting a design style shows only that type of icon in the icon selection window. This window still includes the search and filter options. The filter has already been applied, so it only shows the options that pertain to that design style.

WP and Divi Icons Pro Tutorial

Colors are adjusted in the Design tab. Settings include the primary, secondary, and tertiary icon colors. The icon I’ve selected shows two colors.

WP and Divi Icons Pro Tutorial

If the icon has three colors, you can adjust all three. This example uses three colors. Some icons, like the one in this example, add a fourth color that’s a shade of the third color.

WP and Divi Icons Pro Tutorial

Icon Filter

The icon selector includes search and filter options. The filter includes Outline, Hand Drawn, Sketch, Filled, Multicolor, and more. The filter option allows you to quickly find the icon you want in the style you like.

WP and Divi Icons Pro Tutorial

To search, just enter the keyword of the type of icon you’re looking for. For example, enter “tool” to find all the tool icons. You can filter these even further if you want.

WP and Divi Icons Pro Tutorial

Style the WP and Divi Icons Pro Icons

The icons integrate with Divi and work the same as all Divi icons. Styling the WP and Divi Icons Pro icons is the same as styling any icon with Divi modules. In the example below, we’ve added a white background color and a 1 pixel border.

WP and Divi Icons Pro Tutorial

WP and Divi Icons Pro Content Editor

All Divi modules with a content editor, such as the one found in the Text Module, Call to Action Module, Accordion Module, Blurb Module, etc., include an option in the toolbar to add an icon to your content.

WP and Divi Icons Pro Tutorial

This opens an icon insertion window that allows you to add an icon in-line with the content where you’ve placed your cursor. Selecting this opens the icon selector modal where you can select single or multicolor icons, choose the icon type, search, choose a color, change the icon size, see the icon title, and add a CSS class. Of course, it also includes a window with the icons you can select. You can add as many icons as you want to your content.

WP and Divi Icons Pro Tutorial

Multicolor icons add more color options to the editor. It will add either two or three color pickers depending on the icon you choose.

WP and Divi Icons Pro Tutorial

You can double-click the icon in the content to open the window again to choose a different icon or make adjustments.

WP and Divi Icons Pro Tutorial

WP and Divi Icons Pro Plugin Settings

WP and Divi Icons Pro includes a settings screen with several tabs where you can make adjustments, upload icons, choose the icons you want to use, and see instructions on using the plugin.

Performance Tab

The Performance tab lets you disable the icons you don’t want to use. Uncheck them and they won’t appear in the icon selectors. This helps improve Divi’s performance because you’re not loading unused icons. In this example, I’ve unchecked the Font Awesome and Material Design icons.

Multicolor Icons Tab

Multicolor Icons let you specify color schemes for your icons. The colors you specify here appear at the end of the icon lists. At first, the multicolor icons didn’t appear in the Divi icon selector until I defined a color scheme in the WP and Divi Icons Pro plugin settings. Fortunately, this is easy to do.

WP and Divi Icons Pro Plugin Settings

Go to Divi > WP and Divi Icons in the dashboard menu. Select the Multicolor Icons tab. Click Add Color Scheme and select the colors to specify your own or click Save to use the default colors. You can adjust three different colors. You can add multiple color schemes and you can also remove any color scheme you don’t want to keep.

WP and Divi Icons Pro Plugin Settings

Custom Icons Tab

The Custom Icons tab allows you to upload custom SVG icon sets. Once they’re added, they’re available within the Divi modules just like the others. To upload them, click Upload New Icon Set, select Choose File in the modal that opens, and select your icons. The zip file for the custom icon font must be generated with Fontello or Icomoon.

WP and Divi Icons Pro Plugin Settings

It does take a couple of steps, but it is simple and easy. Go to Fontello or Icomoon and upload your fonts to their platforms. Then, download the icons as a zipped file in their format. Once you have your zipped file, upload it in the Custom Icons tab. Your icons integrate with all the other icons.

WP and Divi Icons Pro Plugin Settings

Where to Purchase WP and Divi Icons Pro

WP and Divi Icons Pro is available in the Divi Marketplace for $79. It includes unlimited website usage, 1 year of support and updates, and a 30-day money-back guarantee.

Where to Purchase WP and Divi Icons Pro

Ending Thoughts

That’s our look at WP and Divi Icons Pro. It integrates well into the Divi Builder and provides several ways to add icons to your layouts and content. The features and settings are intuitive. I like the option to disable any icons I’m not using to save web resources. I also like the ability to upload my icons. They do have to be in a certain format, but fortunately, it isn’t difficult to create them in that format. If you’re interested in adding lots of new icons to your website, WP and Divi Icons Pro is worth a look.

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

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
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

7 Comments

  1. Is there a way to see what icons are available before ordering the plugin?

  2. I really love Divi and all of the features coming out. I worry about plugin bloat with so many features requiring extensions, and how this might affect Divi’s aggressive attempts to increase performance of the builder.

    Will there be a solution to avoiding plugin bloat, especially with the latest news about opening the API to developers?

    Thank you again for Divi! It’s an excellent builder.

    • This particular plugin avoids bloat by allowing the user to activate only the icon packs they wish to use on any particular site, rather than loading all of them at once.

  3. Sounds great! As always I have to look if this meets the requirements of GDPR. Therefore it’s mendatory to have all icons served locally from the server. If this is the case or an option – great!

  4. This plugin doesn’t appear to be on the elegant themes store anymore, why is that?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today