Our icons have always been black. They're part of what makes our content simple and easy to use. Great content can be created with a few simple steps. If you want to change the color of our icons to fit your design, they're easily editable in your graphic design software of choice. However, if you don't have access to applications like Illustrator or Sketch, our content might not be quite as easy to edit. That's why we're thankful that Tony Vincent, a dedicated Noun Project member and former teacher behind the site Learning in Hand, has created a useful tutorial for how to color icons from our site the easy way. His tutorial goes through editing the color of icons in Method Draw, Powerpoint, and Google Slides.
Here's Learning in Hand's post, Colorful Communication: How to Recolor Icons from The Noun Project. We've made a few edits since we've made updates to the site since the article was first written.
The Noun Project has a huge collection of symbols and icons. You can find an image to illustrate just about any idea. You have permission to use The Noun Project's images in your own project because they are covered under a Creative Commons Attribution or a Public Domain license. Downloading from The Noun Project does require a free account.
If you’d rather omit the “Created by” text that is attached to an icon, you can choose to pay $1.99 to purchase that one icon or buy a subscription that allows unlimited downloads without attribution. A Noun Project subscription is $9.99 a month or $99.90 a year. Profits are shared with the creators every time you download an icon. I subscribe to The Noun Project and use it all the time. Maybe you’ve noticed the icons and symbols I use in my videos (like this one) and in my blog posts (like this one).
All of The Noun Project’s icons are only available to download in black. You can download and then change the color yourself using graphic design software. The Noun Project suggests Illustrator or Inkscape. You might not have access to Illustrator, and Inkscape, while free, is cumbersome to install and use. Instead, I’d like to show you how I recolor Noun Project icons with Method Draw. It’s a free web app and requires no installation and no log in.
Here's the shorter version of the directions:
Here's the longer version of the directions:
First, find and download an icon from Noun Project. When you hover over the Download button, pick the SVG file type. Scalable Vector Graphics are completely customizable. You can make them as big or small as you want and change the colors. Then either choose to Purchase Royalty-Free or get it Free & Give Credit. If you have a subscription, you won’t see this option.
Go to editor.method.ac to open Method Draw in your Mac, PC, Linux, or Chromebook web browser. Click Method Draw's File menu and choose Open SVG. Choose the SVG file you just downloaded.
The default size for the canvas is quite small. Make it larger by clicking Sizes and choosing a larger size. I like 1024 x 768. You might have to scroll to the top left of the canvas to see your image. Since SVG files are made of multiple shapes, select all by holding down Control (PC and Chromebook) or Command (Mac) and A on your keyboard. Then hold down Control or Command and G on your keyboard to group the entire image together. Hold down Shiftand drag the blue box at the bottom right corner of the image to resize the image to fill the canvas.
With the image selected, click the color tool. Choose a color from the palette or enter a Hex color code. Make sure the Alpha (the value labeled as A) is set for 100%. Click OK.
Click Method Draw's File menu and choose Export as PNG. Portable Network Graphics aren’t nearly as customizable as SVGs, however, PNGs can be opened and imported into just about any software or app that supports images. SVGs are rarely supported in software and apps.
The PNG image is displayed in a new window. Right click the image and save it. Now you use your freshly colored imagein your projects!
If you’re using PowerPoint, you can download a PNG from The Noun Project and insert it into a slide. Then choose Format > Picture > Recolor image. It might take some adjusting of Saturation and Temperature to achieve your desired color.
If you’re using other software, you might have some luck changing black icons to gray and white by adjusting contrast and exposure settings. For example, in Google Slides, right click an imported PNG and choose Image Options. Move the Brightness and Contrast sliders to achieve a white or gray color.