A picture is worth a thousand words, and icons are a great way to visually convey information in a small space. Any web project can find a use for them, but if you're like me - more of a programmer than a designer - they can be invaluable. Icons are especially helpful when you need to make menus, categories, lists, or action links more eye-catching, so I've used them often in CMS's and various backend web apps. However, even the front end of some of my sites use them because they can go a long way to making up for my obvious bias towards function over form. Frankly, I have a site or two that would look absolutely awful without icons because they would be all text and no graphics without them. Here are my all-time favorite icon libraries that I find myself using over and over again - what I consider to be the best icons ever.
Icon collections have to meet three criteria for me to use them repeatedly and to be included in this list I'm sharing with you. They have to be free to use, even for commercial purposes. They have to be extensive, because I require a decent selection so I don't have to use more than one or two sets on a website and for consistency. And they have to be high quality. Not just good, but outstanding. The icon collections featured here definitely fit the bill.
Download the silk icon collection and take a look for yourself - these icons are top notch. The variety suits many different purposes, so it's hard to find a webapp that can't use some of these 1,000 free quality icons. In fact, some very famous and popular websites use elements from this icon archive, such as Dropbox. This is the primary icon group I've used for a long, long time because it serves my needs so well.
As time went on, I sometimes needed an icon for a very specific purpose that I just couldn't solve with the silk set. Eventually I found the Fugue icon archive and it came to the rescue. Not only is it more extensive than the silk set with over 3,000 icons, it also has a bonus set of slightly larger icons in it (24x24 and 32x32) in addition to the standard 16x16 icons that come in the silk collection and this one. In my opinion, the graphics quality isn't quite as high as in the first set, but it's still fantastic work and highly recommended, though it is a larger download because it is a much larger set. Download it here.
No icon list of lists would be complete without mentioning the Noun Project, because they're just so cool. They are trying to assemble a repository of icons for every noun in the English language, and it's all available for free. The icons are black and white, and they must be downloaded individually, but they scale well and are very easy to search. If you're looking for a specific icon you can't find anywhere else, there's a decent chance that the noun project has what you need. If they don't, they might soon because their icon database is growing rapidly. Although I don't personally use these icons on my own sites, I definitely support their laudable goal and think they're doing a great job at executing such an ambitious task. Highly recommended. Note: these icons require attribution in accordance with the wishes of each icon author, which of course varies. It's much easier to stick to an easy icon set like Silk or Fugue than to comply with the wishes of many different authors.
If you still can't find the icon you're looking for, the buck stops at IconFinder, the search engine dedicated exclusively to icons. Over 160,000 icons of all shapes and sizes makes this the icon repository of last resort. However, like the Noun Project the icons can only be downloaded one at a time, even the collections, making it much harder (or at least more time-consuming) to get a consistent icon set for your web project. But there simply is no place on the web that has more icon resources. It really can't be beat. Well, except for IconArchive, which claims to have over 330,000 icons. But in my opinion, once an image is large enough, it's no longer an icon - it's clipart. I'm a big fan of consistency, so personally I stick to individual icon sets made by a single author. Still, these resources are here if you need them. And if you're willing to break open your wallet, you can always head over to IconShock, which has over a million icons - but you have to pay. Out the nose.
The icons in the Fatcow set are very similar to the Silk icons, but they do come with both 16x16 and 32x32 versions. These 2,400 icons are great for apps that might need to switch icon size based on context. I happened upon this set rather recently, so I haven't had much time to explore it, but it seems definitely to be worthy of inclusion here. I anticipate it being my go-to resource when the silk and fugue sets don't do the job.
The #1 thing to be aware of if you're going to use icon graphics on your webapp is that you should definitely create a sprite of them when you publish. Individual icons on a website can increase page load time, because each additional image on a page means an extra HTTP request for the user's browser. Creating a sprite can combine all those images into one file that loads much more quickly, and it's not difficult to set up. There are plenty of guides and tutorials on how to do this online, but the basic idea is that you create a much bigger image with the individual icons that you're using lined up in a row, and then use the CSS properties background-image and background-position to only show the part of the sprite (the individual icon) that you want to display. Piece of cake!
Over time, I'll try to keep this post up to date as I find other icon sets that blow me away and end up using repeatedly. And, of course, you can check out my other resources posts to find more images, fonts, sounds, and other useful assets for web developers.