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

We recently announced the launch of our brand new child theme: Divi Nonprofit. Our most ambitious child theme to date, Divi Nonprofit is jam-packed with a number of incredible features that’ll help any nonprofit organization set up a website in rapid time.

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

After you’ve downloaded the Divi Nonprofit child theme files, you’ll see a .zip file in your Downloads folder. Double click on this file and it’ll unzip, displaying both the child theme files and a folder called ‘Divi Nonprofit Icons’.

Divi Nonprofit Child Theme File
  • Google+
  • Facebook
  • Twitter

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).

Divi Nonprofit Child Theme Icon Files
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Files Photoshop
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Files Duplicate
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Delete Files
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Layer Elements
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Files Color Selection
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Files Color Selection Panel
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Files Color Paint Bucket Tool
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Color Change
  • Google+
  • Facebook
  • Twitter

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

Divi Nonprofit Child Theme Icon Change Background
  • Google+
  • Facebook
  • Twitter

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.

Divi Nonprofit Child Theme Icon Layer Quick Select
  • Google+
  • Facebook
  • Twitter

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!

We want to hear from you!

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!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.

Previous post
Next post

3 Comments

  1. Jeff

    I’m using Affinity Designer, so the process is fairly similar. I did notice that numbers 1-4 and 10 without the circle were missing the outline on them. Otherwise it was pretty good.

    One thing I wish was included is the newspaper that was used.

    Reply
  2. Jeff

    Hi,
    Sorry but there are no PSD files included in the download from Aspen Grove. Where can I get this?

    Thanks,
    Jeff

    Reply
    • Cory Jenkins

      hi Jeff, Aspen Grove or Divi Space Members can grab the file from the Members section under “Layout Packs” or by visiting the Divi Nonprofit product while logged in.

Submit a Comment

Your email address will not be published. Required fields are marked *