in Icon design

4 easy ways to recolor icons

What is the easiest way to recolor an icon? Adding color to an icon is actually really easy, but you still need to know how. So we wrote this guide that shows you how to recolor icons using Photoshop, Sketch, PowerPoint or Preview.

Updated May, 2016: Google Docs has been added.

Adobe Photoshop (Windows and Mac)

New fancy graphic tools is popping up all the time. But the good ol’, almost 25 years, Adobe Photoshop is still the golden standard. And chances are that even though you might have started using new tools like Pixelmator or Sketch, you still have a copy of Photoshop installed and use it quite often.

Here is how to easily recolor an icon using Adobe Photoshop

Step 1 – Find the icon you want on Iconfinder, and select the size you need. Choose the PNG format, which is natively supported in Photoshop.

Screen_Shot_2014-10-06_at_15_46_27-2

Step 2 – Open the Blending Options… panel by right clicking on the layer and clicking on Blending Options….

Screen Shot 2014-10-06 at 16.38.04-2

Step 3 – Click on Color Overlay and click on the color swatch to pick your new color.

Screen Shot 2014-10-06 at 16.27.53-3

That’s it! Photoshop can be quite complex, but luckily recoloring an icon is very easy.

Pros:

Very easy to recolor icons

Available for both Windows and Mac

Cons:

Photoshop is an expensive piece of software, compared to the alternatives.

SVG vector format is not natively supported.

Sketch (Mac only)

While Photoshop is the tried and true graphics workhorse, Sketch by Bohemian Coding is the young and fresh newcomer. Quickly gaining traction among professional designers of both websites and apps, Sketch has proven its ability to be a first class member of the designers toolbox.

Here is how to recolor icons with Sketch

Step 1 – Find the icon you want on Iconfinder. Since Sketch is built as a vector tool and natively supports the SVG format, you don’t have to worry about size. Just download the icon in SVG.

Screen_Shot_2014-10-06_at_15_46_27

Step 2 – If the icon is made up of multiple grouped layers, start by ungrouping until you have all layers selected.

Screen Shot 2014-10-06 at 16.19.27

Step 3 – With all layers selected use the Fills panel to open your color picker and pick your new fill color.

Screen Shot 2014-10-06 at 16.19.47

Pros

Sketch supports the vector based SVG format natively.

At $79 Sketch is cheap compared to Adobe Photoshop.

Cons

Unfortunately Sketch is Mac only.

Powerpoint (Windows and Mac)

Using icons in presentations have become a very popular alternative to stock images. But sometimes you will be using a theme that doesn’t match the default color of the icons, you want to use. While you you can of course use one of the other programs from this post, to change recolor your icons, you can in fact also do it directly in Microsoft PowerPoint.

Here is how you adjust the color of an icon using Microsoft PowerPoint

Step 1 – Find the icon you want on Iconfinder, and select the size you need. Choose the PNG format, which is natively supported in PowerPoint.

Screen Shot 2014-10-06 at 15.46.27

Step 2 – After inserting your icon, select the icon and go to Format Picture and click on Recolor.

Screen Shot 2014-10-06 at 15.04.45

Step 3 – Pick your color and you’re done.

Screen Shot 2014-10-06 at 15.07.42

Pros

You can recolor icons without needing to use a dedicated image editor

Cons

Coloring is done relative to the original color, making it sometimes hard to get a specific color.

For a Windows version of this guide, check out the in-depth post on how to use icons in your PowerPoint presentations.

Preview (Mac only)

In case you mainly need to adjust the tone of color on you icon, you actually do it for free. Using Preview that comes with Mac OS X, you can adjust the color levels and easily make a black icon white. So if this is all you need, Preview will do just fine.

Here is how to recolor an icon using Preview

Step 1

Find the icon you want on Iconfinder, and select the size you need. Choose the PNG format, which is natively supported in Preview.

Screen Shot 2014-10-06 at 15.46.27

Step 2 – Open the Adjust color…” pallette from the Tools menu.

Screen Shot 2014-10-06 at 16.10.35

Step 3 – Adjust the levels by moving the handles of the highs and the lows to the opposite sides, effectively inverting the colors.

Screen Shot 2014-10-06 at 16.02.16

Pros

Preview is free and comes built in to Mac OS X

Cons

Mac only

Preview allows you to adjust colors, but not pick one specific color.

Google Docs

With a growing magnitude of collaboration, the use of tools that allow a number of people work with the same material at the same time is growing, too. One of the most popular tools to collaborate on the written material is, obviously, Google Docs.

If you need some very basic icon color adjustments while working in Docs, there is no need to use external programs, as it can easily be done there.

Here is how you adjust the color of an icon using Google Docs.

Step 1 – Find the icon you want on Iconfinder and select the size you need. Download the icon in the PNG format.

chemistry1

Step 2 – Drag and drop the icon to Google Docs document, mark it and click ‘Image options’. The menu on the right hand side appears.

chemistry2

Step 3 – Pick the prefered color from re-color options.

chemistry3

Step 4 – You can also adjust the transparency, brightness and contrast of the color. That’s it!

chemistry4

Pros

You can recolor icons without needing to use a dedicated image editor.

Cons

You cannot set an exact color, so it’s a matter of playing a bit with the brightness and contrast handles to extract a color that is closest to what you are aiming for.

So these are our tips and tricks for recoloring icons. Feel free to leave a comment, if you have any questions or remarks to this guide.

Write a Comment

Comment

25 Comments

  1. very usefull tutorial! sharing it with IconFinder customers every time they are asking about color options 🙂 thanks, Jeff!! 🙂

  2. Searching for some comfortable ways to recolor icons, glad found this article guide. Didn’t know this before that icon color can be changed in powerpoint, that’s really nice.

  3. Thanks, Jess! For monochromatic icons I also find the following service useful: http://manytools.org/image/colorize-filter/
    Varying intensities of the source color (e.g. shades of grey) are automatically translated into the corresponding intensities of the target color. If you use it in the Chrome browser, you can specify the target color as a number.

  4. Probably best to check the guidelines for social media, all of them clearly state that the logos should not be altered in any way…including changing the color of the logo. I’ve gone back and forth and checked out major sites that surely would be in deep trouble for using altered color but checked the guidelines and it does seem to be trademark infringement (grr).