How to recolor a PNG icon in Photoshop article cover
There are three ways to recolor raster icons. A complicated way — 9 steps in Photoshop. This article describes it in detail.
A simple way — one click in the Icons8 web app. Go to the Icons8 website, choose any icon you like, click on it, and change the color in the browser.
An even simpler way — get SVG icons instead of PNGs. Unlike raster PNG icons, vector SVG icons can be scaled to infinity with no quality loss. This makes them perfect for any and every type of graphic design project. Plus, SVGs are fully editable, and you can recolor them entirely or element by element using apps like Figma, Lunacy, and others.
Now let’s see what you can do if you already have a pack of icons you want to recolor. In this case, Photoshop is the way to go.
You’ll need Photoshop (why bother with Photoshop? Keep reading to see why it is your best bet). If you don’t have one, an individual license starts at $22/month (when billed annually), but you could also:
The steps it takes to recolor a PNG icon in Photoshop are fairly easy:
There are multiple ways to open a file in Photoshop. You can click Open or press Ctrl+O (Cmd+O) to select a file from your device. You can also drag-and-drop it onto the canvas or the Home screen. Finally, you can drag and drop the image right onto the Photoshop icon if you haven’t opened the app yet.
If it’s set to grayscale, the icon is going to be completely gray no matter what color you choose. To change the color mode, click Image → Mode → RGB Color.
Usually, your layers are in the bottom right corner of the screen. Here is where to find them:
In case they’re not there, click Window → Layers to make them visible.
It’s right below the layers.
A dialog box like this will open:
Want to know how to pick the perfect color for your icons and create a consistent, visually appealing palette? Read our ultimate guide on color palettes in web design.
Enjoy the result! If it looks like what you wanted, save your new file.
Save your updated PNG file via File → Export → Save for Web. Make sure you set the color preset to PNG-24. Unlike PNG-8 that only handles 256 colors, PNG-24 can store 16 million colors.
Once it’s all done, click Save, et voilà. Now you know how to recolor any icon!
You may ask yourself why even bother doing it in Photoshop if there are easier tools. There are a number of reasons, here are just two:
Sooner or later a recolored icon becomes a sold icon. But what if people try to steal from you? Check out What to Do If Someone Steals From You 7 Times a Day
Get to know about one of the most spectacular Icons8 fails in How We Lost 47% of Our Users After a Redesign.
About the author
Mia Donovan. Marketing designer who weaponizes visuals to make people actually care about products. Archives competitor ads like rare artifacts, has lost friends over kerning disagreements, and analyzes color psychology with criminal profiler intensity.
Your eye peaks at 555nm wavelength. That's literally green. So when you can't stop staring…
AI coding tools got smart about everything except icons. Still hunting through browser tabs like…
Your design workflow just got stupid fast. Skip the creative block spiral and generate exactly…
Small design touches that create loyal users and word-of-mouth marketing—secrets that will make people love…
How Distinctive Games used AI generated faces to nail character design for Rugby Nations without…
From insurance chaos to client nightmares—the freelance design world hits different when you're flying solo.…
This website uses cookies.