Tips on selecting icons for web applications?

21 Nov 2010 - 7:11pm
5 years ago
3 replies
1319 reads
Lia Fetterhoff

Hi there,

I'm looking for any resources or tips on selecting good icons for functions unique to a certain web application. I personally don't design icons myself, and think I could be successful using those already out there for purchase.

If anyone could give insight on a couple of things, that'd be great, too:

1) Should icons on a toolbar always be labeled, or will a user be able to learn them after using the application regularly?

2) Why does it seem there is a preference to have more icon detail on web appliction icons, rather than simple web 2.0 media icons? The trend seems to be using icons like in Adobe Acrobat Pro or Microsoft Word where they are pretty detailed 16x16 or 24x24 icons, rather than simple symbols.

Adobe Acrobat toolbar example:

PopCap simple web 2.0 icons:





21 Nov 2010 - 8:49pm

Hi there,

1) Whether or not to use text as well as an icon has been a traditional debate in the Human-Computer Interaction field, which has naturally transferred into IxD. From personal experience, my advice would be to label the icons because it will help new users get accustomed to your web 2.0 interface. Even if you don't label them, there should at least be some sort of rollover text that describes what each icon is. A great example of that is the Mac OS X dock. The icons aren't labeled, but when the user rolls over each icon, the users can see a simple label that instantly disappears when they hover away from that icon. (It's there, but it's not there; if you catch my drift :)

2) This is a really useful resource that really unpacks the subject of the degree of realism that should be used in UI design:

Hope that helps.


16 Dec 2010 - 6:18am


The link is really helpful -

Thanks for sharing,


22 Nov 2010 - 1:51am

hi Lynn,

I believe it depends upon the detail of functionalty you want from the function. If it is as simple as email etc., as they are easily recognizable. But giving unique features icon special icons designed as per their function will be more helpful to users and in a longer time he will get instant feedback when seeing that icon.

Syndicate content Get the feed