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.
Step 2 - Open the Blending Options… panel by right clicking on the layer and clicking on Blending Options….
Step 3 - Click on Color Overlay and click on the color swatch to pick your new color.
That’s it! Photoshop can be quite complex, but luckily recoloring an icon is very easy.
Very easy to recolor icons
Available for both Windows and Mac
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.
Step 2 – If the icon is made up of multiple grouped layers, start by ungrouping until you have all layers selected.
Step 3 – With all layers selected use the Fills panel to open your color picker and pick your new fill color.
Sketch supports the vector based SVG format natively.
At $79 Sketch is cheap compared to Adobe Photoshop.
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.
Step 2 - After inserting your icon, select the icon and go to Format Picture and click on Recolor.
Step 3 - Pick your color and you’re done.
You can recolor icons without needing to use a dedicated image editor
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
Find the icon you want on Iconfinder, and select the size you need. Choose the PNG format, which is natively supported in Preview.
Step 2 - Open the Adjust color…” pallette from the Tools menu.
Step 3 - Adjust the levels by moving the handles of the highs and the lows to the opposite sides, effectively inverting the colors.
Preview is free and comes built in to Mac OS X
Preview allows you to adjust colors, but not pick one specific color.
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.
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.
Step 3 – Pick the prefered color from re-color options.
Step 4 – You can also adjust the transparency, brightness and contrast of the color. That’s it!
You can recolor icons without needing to use a dedicated image editor.
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.