A minor nitpick that I'm thinking about lately. Is anyone familiar with any research about whether icons are better with their label incorporated into them (i.e. the icon itself says 'search' or 'view my profile' or whathaveyou) or if they have a clearly seperate label below them?

Standard use clearly favours the label below. You can see this on windows 7, iphone, etc...

However I wonder whether this might not just be a product of the small size of these icons. If we are making bigger icons, ala the windows 8 tiles, then the titles and icons far more become one.

  • 1
    Keep in mind though, that if you go bigger than the "standard size" of an icon, it's not really an icon anymore, is it? – Majo0od Sep 15 '15 at 12:50
  • Not sure how screen readers and google bots etc. look at it but it may be worth noting the difference between a separate label and a label embedded in the image. – DasBeasto Sep 15 '15 at 14:10
  • This is going to depend entirely on the actual specific implementation. You could design both scenarios well, or very poorly, so any "research" will be vague, at best...if not just outright misleading . – DA01 Sep 15 '15 at 14:52

This depends on the Design Guidelines specified by the particular platform.

Following that and adhering the platform rules is the best way to go ahead.

It's about making the whole OS feel consistent, and not something that makes an icon distinct if you do not place the label against the rules of an OS.

For me, anything against the guidelines won't be consistent and will definitely be the odd man out, hence answering your question - It depends.

| improve this answer | |
  • 1
    a nice point here – Fattie Sep 15 '15 at 14:18
  • 1
    Assume its a new system being made from scratch, not an iOS/windows/whatever application. – the other one Sep 16 '15 at 7:17
  • If you were to cover an icon with a label or text over it, the icon would lose it's harmony since you won't be displaying the entire icon. – Swapnil Borkar Sep 16 '15 at 13:18

I thing it's more a matter of UI, appearance and possibilities of space-like user clarity. In this study examined effects with and without caption. Possible the additional meta analysis of arrive at your answer.

| improve this answer | |
  • This falls into UX since we're talking about the experience an icon might deliver if the designer decides to go against the guidelines specified by the OS. – Swapnil Borkar Sep 15 '15 at 14:02
  • 1
    Yes, you are right. Users needs consistent product experience. – MaTT Belis Sep 15 '15 at 14:14

Ok, let me nitpick your nitpicking: you're talking about links or buttons, not icons. An icon has no words by definition (the word icon comes from the greek and means image) and its meaning is contained in itself. You can see more on these documents about Icons and Icon Usability.

With the above in mind, then the answer will entirely depend on context. For example, if the icon is on a menu bar on desktop, it will probably have labels below, while in mobile it might be at the side. If it's for a link, it will probably be on the left, if it's for a button it might be inside the button or even outside the boundaries of the button. Or they can just be tooltips!

In short, your general question has not real answer. First, because icons aren't labeled, you label the element which will have an icon AND a label. Second, because for every occurence of position you'll find an entirely different version, even on the same app!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.