Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 by in Divi Resources 5 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 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

5 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!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today