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.
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.
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.
Colors are adjusted in the Design tab. Settings include the primary, secondary, and tertiary icon colors. The icon I’ve selected shows two colors.
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.
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.
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.
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 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.
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.
Multicolor icons add more color options to the editor. It will add either two or three color pickers depending on the icon you choose.
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 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.
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.
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.
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.
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.
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.
Is there a way to see what icons are available before ordering the plugin?
You can try the plugin out here for free https://demo.divi.space
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.
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!
This plugin doesn’t appear to be on the elegant themes store anymore, why is that?
The plugin was removed from our marketplace, but if you want to use the plugin, you can purchase it directly from the plugin author’s site:
https://wpzone.co/product/wp-and-divi-icons/