Badges / Design / eLearning / Instructional Design / Marketing / Web Design Tools

The Noun Project – Free Icons for Badges, Web, and other Media!

With all this talk of Mozilla Open Badges, I thought it necessary to share a neat resource I found for free icon images.  The Noun Project is a really great website for obtaining vector (scalable) images for use in all sorts of publications and media, including creating your own badges.

Here’s a sneak peak at the kind of icon images you can grab and use for free. Don’t forget to give attribution to The Noun Project if you use them!

The Noun Project Homepage Screenshot

The Noun Project was originally a Kickstarter project that started back in 2010 that met it’s $1,500 funding goal, then proceeded gain financial backing of ten times the original goal. Now that’s a successful pet project.  The project’s founder, Edward Boatman, has a background in architecture and design.  The website alone is a work of art, not to mention the awesomeness that is the collection of icons.

The website for the Noun Project is simple and elegant, black and white, and allows for visitors to easily download icons.  All icons downloaded from the Noun Project are licensed under a Creative Commons Attribution 3.0 Unported License, allowing for use free use (yes, even commercial) so long as you credit The Noun Project. When you click on a “noun” (icon), you are brought to a page with information about the icon.  It looks something like this:

Noun Project Icon Details Page

When you find an icon you want to use, click the download button and a .zip file will be downloaded to your computer.  Inside the .zip file is a .svg file, which is a Scalable Vector Graphics file.  This type of file is common in the design world and will need to be opened with a program that works with vector images like Adobe Illustrator or the open-source program Inkscape, which is free.  There is a great little Introductory Guide to Inkscape that will get you started using the program.

So what do I do with these icons?

Lots of things!  Using nouns/icons for signage and symbols (otherwise known as Pictography) is a highly-effective form of communication, transcending different languages and cultures.  You can use the icons from The Noun Project to advertise, market, or communicate just about anything.  Trying to come up with a simple logo for your club or group?  Grab an icon that symbolizes the message of your team.  Want a quick way to show students which storage bin to place the recyclables into?  Use a simple recycling icon.

There are many possibilities, but one of special interest to me is that of badges.  I have plans to mock up a few badges that may be used in a course at the University of Hawaii, which I will likely look to The Noun Project for.  These icons from The Noun Project can be used to identify specific achievements or skills learned in a course or program.  For an example of Noun Project icons that have been used for badges, take a look at this LearningTimes diagram that uses some.  (Also note that they credit The Noun Project properly!)

Badgestack System Diagram

Icons are powerful

Whether or not you jump in and begin using icons from The Noun Project, it’s a resource that is good to know about.  With all of the icons open for use, this is a great way to begin mocking up a design you have in your head.  As with many projects, getting something down on paper (or screen!) is the first step to begin developing an idea.  If nothing less, check out The Noun Project to find some entertaining logos that you may have seen on t-shirts or buttons around town.  If you really like one of the icons, you can have The Noun Project screen-printed shirt with it on there.  And you’ll be supporting an open resource, too!

The Noun Project T-shirt with Bicycle

2 thoughts on “The Noun Project – Free Icons for Badges, Web, and other Media!

  1. Pingback: Open Badges: Want to Make Your Own Badges by Hand? Here’s How. « Billy Meinke's Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s