Smashing Magazine - we smash you with the information that will make your life easier. really.

Great post. Same is true with using icons to design effective web applications. We are jut going though a design improvement phase with our apps an found that it is critical to find the right mix (in terms of amount and style) between icons and simple links.

Really nice showcase of thoughtful icon usage.

Great collection, although the Joomla! Designs link is broken.

Awesome article Nathan, great job showing how useful icons are in displaying content to users.

I need to preface this by saying I love Smashing. Now that I’ve made that declaration, I have a small gripe.

I read most of your posts on my iPhone while commuting. In fact, I’m posting this comment from the back of a bus. That being the case, I’m often reading on a smaller screen with liter bandwidth. Posts such as this one practically crash my device because they are so graphics heavy. Andthey take forever to load.

I’ll probably get bashed for asking, but might you be able limit your feeds so they don’t send the whole post to rss readers? This has the added benefit of increasing pageviews on your site. Frankly, it just seems like good business for you and a better experience for you readers.

I went icon-crazy in my application, Marketo.
Video to see: http://pages2.marketo.com/demo.html

Using the V-Collection from iconExperience.

Thanks everyone for the kind comments. Do you have any other favorite examples of icons in use?

@Michael This post was focused on how icons relate to content. Since favicons are separate from the content, I decided not to mention them in this article.

Great information I have been working on building my own webpage but was completely lost. Thanks

Fantastic post, thanks for this!

cool icons, hot designs

nice article with good knowledge of icons

That’s one seriously long article! Good job!

A few days I was looking for inspiration to use icons on a new design, I really spent a lot of time! Hope this can help others looking for inspiration, I will have a look for future inspiration :D

Thanks!

nice way to implementing the icons with different ideas. Thanks

I use icons in my designs, but this opened my eyes a lot more. Great article.

Nice examples.,… Especially : Squarespace is original and inspiring, and tells the “story”/sends the message well.

But I think that some websites use icons- just to use icons… Sometimes they don’t make that much sense, and then I think There is no need to use them- if the just confuse the viewer…

I have been dreamning of a iconset for a long time now. The set should include icons for:
acryllic paintins,
oil-paintins,
aqualelle pintings,
crayon-drawings,
pencil-drawings,
tush/ink-drawings
photoshop-drawings
flash-drawings
illustrator-drawings

and furtehrmore:
web-layouts
print-layouts
graphic design

But I havent found any icon-set that matches my needs… Do you know of any place I can get this?

Really informative article. Thx

Great article! I’m always a little anxious about when to use icons, but your examples really helped me understand the best practices of icon usage.

Hi,
very nice article. I would like to have some icons for categories of my german shop.
But i don’t know, how i can create some. My dream is to have comic art icons like http://www.globetrotter.de.
Do anyone have some ideas to create them myself?
Kind regards
Merkus

There is a message “This Domain is FOR SALE.” on wordpressdesigners.com

Very good info. Thanks for posting.

Way semasiographic!

Thanks for the useful article, I needed a reminder of how useful icons can be. They really do make the text on a site seem less intimidating as well as being an interesting element on any site

Very good article, but I would suggest against the use of flags to suggest (even euro) languages, fine to suggest a state or country, but generally a bad idea and insulting to many people to tie a language to a specific country.

i concur–great article.

i’m curious about the logo icon. companies have very stringent brand standards, and i wonder how changing a logo to fit your design’s visual feel may be viewed as an issue…? the wp remix example on this page shows a modified adobe logo… are there issues around that?

yhea nice post , i think the icons are really importatn in one project , and they dont have to be too detailes, simplest logos are great for me ^^

This is a horrible article and horrible advice that ignores years of usability research. Icons have no intrinsic meaning. The use of obscene icons is even more hilarious. Anyone who follows the advice given here is an idiot.

@Jason

Care to elaborate? Usability is a big factor when laying out content and designing a website so we always try to focus on it. From my experience icons actually help to make content more readable and usable.

Could you explain some of the downsides to using icons?

@ Nathan Barry

I’m of similar mind as Jason. I tried posting the following message earlier but it’s still in moderation purgatory. I’ve created a Smashing account in the hopes that it will actually get posted. Please forgive me if it appears multiple times:

// Begin Pedantic Rant

About half of the examples in this article are in fact spot illustrations and not icons per se.

A web page is an interactive computing environment and an icon in a computing environment has the affordance of an interactive object.

Using an icon in a way which violates it’s affordance (i.e. using an interactive-looking icon where no interaction exists) erodes a user’s trust in your interface (most web pages are interfaces) and can quickly lead to the user abandoning your site altogether.

There’s been a strong trend lately for the two to be confused; especially here on Smashing. I love this site, but mixing the two in a single article only compounds the problem and leads to more designers creating bad UI and bad User Experiences; which leads to poor user retention and user completions; which leads to your clients have less money in their pockets to pay you with. DON’T DO IT. Learn the difference and avoid the trap.

// End Pedantic Rant

I was quite surprised to see that you had linked up Holdfire, although it’s Holdfire.net, not holdfire.com.

Nice list – I would have liked to have seen some examples of ‘what not to do’.

Keep up the good work – smashingmagazine is my most clicked bookmark :-)

Was quite interested in hearing about this difference about icon and spot illustrations. Thanks for pointing it out guys.

I also use icons on my website to break up text and add to the readability. Check it out at here: http://www.shayhowe.com

I saw someone asked where to get some good icons. A few good places I’ve found to get free icons include:
http://www.vecteezy.com/
http://www.iconaholic.com/
http://freebiesdock.com/

very nice site!

Really nice article, I always liked icons in web design, and found
them very effective, but never understood why, you have managed to
rationalize it.

Not sure I agree with your point about making the icons different
sizes to make the content more dynamic, I think it contradicts your
next comment saying “It is also crucial that all of your icons match”

You asked for ‘favorite examples of icons in use?’ We use icons for
all the wedding activities we
offer, these icons are also used in each wedding so the user is able
to find similar weddings.

I love this article.
Thanks so much!!!!

Really nice article, I always liked icons in web design, and found them very effective, but never understood why, you have managed to rationalize it.
Not sure I agree with your point about making the icons different sizes to make the content more dynamic, I think it contradicts your next comment saying “It is also crucial that all of your icons match”

Great article. Just by using icons the user can immediately identify what the text covers, so they can scan for what they’re looking for. Need to go find some nice icons now. Problem is trying to find unique iconsets that aren’t overused ;-)

Thanks for the feature Nathan

What happened to examples that were supposed to show ‘how not to do it’ ?

Although http://www.eurolanguages.com/ is trying quite hard to alienate people – I love how they tie ‘English’ to: “Ireland, England, Scotland, Malta”
I’ve always known that they speak a different language over the pond in the USA, but what happened to Wales, Australia, NZ, India etc?
And then they compound it by showing the Union Jack against Ireland: no-one in the south is going to be happy about that, and only half of the north for that matter!

I believe the link for Holdfire is supposed to go to holdfire.net not holdfire.com as it is currently linked.

Lots of cool applications but of course the designer has to decide whether icon usage is the correct solution for the client. In some cases it is tempting to overload the sites, however in many cases where a product is not a physical thing they can help vastly.

The site over at Media Temple is an example in point. A bunch of servers don’t usually look that cool, but a bit of icon work later and the whole package is much more saleable.

On some of given examples icons are really spoiled the design

I love comment #49.

This is one of the worst blogs I’ve ever read on this site over the past, eh 2 years. I really think this could have been condensed much further. It is nice to have an abundance of illustrations on different icon implementations, but the talking points seem almost repetitive.

Porn sites uses lots of good icons

Thanks – well written article with a sensible point of view

I am SO tired of sites who assume that I understand their version of ‘mystery meat’ – meaningless pictures and no explanatory text.

hi