Divi Icons Pro is a third-party plugin that adds over 2500 icons and several related features to the Divi Builder. It comes with several purchase options and even includes a free option with over three hundred custom icons. In this Divi plugin highlight, I’ll take a look at the pro edition of the plugin and see what it can do.
About Divi Icons Pro
Divi Icons Pro adds a lot of new icon features to Divi including:
- Over 2500 new icons
- 360 custom line style icons
- 1295 Font Awesome icons in 74 categories and 4 styles each
- 900 Material Design icons in 16 categories and 5 styles each
- Divi Builder integration
- Icon search feature in the Divi modules
- Icon filter in the Divi modules to choose by family or type the name of the icon
The icons integrate into the Divi builder and work the same as Divi’s native icons so you can style them with any Divi module that uses icons. Just like any icon in the Divi builder, you can customize the color and size, set where it displays with the module controls, and add a circle or border.
Divi Icons Pro Installation
Unzip the download file. Inside, you’ll find the plugin and the instructions. Upload and activate the plugin as normal.
Activate the API Key by going to Settings > Divi Icons PRO Activation in the dashboard menu. You can now use the pro version of the plugin. The Icons are automatically integrated into the Divi Builder, so there’s nothing else you need to do unless you want to customize the default settings in the theme options.
Divi Icons Pro Divi Theme Options
The icons are enabled by default, but you can enable or disable the icon families that you want and choose how they’re loaded into the website. A new Divi Icons Pro tab is added to the Divi Theme Options. Here, you can choose the icon families that you want to use. You can also choose to load Font Awesome and Google Material Icon Fonts from CDN.
Divi Icons Pro Icons
The icons, filters, and search feature are automatically added to the Divi modules that use icons. This is three blurb modules showing an icon from Line Style Icons, Font Awesome, and Material Design Icons.
Divi Icons Pro Search
The search feature lets you use intuitive words to find your icons. You don’t need to know the name of the icon. Simply enter the keyword you want to search for and the icons appear in the icon selection area. You can narrow your search by brand if you want by selecting the brand in the filter. Some of the icons didn’t show up in the search results, so the search isn’t perfect, but it worked well enough. Some of the icons from Font Awesome and Material Icons might not be named well.
Divi Icons Pro Filter
You can filter the icons or see all of them. The filter shows icons from that specific brand or family. To see the specific brands, just click the button with the label of the brand you want to see. It will filter out all other icons. This example shows a small sampling of Elegant Themes Icons.
Here’s a sampling of Line Style Icons. They’re thinner than the other icons, so they tend to work better by themselves. I did try them with the others and they do work together in some cases. It’s worth trying to see what works for you. The icons are designed well and are some of my favorites between the brands.
Here’s a small sampling of Font Awesome icons.
Here’s a small sampling of Material Design Icons.
Divi Icons Pro Examples
For this example, I’ve replaced the images in the Resort layout with Line Style Icons. I’ve set them to blue and changed the size to 48 pixels. The icons look great in the layout.
In this one, I’ve changed the icon location from the top to the left. I’ve also changed the size to 30px and added 50px of padding to center each blurb.
In this example, I replaced the social media module in the footer with blurbs so I could choose my own icons and style them. All of these are from Font Awesome. I’ve set the colors to match the network’s branding, changed the size to 52px, and added 30px of padding to the right side in order to center them.
This time, I’ve changed the icon to white and made the background the branded color. I’ve added a box shadow and added some padding in order to center the icons. I’ve also added padding to the orange button to widen it so it matches the width of the social icons. The icons blend well with the layout’s design.
This one uses the Home Improvement layout. I’ve replaced the images with blurbs and a combination of icons using different font families. They’re set to display on the left of the blurb. The icons are 50px. You can see in this example that I searched Font Awesome icons for “paint”.
These were already blurbs with icons, so I just selected them, searched for the same topics, and chose different icons.
This one adds a circle to the icons. I’ve made the circle white to match the background of the layout and made the circle’s color match the icons.
The icons work with buttons, but they don’t display in the Visual Builder. They do work just fine on the actual website.
Here’s the icon in the button within the layout. It works just fine.
Here’s a closer view so you can see how it looks in the button.
In this example, I replaced the images with blurbs within the Paralegal layout. I searched for icons that matched the topic and, with the exception of the money icon, used colors from the original graphics.
For this example, I replaced the images in the Butcher layout with icons. I used the red from the title text and set the icon font size to 84px.
I added a background color and a box shadow to each of the blurbs. It looks great within the layout. I’m hovering over the blurb in the center to show its hover effect. It rises above the others and the content, including the icons, shifts to the right.
Divi Icons Pro Price
There are several purchase options based on how many sites you want to use with the plugin. They include 6 month’s support and lifetime updates. You can purchase Divi Icon Pro from the developer’s website.
- Regular license (1 site) – €25.00
- Extended license (unlimited sites) – €65.00
There’s also a free version that includes the 360 line style icons. It doesn’t include support or updates.
Divi Icon Pro Documentation
Documentation is included in the download file, but you can also access it online. The documentation is detailed and steps you through installing the plugin and using the icons and features. It also includes an FAQ and links to get support. Links include the Divi communities on social media and your account with a link to create a support ticket.
Ending Thoughts
Icon plugins are the easiest way to add new icons to the Divi Builder and Divi Icons Pro is as easy as it gets. It includes plenty of icons and you can enable or disable the specific brands of icons to have more control over what appears in the modules. I like the filter and search features. I was able to find an icon for every topic I worked with.
The only issues I had were the icons didn’t want to show in the buttons when using the Visual Builder, but it worked great in the Classic Builder and they show up just fine in the website. Some of the icons didn’t appear in the search results, but I think that’s more of an issue of how the icons are named by the icon developers. These issues are minor and won’t keep me from using or recommending the plugin.
Divi Icons Pro is easy to use and adds a ton of new icons with virtually no effort. If you’re interested in adding more icons to the Divi builder, Divi Icons Pro is work a look.
We want to hear from you. Have you tried Divi Icon Pro? Let us know what you think about it in the comments.
Featured Image via VectorsMarket / shutterstock.com
The post Divi Plugin Highlight: Divi Icons Pro appeared first on Elegant Themes Blog.
