There are two ways of recoloring raster icons:
  1. A complicated way: 9 steps in Photoshop. This article describes it in detail.
  2. A simple way: one click in Icons8 Web App. Check out the Icons8 Must Try Features to learn more.

How to recolor an icon in photoshop

So, you downloaded a free icon pack for Windows 8 or iOS9, fine. Let’s make them shine in new splendor.

Getting Adobe Photoshop

You’ll need Photoshop (why to bother with Photoshop? See bottom of the message). If you don’t have one, normal license is $20 a month, but you could also:
  • Download a fully functional 30 day trial. When expired, you could either register it or install it on some other computer.
  • Buy Photoshop Elements for $80. It has all the required functionality and much more.

Opening the file

That’s right, dear readers. There are software developers among you, some PhDs and MBAs, but still I’m going to teach you how to open a file 🙂
So, choose an icon and either drag’n’drop it on Photoshop icon or use Cmd+O (Ctrl+O on Windows) for Open dialog. Hint: don’t bother about a thing that Adobe is pushing to you called Adobe Bridge. Choose the desired size, for example 128×128 px:
opening a file in photoshop

Coloring the icon

1. Make sure the color mode is RGB

If it’s grayscale, icon would be in the shades of gray no matter what color you choose. In Menu, click Image->Mode-> Color RGB.

2. Make sure you have the Layers palette on screen

It looks like this:
layers palette
Usually it’s in bottom right part of the screen. If it’s not, use Window->Layers to open it.

3. Click Fx icon for effects

effects icon

4. From Effects menu, choose Color overlay

The dialog like this will open:
color overlay dialog

5. Click the color box 

color box of color overlay dialog

6. In the color dialog, choose the desired color

color dialog in photoshop

7. Press OK in all dialog boxes

Enjoy  the result. If satisfied, save PNG file with File->Save for Web. You’ll see the dialog like this:
save for web dialog

8. Make sure file preset is PNG-24

png24preset

9. Click Save

Done. Now you could recolor any icon. Great!

Why Photoshop?

You may ask yourself why to bother doing it in Photoshop if there are easier tools. There is a number of reasons, here are just two:
  • You’ll never have any comparability issues. Same way as we did, you could open PSD, SVG, AI, EPS, whatever, and it would be working fine. For comparison, look at what I’ve got in one of the “simple” tools. As you can see, result is unpredictable depending on the source format, from a perfect bug to the somewhat mutilated body of it:
    Icomoon
  • Another reason is you are learning a powerful tool. If you ever want to color it with a gradient, or with a pattern, or destroy in some way, you could do it with an extra movement or two. Isn’t it great?