I’ve been receiving a few emails lately asking me for some of the web design resources that I personally use. Well, I’d like to start sharing my resources with our readers so today, I’ve gathered up a collection of the icon sets that I have personally downloaded and use on a daily basis.
One thing that I’ve emphasized before is to have a collection of resources1 at your disposal. There are a lot of different icons out there and choosing which ones to download and save in your resources can be difficult. I used to just be download happy and download every icon set that I found and I found that to be very ineffective as I would still end up having to sort through hundreds of folders looking for the right icons.
Well, in this post, I’d like to share some of my favorite icon sets that are available for download. And guess what, they are all free!
My favorite Icon Sets Link
This excellent icon set consists of almost 500 transparent PNGs at 20×20 pixels, and is completely free to use for both personal and commercial projects. No attribution is required.
These fantastic icons are from Icon Finder. You can use them in any project you like. They were designed by the talented Asher Abbasi3. The freebie consists of 50 beautiful icons. The icons are all colorful and detailed and can by used in any commercial project – just don’t redistribute without written permission.
Toolbar Icon Set
This free set comes with 35 icons that you can use in your website design. The icons are very detailed and looks great and it’s great to use especially if you want icons that aren’t too big or small.
These icons are licensed under Creative Commons Attribution 3.0 license7. The set took over one month to make. Now, Its all up to your creativity, the metaphors depicted here aren’t meant to be used as is, you can give them your own spin, like the Binocular for Search, Legos for Add-Ons/Plugins, Tree for directory tree, what have you. If you want to use them without attribution in your commercial works, then send an email to firstname.lastname@example.org
IconSweets is a free icon set containing 60 vector Photoshop shapes, influenced by icon sets such as Glyphish and Pictoico. You may use these icons for both commercial and non-commercial projects and customize them any way you like.
The WooFunction Icon Set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available as 32×32 pixel PNG files and they are indeed pixel-perfect. If you have an in-depth look at the individual icons, you’ll notice that a lot of time was spent paying attention to the finer details, which means that this is a really classy icon set.
Gentleface Toolbar Icons17
These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including iPhone and iPod apps. You’ll find a set of 8 cursors and 236 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions. The entire set totals 244 original icons optimized for 16×16 pixel size and available in 16×16, 32×32 and 48×48 pixel sizes.
Komodo Media Social Network Icons19
These social media icons, created by Rogie King are just perfect. I can’t even name the number of times that I have used these icons in my web projects. Definitely something that will be extra helpful to any web designer.
Default Icon is a repository of free icons in their simplest form. It can be used even on portable devices (iPhone, iPad, android compatible devices etc) with minimum capabilites as the resolution is 1-bit and fully customizable as there is an eps version present. Available for download in .eps, .png, .gif formats, in black and white colors, in sizes 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, 256×256.
Pictodeck is a set of over 700 pictograms in vector format designed specifically for Keynote. That means you can rescale them to any size you desire without any loss in quality. All of the icons also support transparency.
Sanscons was design specifically for you to use CSS with them. Due to their transparent background, you can apply any color or background image to them for a more custom fit. Styling the icons takes only a basic understanding of CSS.
The Sweetie family is cute and clean. And free! This set has been around for five years, but it’s still going strong. So far its been downloaded over 50,000 times, and is seen all over the web on great projects like BuddyPress32, Rock Paper Shotgun33, and VLC34.
Circular Icon Set36
A themed collection of 100+ 16×16 icons in alpha PNG format. Circular is free to use for whatever you like without attribution – the only thing that the creators ask is that you don’t distribute them yourself!
Quartz is an icon set that contains 90 simple and stylish icons. Dedicated to the blogoshpere, Quartz Icon Pack has numerous types of icons: files, folders, charts, books, boxes, social networking sites, email etc. All icons are free to use for personal and commercial projects.
These icons are made to work on any background and in any browser. (Note the 32×32 large icons only work well on lighter backgrounds). They are in 8-bit PNG format, with 1-bit transparency. Worry not about IE compatibility, which has full support for 1-bit transparency in PNGs. IE/Win only does not support alpha-transparency in 24-bit PNGs (but will be supported in IE7). If that was over your head, don’t worry. Just rest easy knowing that these icons work in any browser.
Chalkwork HTML is a free set of HTML-themed icons. Featuring 31 graphical representations of common markup elements, this is a completely free icon set available for personal and commercial projects alike.
“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that.
Another free set offered by famfamfam, “Mini” is a set of 144 GIF icons available for free use for any purpose.
Here’s a very useful site. Iconza is a collection of free icons that can be colored and reduced in size to your taste. If you are a happy site or blog owner, you will be able to pick icons that will fit right into your design.
Additional Resources Link
Still didn’t find the right icons for your project? Then try searching through these sites to find the right fit for your project.
Icon Search Link
While having a great collection of icons is necessary for a web designer, knowing when and how to use these icons will be beneficial as well. Here are some great articles online that deal with this subject.
Articles About the Use of Icons Link
- How To Use Icons To Support Content In Web Design56
- Icons and the Web: Why they Matter57
- Making the Most of Icons in Web Design58
- How To Use Icons On Your Web Site60
- Are your icons working for you?61
- Icon Semiotics: A Common Visual Representation62
- Learning to Love the Pixel: Exploring the Craft of Icon Design
Well, I hope that this post was helpful to you. I will try to share more of my resources in future posts. By the way, did I miss any new icon sets that would be useful for web designers? Then go ahead and share it with us in the comments. And while you’re at it, you can subscribe to the RSS feed here63.
- 1 http://designinformer.com/designer-do-right-now/
- 2 http://www.iconfinder.com/blog/anniversary/
- 3 http://kyo-tux.deviantart.com
- 4 http://www.iconfinder.com/blog/anniversary/
- 5 http://shlyapnikova.deviantart.com/art/Toolbar-Icon-Set-165905043
- 6 http://prax-08.deviantart.com/art/Boolean-The-Pixel-Icon-City-166457851
- 7 http://www.deviantart.com/users/outgoing?http://creativecommons.org/licenses/by/3.0/
- 8 http://prax-08.deviantart.com/art/Boolean-The-Pixel-Icon-City-166457851
- 9 http://omercetin.deviantart.com/art/PixeloPhilia2-166570194
- 10 http://omercetin.deviantart.com/art/PixeloPhilia2-166570194
- 11 http://iconlicious.com/freebies#cornerstone
- 12 http://iconlicious.com/freebies#cornerstone
- 13 http://www.iconsweets.com/
- 14 http://www.iconsweets.com/
- 15 http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/
- 16 http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/
- 17 http://www.gentleface.com/free_icon_set.html
- 18 http://www.gentleface.com/free_icon_set.html
- 19 http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
- 20 http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
- 21 http://www.noupe.com/freebie/pictodeck-icon-set-over-700-free-pictograms-for-keynote.html
- 22 http://www.noupe.com/freebie/pictodeck-icon-set-over-700-free-pictograms-for-keynote.html
- 23 http://glyphish.com/
- 24 http://glyphish.com/
- 25 http://somerandomdude.com/projects/iconic/
- 26 http://somerandomdude.com/projects/iconic/#
- 27 http://www.brandspankingnew.net/archive/2006/12/hohoho.html
- 28 http://www.brandspankingnew.net/archive/2006/12/hohoho.html
- 29 http://somerandomdude.com/projects/sanscons/
- 30 http://somerandomdude.com/projects/sanscons/
- 31 http://sublink.ca/downloads/Sweetie-BasePack-v3.zip
- 32 http://buddypress.org/
- 33 http://rockpapershotgun.com/
- 34 http://videolan.org/vlc
- 35 http://sublink.ca/downloads/Sweetie-BasePack-v3.zip
- 36 http://prothemedesign.com/circular-icons/
- 37 http://prothemedesign.com/circular-icons/
- 38 http://led24.de/iconset/
- 39 http://led24.de/iconset/
- 40 http://www.graphicrating.com/2009/06/19/quartz-icon-pack/
- 41 http://www.graphicrating.com/2009/06/19/quartz-icon-pack/
- 42 http://www.lullabot.com/articles/free-gpl-icons-lullacons-pack-1
- 43 http://www.lullabot.com/articles/free-gpl-icons-lullacons-pack-1
- 44 http://www.mezzoblue.com/icons/chalkwork/html/
- 45 http://www.mezzoblue.com/icons/chalkwork/html/
- 46 http://code.google.com/p/twotiny/
- 47 http://code.google.com/p/twotiny/
- 48 http://famfamfam.com/lab/icons/silk/
- 49 http://famfamfam.com/lab/icons/silk/
- 50 http://famfamfam.com/lab/icons/mini/
- 51 http://famfamfam.com/lab/icons/mini/
- 52 http://www.iconfinder.net/
- 53 http://findicons.com/
- 54 http://www.iconseeker.com/
- 55 http://www.iconlook.com/
- 56 https://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/
- 57 http://blog.echoenduring.com/2010/03/30/icons-and-the-web-part-1-why-they-matter/
- 58 http://inspectelement.com/articles/making-the-most-of-icons-in-web-design/
- 59 http://www.designmeltdown.com/chapters/icons/
- 60 http://www.sitepoint.com/blogs/2009/05/01/how-to-use-iconse/
- 61 http://www.sitepoint.com/blogs/2007/08/10/are-your-icons-working-for-you/
- 62 http://www.lukew.com/ff/entry.asp?16
- 63 http://feeds.feedburner.com/design-informer
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.