How to Add More Divi Icons to Your Site

How to Add More Divi Icons to Your Site
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.

  • Facebook
Badge Icon Pack
54 Icons
  • Facebook
Sketch Icon Pack
40 Icons
  • Facebook
Elegant Icon Pack
51 Icons
  • Facebook
Outline Icon Pack
50 Icons
  • Facebook
Filled Glyph Icon Pack
54 Icons
  • Facebook
Multicolor Icon Pack
48 Icons
  • Facebook
Hand Drawn Icon Pack
80 Icons
  • Facebook
Lineal Icon Pack
25 Icons
  • Facebook
Universal Icon Pack
100
Use 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 Divi Space 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.
Divi icons
  • Facebook

Imagine using these beautiful icons in your next site design?

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.

WP and Divi Icons
  • Facebook

Click Download Now

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

Install WordPress plugin
  • Facebook

Select the plugin .zip file from your computer and install it

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.

WordPress plugin WP and Divi Icons PRO installed
  • Facebook

Once the plugin is installed, it’ll create a menu item in the Divi menu

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 Divi Space purchase.

Divi Space plugin license key
  • Facebook

Enter your Divi Space membership or product license key to use the plugin

If you can’t remember where your license key is, log back into your Divi Space 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.

WP and Divi Icons Pro plugin about and instructions tab
  • Facebook

Find plugin information and important links in the About & Information tab

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.

WP and Divi Icons Pro plugin performance tab
  • Facebook

Select or deselect icon packs from the Performance tab

The License Key Tab

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

WP and Divi Icons Pro plugin license key tab
  • Facebook

Enter or deactivate your license key from the License Key tab

The Addons Tab

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

WP and Divi Icons Pro plugin addons tab
  • Facebook

Purchase additional Divi Space plugins from 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.

Divi Builder blurb module
  • Facebook

Add a blurb module

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

Use icon in Divi blurb module
  • Facebook

Toggle the Use Icon option on

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.

Divi icons new icons
  • Facebook

Scroll down and you’ll find plenty of new icons inside the module

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

WP and Divi Icons Pro plugin
  • Facebook

Use the filtering system to sort through icon packs

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

Divi icons
  • Facebook

Select one of the new icons

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!

Divi icons design tab
  • Facebook

Style the icon using the Design tab options

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.

WP and Divi Icons Pro Multicolor Icons
  • Facebook

Select the Multicolor Icons option

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

WP and Divi Icons Pro Multicolor Icons
  • Facebook

Here you’ll see a collection of our multicolor icons packs

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.

WP and Divi Icons Pro Multicolor Icons Non Profit Icon Pack
  • Facebook

An example of an icon from our Non Profit Icon Pack

Here is another multicolor icon from the Podcast Icon Pack.

WP and Divi Icons Pro Multicolor Icons Podcast Icon Pack
  • Facebook

An example of an icon from our Podcast Icon Pack

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

WP and Divi Icons Pro Multicolor Icons Cleaning Icon Pack
  • Facebook

An example of an icon from our 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.

WP and Divi Icons Pro plugin
  • Facebook

Use the filter system 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.

WP and Divi Icons pro multicolor icons
  • Facebook

Head to the Design tab

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

WP and Divi Icons pro multicolor icons
  • Facebook

Change the primary, secondary and tertiary colors to match your brand identity

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.

WP and Divi Icons pro multicolor icons
  • Facebook

Style the icon to fit your design

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.

WP and Divi Icons pro multicolor icons
  • Facebook

A three-column layout with the multicolor icons

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.

WP and Divi Icons Pro plugin
  • Facebook

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.

WP and Divi Icons Pro plugin
  • Facebook

Here you’ll see all icons set to display from the 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.

WP and Divi Icons Pro plugin
  • Facebook

Select the icon pack from the dropdown menu

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

WP and Divi Icons Pro plugin
  • Facebook

Select the icon of choice

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

WP and Divi Icons Pro plugin
  • Facebook

You have successfully added an icon to a text module

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.

WP and Divi Icons Pro plugin
  • Facebook

A cute collection of text modules

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

WP and Divi Icons Pro plugin
  • Facebook

Use the icon inserter to style the icon

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.

WP and Divi Icons Pro plugin
  • Facebook

The icon will be inserted into the text module

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!