How do I change the color of the icons?

SVGs

The easiest way to change the color of an icon is to use an SVG. SVGs are made up of simple data that many text editors already installed on your computer can open and save them. You should use RGB Hex colors, which look like: #ff0f6f. You can convert a Pantone color to Hex or CMYK color to Hex. If you have a logo or other branding image and you're not sure what colors are used, you can upload the image to this tool to find out. Here are a few ways to change the color:

Text Editor

Start by opening an SVG file using one of the software programs listed further below. Then, find the hex color reference(s) in the file and replace them with the color you want. Hex colors begin with a “#” and are followed by six characters. Once you've updated the hex colors in the SVG, save the changes. To make the process faster, text editors usually have Find and Replace or similar command under the Edit menu.
Change colors by replacing hex colors with value of new color and saving file.
Software Programs:
  • Notepad (Windows)
  • TextEdit (Mac)
You can also open SVGs with a code editor if you happen to have one installed or have experience coding. Some good options for free code editors are Atom and Sublime.

WiX

If you intend to or already use WiX to build and host your website, they have a very handy feature for SVGs. You can upload SVG in the set, place the icon into your page layout, and then use the edit controls to pick your desired color. For more details, read their support article about colorizing one-color icons.

Online Vector Editors

There are free online editors that will let you load SVGs, change colors using the built-in tools, and then save them out again. Our recommendation is Gravit Designer. Be aware that sometimes online editors may not open SVGs correctly. If the icon doesn’t look correct when using one of them, try one of the other options.
Software programs:

Vector Editing Programs

There are programs you can download and install that will let you open SVGs, change colors using the built-in tools, and then save them out again. If you’re looking to do some occasional, lighter editing we recommend Affinity Design as it has a lower, one time fee while Illustrator is paid monthly. Both offer free trials.
Software programs:
For more in-depth info about SVGs and options with them, you can check out Lifewire’s article:

PNGs

Changing the color of a PNG requires more work than a vector format like SVG. But it can be done fairly quickly with a few extra steps since the PNGs have a transparent background. The following steps are for Photoshop but the steps would be similar if you use other a different photo editor.
1: Open the PNG icon file with one of the following editors or similar ones.
  • Adobe Photoshop
  • Affinity Photo
2: Find the Layers panel and double click on the Layer with the icon. A dialog window will open where you can apply a Layer Style.
3: Select the Color Overlay style. In the options area shown to the right, make sure the Blend mode is set to Normal and Opacity is set to 100%. Click the color swatch to pick the color you want to apply. You should now see the icon shown in your desired color. When you’re good with the change, click “Ok” to close the dialog.
4: Finally, you’ll save the changes to the icon. Go to the File menu and choose “Save” or “Save As”. We recommend using “Save As” so you keep the original file and will save a new file.

PDFs

PDFs are not as easy to change as other file types, but you can open them and change their color using specific software programs. We recommend using EPS and AI file types if you want to modify or make new icons.

EPS and AI

You can change the color of a single icon or many at a time by opening up one of the three files. For editing or changing the color of icons using an EPS or AI file and saving them out into individual icons, you’ll want to be somewhat familiar with how vector editing programs work.
Software programs:
Here are a few related Illustrator tutorials that you may find helpful:
Last modified 1yr ago