They say a picture says a thousand words, and the same can be said for web design. Using icons for web design is a great way to communicate concepts in an easy-to-digest and quick manner, but what do you do if you’d like more Divi icons at your disposal?

By default, the Divi theme comes with a standard set of icons. Since these are the only icons in the theme package, they’re wildly overused and, after seeing the same icons everywhere, the aesthetic can get a bit boring. Recently, Divi added Font Awesome icons, but users are limited to the places where they can be used.

So what options do you have if you want a bucket load of fun icons to play around with at your disposal?  And use them everywhere? You could opt to integrate Material Design Icons or Font Awesome Icons into your website, however, this process could be confusing if you’re not comfortable using code. Thankfully, our plugin WP and Divi Icons makes the process intuitive and fun!

With WP and Divi Icons, you can add thousands of icons to your Divi site in just a few clicks! There are icons that span countless industries and icon styles, so you’re guaranteed to find icons to match your site design. One of the best features about the WP and Divi Icons plugin is that it comes with a multicolor icon feature. Here, you can choose to customize the color of your icons directly from within the plugin—no need to use expensive or complicated graphics design tools.

In the following tutorial, we’ll show you just how easy it is to add icons to a Divi and WordPress website thanks to the WP and Divi Icons plugin. After a simple setup procedure, you’ll be able to add more icons to Divi and start creating beautiful designs for your Divi website. In the latest release of the plugin, there are an incredible nine new icon packs added to the plugin! Have a look at these beautiful new icons below.

WP ZoneUse these gorgeous icons in your next Divi design! Get the premium WP and Divi Icons plugin from our store!

Note: The following post uses a demo of the premium version of the plugin which includes a whopping 3400+ single color icons and 500+ multicolor icons. There is also a free version of the plugin, streamlined with a few of the features of the premium version. You can either purchase the premium version or download the free version of the WP and Divi Icons plugin from the WP Zone store.

Why You Should Use Icons in Your Divi Web Design

Icons are a core aspect of any website. Take a look at your social media platforms, email or any website, and you’ll find icons, either in support of text or replacing it altogether.

Icons have been used throughout time with one core goal; to communicate effectively through easily understood visual language. Icons have several benefits in web design; they’re practical and efficient communication tools, enhance brand personality, aid with navigation, and generate interest.

Icons are beneficial in the following ways:

1. They describe functions. Of course, using word or text is the most direct approach but the attention span of users on the internet is notably low. Adding icons to describe functions can be a more practical approach. They add more variety and also reinforce messages with visual explanations.
2. Icons tell stories. Icons are commonly used to explain processes as they can visually explain each step. They can aid us visually, thus helping us understand every stage of a process.
3. Optimized navigation.  We already know that icons can aid in understanding concepts visually, and they can also be utilized as distinctive elements to bolster the straightforward navigation of a website. For example, icons can make it notably more straightforward to locate and follow specific information on websites. Perhaps your business’s site has four core services. You could list each service with a particular icon; once a visitor clicks on an icon, it will be easier for them to discern which service page they’re navigating to on your site.

How to Install the WP and Divi Icons Plugin

Before you start creating amazing new Divi designs with the extended Divi icons list, you’ll need to purchase the WP and Divi Icons plugin. For this demo, we’re showcasing the premium version of the plugin which ships with over 3400 single color icons and over 500 multicolor icons. What a deal!

Once complete, download and install the plugin on your WordPress website. Remember to click Activate to complete the installation.

To install the plugin, navigate to the Plugins > Add New menu and select the plugin .zip file from your computer.

Once the plugin has successfully been installed and activated, it’ll create a new menu item in the Divi menu. You’ll see a notice at the top of the screen prompting you to enter your license key.

Before you can begin using the plugin, you’ll need to authorize it. To do so, head over to the Divi > WP and Divi Icons menu. Here you’ll be prompted to enter the license key associated with your WP Zone purchase.

If you can’t remember where your license key is, log back into your WP Zone account and navigate to Account Details > Licenses. Here you’ll find your license key.

Once you’ve entered the license key, the plugin will authorize and you’ll automatically be directed to the About & Instructions page.

Exploring the WP and Divi Icons Pro Plugin

With the plugin installed, you’ll see a series of tabs in the main menu. The WP and Divi Icons plugin works directly from within the Divi Builder so there are only a few things to set from within the settings page.

The Performance Tab

First, from the Performance tab, you can select which icon packs you’d like to use on your site. Simply click to select or deselect the icon packs and click the Save button at the bottom of the screen. The WP and Divi Icons Pro plugin is extremely lightweight and robust so you can easily have all of the icon packs set to active and the plugin won’t slow down your site.

The License Key Tab

This is where you’d activate or deactivate your license key for the plugin.

The Addons Tab

If you’d like to purchase any further WP Zone products, you can do so via the Addons tab.

How to Use the WP and Divi Icons Pro Plugin

Now that the WP and Divi Icons Pro plugin has been installed, all you have to do is use the Divi Builder as per normal. There are no complicated setup steps or configurations that you need to do. Simply, open a page, post or project and use any icon-ready Divi module, and a brand collection of icons will be at your fingertips.

A few icon-ready modules include:

• The blurb module
• The button module
• The icon module

To begin using the icons, create a new or edit an existing page or post with the Divi Builder. Next, add any Divi module that includes icons, we’ll use the blurb module.

Once you’ve added a blurb module, toggle the switch on to use an icon.

At first, you’ll see the familiar Divi icons, but as you keep scrolling down you’ll see an extensive collection of new icons to choose from. Scroll through the pages and select the best Divi theme icons for your design. Here’s an example of an eye graphic added as an icon.

You could also use the handy filtering system to filter through the icon packs to find the pack that you like.

Here’s another example of a cute dog used as an icon.

As with the standard Divi icons, the new icons included in the WP and Divi Icons plugin can be custom styled in exactly the same way. When you’ve selected an icon, head over to the Design Tab and style the icon however you like:

• Change the icon color
• Add a background color
• Give your icon rounded corners to make it a circle-shaped icon
• Add a border around the icon
• Change the margin of the icon module to change the space between the icon and surrounding elements
• Change the padding of the icon module to change the space between the icon graphic and the background

The sky is the limit!

How to Use the Multicolor Icons

Included within the WP and Divi Icons plugin are the multicolor icons. This is by far one of the coolest features added to any icon plugin on the market.

With the multicolor icon feature, you can add icons to your design and customize them directly from within the plugin. Forget using complicated design software like PhotoShop or even Canva, and skip using a graphic designer altogether. With WP and Divi Icons Pro, you can create stunning page layouts complete with eye-catching icons in just a few clicks.

All of the icons included in the multicolor icon packs have been crafted by our design team, so you know they’ll really make your web page pop.

Note: The use of multicolor icons is only available in the icon and blurb modules.

Adding a Multicolor Icon

To begin, add a multicolor icon to your page design. You can do this by selecting Multicolor Icon from the Icon Type menu.

This will reveal several icon pack previews. You can click through each one to see each icon pack’s icons in detail.

You can see all of the multicolor icons within the respective packs and make your selection. Here is a cute icon from the NonProfit Icon Pack.

Here is another multicolor icon from the Podcast Icon Pack.

And finally, here’s an example of an icon from the Cleaning Icon Pack.

You can also use the filter system to filter through the multicolor icon packs. Click the Filter button to refine your search.

Styling the Multicolor Icons

Once you’ve chosen an icon, you can style it directly from within the Divi Builder. Head over to the Design tab, open the Image/Icon option and you’ll find color pickers for the primary, secondary and tertiary colors.

Use all of the color pickers to add your custom brand colors.

You can get really creative with your icons by adding a background color, changing the icon background radius from square to circle, adding a border and changing margin and padding values.

Once you’re happy with the aesthetic, you can create layouts using your unique icon design. You can also save the Blurb module to the Divi Library and reuse it in later layouts without having to style each icon module as you go.

A great thing about the WP and Divi Icons Pro plugin is that if your site design calls for multiple different color combinations for the icons, you can easily set this up thanks to the plugin’s versatility.

How to Add Icons to Text Modules

If you’d like to add more icons to your design, the WP and Divi Icons plugin allows icons to be added directly from the text editor console. If you open any Divi module that has the text editor, you’ll see a small pink icon at the end of the console’s options.

First, add a module that has a text component, such as the text module. Within the TinyMCE editor, click the pink icon.

This will open an icon inserter. By default, it displays All Icons. This will show all of the icons you’ve set to include in the plugin setting’s Performance Tab.

If you click on the All Icons drop-down, a menu will display showcasing each of the icon packs. Select one of the icon packs to display all icons included.

Select one of the icons that suit your design, and it’ll enter into the text module.

In this example, I’ve added one of the number icons from the hand-drawn icon pack.

Continuing this design, here are another three text modules all with number icons added to the front of the module. This could be a great element to include in a web design.

From within the icon inserter, you can style and customize the icon you’ve inserted into the text, directly from the plugin.

Here you can:

• Set the icon color either by entering the hex code or using the color picker
• Set the icon size either by entering a pixel value or using the sliding scale
• View the icon name
• Assign a class (should you wish to add extra CSS)

When you’ve finished styling the icon, click OK and it’ll enter into the post.

Ending thoughts

The WP and Divi Icons plugin is extremely easy to use, it requires absolutely no setup or configuration and it works perfectly both with the back-end and front-end builder from the second it is installed. The sky really is the limit here, and with the Divi Theme Builder, you’ll be able to add Divi social icons in the header and footer sections of your site—previously something that could only be done using code!

With this plugin in your Divi development toolkit, you’ll be able to build beautiful websites with a collection of new icons. There are literally thousands of icons at your disposal, your future web layouts will thank you! If you’re ready to start building amazing Divi web designs, purchase the WP and Divi Icons plugin!

We hope that you’re excited to use the WP and Divi Icons and give your Divi web design a unique look and feel. If you’ve already used the WP and Divi Icons, let us know what you think! We’re always looking to create new icon sets so if you have any special requests, feel free to share them below!

If you have any questions or comments please feel free to share them below! We love receiving your feedback! Thanks for reading!