I am available for freelance work - HIRE ME

Icons and the Web – Part 2: Collecting Icons

posted by Matt Ward on Apr 6, 2010.

This is the second article in a six part series, in which we will discuss various aspects of using icons for the web! This particular article offers some tips and resources for finding icon sets and building your own library!

This is the second article in a series addressing the use of icons in web design. In the first article, we looked at what an icon is and why it can be an important element web design. Of course, that’s all well and good, but before you can start building icons into your designs, first you need to actually get your hands on some icons. In this article, we will discuss the process of locating and gathering icons for your own library.

Icons and the Web – Part 2: Collecting Icons

Icons and the Web – Part 2: Collecting Icons

Really, icon design is an entire creative branch onto itself, one tends to cross over into the realm of illustration (which is an entirely separate topic to be addressed at a different time). There are certainly many web designers out there who are also capable of creating their own icons, but there are also many more who just don’t have the time, interest or skill to invest in this creative process. Fortunately, there are numerous steps and resources that you can make use of for finding awesome and usable icons.

What follows are some tips that I’ve picked up in building an icon library throughout the course of my own design work.

Keep Your Eyes Peeled

There are hundreds of blogs and other sites giving away different freebie icons sets every single day. Frequently, blog and magazine owners will also publish lists that collect great new icons releases, or of icons of a particular type or design. More often than not, these icons seem to be of the social media type (which, though popular, may be getting just a wee bit tedious), but there are also some other types of really, really great icon sets being released.

So, I suggest keeping a careful eye on your RSS reader, and being willing to spring into download mode at a moment’s notice. When you see an awesome icon set, or something that you think you will be able to make use of at some point in the future, just go ahead and download it to your library for use at a later date. If you’re really lucky, you might even find a new set that is absolutely perfect for your current project!

Also, most sets tend to come in a compressed archive of some sort. Check the contents and make sure that there is a readme file or other documentation outlining credit and licensing information. If there’s not, I would recommend creating a quick text file yourself, and filling it with any pertinent information, such as the artist, the site you downloaded the set from and the license. That way, if you come back to the set months later, it’s quick and easy to find that information.

Bigger is Often Better

Typically, I have also found larger sets to be vastly more useful than smaller sets, simply on the basis of variety. Unless you have specifically commissioned an icon set, the chances of finding a small set with all of the exact icons that you are looking for or feel that you need is probably pretty rare. Since larger sets generally offer a wider variety, they are often also much more useful.

IconEden's Bright set is really extensive, especially for a free set

IconEden's Bright set is really extensive, especially for a free set

However, this is not always necessarily the case. Some icons sets can be quite large in terms of the number of icons that they present, but very narrow in the variety of those icons. For instance, a set may contain dozens of glassy button icons, with the same shapes repeated over and over, just in different colours. Or, you may have only a few core icons which are simply used together in other combinations to create more “unique” icons.

Now don’t get me wrong. Neither of these are necessarily bad things when it comes to icon sets. They are simply techniques by which a larger icon set can actually have a much smaller variety (and thus a more minimal potential usefulness) than it’s size might lead you to believe.

Nor am I saying that you should avoid smaller packs, many of which can be a real goldmine! I have simply found myself using the larger packs in my library on a much more frequent basis.

Establish An Icon Map

When starting out on a new project, it can be both helpful and beneficial to begin developing what I like to call an icon map. Basically, it’s a matter of examining the specific needs of the particular site that you are working and making a list of the areas in which you are going to need icons. This list then becomes your icon map, and can work as a guide for helping you determine which icon pack (or packs if you are combining several) will best serve your unique needs.

With this list in hand, you can then begin browsing through the different icon sets that are available to you, either online or in your own library. You can then cross check what’s available in each given pack against what you need. Obviously, the pack that meets the most of your unique needs is likely going to be the pack that you will want to implement.

Also, try not get to focused on one particular icon object (unless you have a good reason). Often, there are several different objects that can represent the same concept, though perhaps with slightly different connotations. For example, the concept of video could be represented by a camcorder, by a strip of film or by a television set. Being more open to different icon objects can often help you get more value and use out of a given pack.

Know Your License

One thing to keep in mind when searching for icons to use in your web designs is the fact that there is a large audience out there who are also looking for application icons, which they can use in their operating systems. As such, many icons are made available free of charge for personal use and this kind of customization. In these cases, the icons are often not available for public and/or commercial use, which may (or may not) rule out their use in your next design.

Even if the icons in a pack are not designed specifically as application icons, it is always important to read and understand the license agreement. Different artists release their work for use in different circumstances. Some icons may be completely free, with no strings attached. Others may require credit, or a backlink, or may limit the ways in which their icons can be used.

Always be sure to follow the specific terms laid out in these agreements. If the creator is kind enough to release them free of charge, it’s only common courtesy to adhere to their wishes. If your particular needs fall outside of the scope of the license, consider contacting the creator and seeing if you can work out an alternate arrangement. You may have to pay a little bit, but hopefully it’s a small price for the perfect icon set!

Resources

Of course, all of this talk about picking and choosing the right icons and building your own library won’t do anyone a lick of good if you don’t know where to find awesome icon sets in the first place! Well, I’m going to help you out in that regard too! Here are some great resources for finding equally awesome icons (both free and paid).

IconEden

IconEden is a great icon site, and some of my all time favorite icon sets have come from here, including the Bright and Milky sets, both of which are good sized and totally free sets. Additionally, IconEden also has a collection of premium sets, featuring as many as 440 awesome icons in a single set! Be sure to check them out!

IconEden

IconEden

DryIcons

DryIcons is one of the single largest repositories of totally rocking icons, which can be used in both personal and commercial projects! One of the only requirements is to provide a link back to the DryIcons site, which is certainly a small price to pay for such awesome resources. If you just can’t bring yourself to add the link, though, you can always purchase a commercial license too.

DryIcons

DryIcons

IconShock

Like DryIcons, IconShock offers a huge repository of free icons for both personal and commercial use. Again, you will find plenty of social media related icons here, and even more character icons, based on popular cultural works (movies, video games, comics). Many of the free sets are simply samples of larger, premium packs, which can be purchased for a price.

IconShock

IconShock

IconLab

IconLab is an icon design firm offering a variety of different icons. They have some really cool freebie icons, and some really great premium ones. I’ve reviewed some of the pricing on these premium icons too, and it’s very reasonable for the quality of the icons.

IconLab

IconLab

IconDock

IconDock is an icon site by Nick La, creator of Web Designer Wall and the founder of N.Design Studio. Nick has created some really awesome icons, most of which are of a premium nature and can be purchased in packs, or individually, which is something I haven’t seen on too many other icon sites. There are also some freebies available too, but you have to visit the blog portion of the site to find them.

IconDock

IconDock

MediaLoot

Icons are certainly among the many different design resources that MediaLoot has to offer. Many are reserved strictly for members, but there are also some really awesome freebie sets that you can download for free. MediaLoot is still a really new site too, so you can definitely expect the total icon library to grow.

MediaLoot - Premium Graphic Design Resources

MediaLoot - Premium Graphic Design Resources

deviantART

Obviously, deviantART is so much more than just an icon repository, but there are plenty of awesome icons to be found there, if you’re willing to take the time to really look. A word of warning though: many of these icons are provided strictly for desktop customization (as discussed above) and may not be available for use in your next web design.

deviantART

deviantART

Smashing Magazine

I certainly recognize that Smashing Magazine is more than an icon site, but it is also one of my favourite resources to turn to when I’m looking for a new icon set. They have released a number of their own freebie icons, but even more importantly they periodically publish lists of some of the best new icons out there on the net!

Smashing Magazine

Smashing Magazine

Conclusion

Now, through two articles, we’ve discussed why using icons can be hugely beneficial for your web designs, and looked at where and how to find sets to help build your own library. Next week, we’ll look at some techniques for helping you organize those icons!

In the meantime, feel free to share your own thoughts and views on building an icon library. Is there another site or resource that you would recommend? Do you have any other tips for finding the best and most relevant icons?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Apr 6, 2010

Sneh Roy says:

I agree with the usefulness of big icon sets, they usually have everything you’ll ever need to get that consistent look in a project. Thanks for sharing all these wonderful resources!

Apr 6, 2010

Matt Ward says:

Wow Sneh. That was fast. I just posted this a few minutes ago :) Yeah, large icon sets are the best, and I still can’t help but be amazed at the size and quality of some of the free sets that are out there! The design community is just so generous!

Thanks for the comment Sneh! Always great to hear your thoughts.

Apr 7, 2010

icon library says:

Matt, thanks for including us :)

Apr 10, 2010

Shurandy Thode says:

Great series Matt. Voted this one up also :) Thanks for sharing.

Apr 15, 2010

Martin LeBlanc Eigtved says:

Hi Matt

I think Iconfinder.com should be on the ressources list. :-)

/Martin

Aug 2, 2010

Kristin | Link Building Service says:

Thanks for the tips. Keeping abreast of new releases in icon sets is wise, and seeking out variety is always good. The design community is doing an excellent job.

Aug 9, 2011

Khanh says:

Nice collection. But I believe that you have forgot an awesome free icons pack here : http://iconleak.com. Take a look, and you will know why I called it awesome free icons site.

Aug 22, 2011

Mickey says:

Yes, agree that big icon sets can bring a significant difference to the quality of our web design. Thank you for bringing up such nice collections. They certainly be useful to enhance my knowledge. Two thumbs up, Matt!

Leave a Comment

Copyright © Echo Enduring Media 2009-2014