6 easy ways to recolor icons
What is the easiest way to recolor an icon? Changing the color of 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 our Icon Editor, Photoshop, PowerPoint, Google Slides, Figma, or Sketch.
Updated in June 2021. Now, this post lists 6 easy ways to recolor icons!
You can jump into a specific section using these links:
Iconfinder’s Icon Editor (online)
If you want to recolor an icon from Iconfinder, there’s no faster and simpler way than using our online Icon Editor. It is free to use for everyone and works with all free icons, premium icons that you have purchased, or, if you are a Pro subscriber, with any of the 5 million+ icons on the site, even if you haven’t downloaded them yet.
Step 1 — Find the icon you want on Iconfinder. You can jump straight onto the editor from the icon page by clicking the “Open in icon editor” button.
Note, that if it’s a premium icon and you are not a Pro subscriber, you need to first purchase the icon to be able to open it in the editor.
Step 2 — The icon opens in the editor window. Select the element you want to recolor by simply clicking on it.
Tip: If you want to change the color of the whole icon, you can quickly select all elements with a “Command + A” (for Mac) or “Ctrl + A” (for Windows) keyboard shortcut.
Step 3 — Click on the Color Picker tool in the left-hand panel.
Step 4— In the Color Picker menu, pick a color or enter your own in HSV, RGB, or HEX format and click “OK”.
Step 5— That’s it for the recoloring! Now click the “Download icon” button to save the icon in either SVG (vector format) or PNG.
Pros:
- It’s free
- Super easy and fast to recolor icons
- Web-based, so it’s not limited to any operating system
- Supports the vector-based SVG format
- Saves your “Recently used” colors
Cons:
- Might not render some SVG’s correctly
Adobe Photoshop (Windows and Mac)
New fancy graphic tools are popping up all the time. But the good ol’, almost 30 years, Adobe Photoshop is still the golden standard. And chances are that even though you might have started using newer 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. If you are going to use the icon in presentations, we recommend the largest size, 512 x 512px. 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.
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
PowerPoint (Windows and Mac)
Using icons in presentations has become a popular alternative to stock images. But sometimes you will be using a theme that doesn’t match the default color of the icons that you want to use. While you can, of course, use one of the other programs from this post to recolor your icons, you can 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. We recommend going for the largest size, 512 x 512px. Choose the PNG format, which is natively supported in PowerPoint.
Step 2 — After inserting your icon, select the icon and go to Picture format and click on Colour.
Step 3 — Pick your color, and you’re done.
Pros
- You can recolor icons without needing to use a dedicated image editor
- Web-based, so it’s not limited to any operating system
Cons
- Coloring is done relative to the original color, making it hard to get a specific color
- Recoloring multiple times makes the icon lose its quality
For a Windows version of this guide, check out the in-depth post on How to use icons in your PowerPoint presentations.
Google Slides
Icons are a great way to step up your presentation game. One of the most popular online tools to create presentations is, obviously, Google Slides.
If you need some very basic icon color adjustments while working in Slides, there is no need to use external programs, as it can quickly be done there.
Here is how you adjust the color of an icon using Google Slides.
Step 1 — Find the icon you want on Iconfinder and select the size you need. Download the icon in PNG format.
Step 2 — Drag and drop the icon to Google Slides document, mark it, and click ‘Format and ‘Format options’. The menu on the right-hand side appears.
Step 3 — Pick the preferred color from the recolor options.
Step 4 — You can also adjust the transparency, brightness, and contrast of the color. That’s it!
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 to get to a color that is closest to what you are aiming for
Figma (online)
The popularity of the online design collaboration tool Figma has exploded. We at Iconfinder are also among the fans. Recoloring icons with Figma is very straightforward.
Step 1 — Find the icon you want on Iconfinder and download it in SVG format.
Step 2— Drag&drop the icon file into a Figma canvas. Or open it via the “Place image” option.
Step 2 — Select the element you want to recolor in the Layers panel on the left, or double click on the element directly on the icon.
Step 3— Change the color in the Fill section in the properties panel. You can set the color value in HEX, RGB, CSS, HSL, and HSB.
Step 4 — Download the icon in the format suitable for you. You can choose SVG, JPG, PNG, or PDF in the Export section of the panel.
Pros
- Figma is free for a basic use
- Web-based, so it’s not limited to any operating system
- Changing the icon color is easy
- Supports the vector-based SVG format
Cons
- It’s pretty straightforward, but importing, recoloring, and exporting takes a bit more time than, e.g., doing so with the Iconfinder’s native editor
Sketch (Mac only)
While Photoshop is the tried and true graphics workhorse, Sketch is a solid alternative. It has quickly gained traction among professional designers of both websites and apps and 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 the 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.
Pros
- Sketch supports the vector-based SVG format natively
- At $9/mo, Sketch is cheap compared to Adobe Photoshop
Cons
- Unfortunately, Sketch is Mac only
So these are our tips and tricks for recoloring icons using a bunch of different tools. Feel free to leave a comment if you have any questions or remarks on this guide.
Looking for high-quality icons? Use this coupon code to get 30% off the first month of Iconfinder Pro subscription.
