Along with:

• An already set up and customized e-commerce shop, ready and waiting for products to be added,
• Events listings to integrate a multi-display events calendar, and also sell tickets to events,
• An already integrated donation feature using the Give plugin to easily accept donations from site visitors.
• A custom project template to showcase current and upcoming projects, whatever they may be, and
• A custom portfolio template to display additional content…

Divi Nonprofit also ships with over 100 hand drawn custom crafted icons that you can use in any creative project of your choice.

In the Divi Nonprofit demo and child theme demo imagery, the free icons have been designed to match the child theme design and brand identity.

In the following blog post, I’ll show you how you can edit the colors of the free icons to match your or your client’s web design.

As the free icons were created in Photoshop, you’ll need a copy of the Photoshop software to edit the files. If you don’t already have Photoshop on your device, you could purchase a subscription via Adobe Creative Cloud.

How to Edit the Free Icons in the Divi Nonprofit Child Theme

Within the ‘Divi Nonprofit Icons’ folder, you’ll see two .psd files (Photoshop files) titled:

• DNP-number-icons, and
• DNP-icons (all of the other icons including social media icons).

For this demonstration, I’ll edit the number icons files. Double click on the DNP-number-icons.psd file and it’ll open in Photoshop.

Once the document is opened, you’ll see each of the numbers (0 – 10) moving from left to right. You’ll notice that there are design variations (black and white, with color, without circle etc.), moving vertically down. Each variation is labeled as such, using number 7 as an example:

• 7: standard black and white icon with transparent background
• 7 white: black and white icon with white background  
• 7 accent: color icon with transparent background
• 7 accent white: color icon with white background
• 7 without circle: standard black and white icon with no circle around it

For this tutorial, I’m going to focus on the number 7 and it’s variations. To begin, I start with duplicating the file (to avoid editing the original) by clicking on Image > Duplicate.

I assign the copied file an original name (LISA EDITS) and continue working in the duplicated file. As I’m just going to be focusing on the ‘7’ number icon set for this tutorial, I’m going to delete all of the other numbers.

To do this, I  navigate to Window and select Layers so that I can see all of the layer groups included in the artwork. I delete all of the numbers that are not the set I’m focusing on (7). Note, all of the zeros (0) are clustered at the bottom.

Finally, after deleting all of the unnecessary numbers, I’m left with a row of sevens.

Keeping the Layer panel open, click on the drop-down arrow next to the eye icon to reveal all of the elements that make up the icon. They are:

• The outside circle (named circle),
• The background (named bg), and
• The number outline (named, in this case, 7).

Each of the icon variations are broken down like this. The icons with white backgrounds include a layer named ‘white’ for the background and the color icons include a layer called ‘accent’ for the color layer.

At this point, I’ll show you how to do the following:

1. Change the color accent of the color icon, and
2. Change the background color of the icons with a background.

For the tutorial, I’d like to change the accent color – red – of the 7’s and change them to the Divi Space orange (hex code – #ff8500).

To do this, select the icon, the group called ‘7 accent’. Then, click on the drop-down arrow and you’ll be met with the three elements: the number outline, the color accent and the circle outline.

Next, navigate to the color selection panel at the bottom left-hand side of your workspace to set the foreground color to the color of your choice.

Double click on the first top-most square and the color selection panel will pop up. I already know the hex code for the color I’d like, so I simply enter it into the bottom section next to the # sign and click okay. Once you’ve selected the correct color, the foreground color will update to match the color you’ve just entered.

Now, return to the layers of the ‘7 accent’ icon and click on the layer called ‘accent’. Select the Paint Bucket Tool by clicking on the paint bucket icon in the toolbar or by pressing the G key on the keyboard. Note, the Paint Bucket Tool also shares the same tool selection space with the Gradient Tool and the 3D Material Drop Tool.

With the correct color and the Paint Bucket Tool selected, click on the layer called ‘accent’ and move your mouse over the fill of the number outline. Then, click on the fill section and the color accent will change to match your selection.

If you’d like to change the background color of one of the circles, follow the same process as above:

1. Select the correct color,
2. Select the Paint Bucket Tool,
3. Select the correct element (in this example, the layer titled ‘7 accent white’) and click on the drop-down arrow to reveal each individual layers,
4. Select the correct layer (in this example, the element titled ‘white’),
5. Hover over and click on the actual element and the color will change

The exact same process applies to the icons in the DNP-icons.psd file, just remember to duplicate the file so that you’re not editing the original document.

TIP: If you see an icon you want to edit but sifting through the layers list is time-consuming, you can quickly select the layer group you’re looking to edit by simply right clicking on the icon of choice while holding the CMD key on a Mac and the related layer group will appear for selection.

Now that you know exactly how to change the icon colors in the Divi Nonprofit free icon pack, you can start creating incredible designs for your next Divi project!

Do you use icons in your web designs? What do you think of the free hand drawn custom illustrated icons in Dii Nonprofit? Please feel free to leave any comments or questions below, we love receiving your feedback!

Thanks for reading!