Are there any rules on when to use icons vs. icons with text vs. just text links in a web application?

For example:

disk icon


disk icon save



Extra question: Is disk icon save -or- save disk icon preferable?

  • 1
    I would use icons only if the button is very small, but when the user hovers on it, it will display the text description. If there is sufficient space, I would place the icon on the left then the text, because it's a convention. Commented Mar 27, 2016 at 12:44
  • About your extra question, why not putting text below the icon? Commented Mar 1, 2017 at 7:36

9 Answers 9


Icons are notoriously ineffective as labels, being very difficult to interpret correctly without training or experience. For most situations, users learn correct interpretations better with text alone than with icons alone. See: Wiedenbeck, S (1999). The use of icons and labels in an end user application program: An empirical study of learning and retention. Behaviour & Information Technology, 18(2), p68-82.

Icons are especially bad for anything abstract, such as Invoice or Bid, since abstract things generally do not have any strong visual image (both Invoice and Bid could be represented as paper documents, but how would you distinguish them?). Similarly, icons are particularly bad for actions (e.g., Save, Publish); it’s hard to clearly show a process with a picture. Yes, icons are used all the time in toolbars for actions, but toolbars were intended for experts, and nonetheless users are frequently confused by them (on average, users know only six Word toolbar items after regularly using Word for two years).

Icons can save space over text, but at the price of recognition. For small icons, such as 16x16 pixel, it’s very difficult for users to even recognize what they are supposed to be a picture of, let alone what the picture is supposed to stand for. One user I know thought the “disk” icon for save was a picture of a TV. (She was old enough to know what a floppy disk was.) I personally used Word for years thinking the Track Changes icon was some sort of stylized Rosetta Stone. Expert users find it easier to rely on the memorized physical position of the toolbar controls rather than the icon labels to pick a control. Bigger icons (e.g., at least 32 by 32 pixels) can help recognition, but take so much space you’re better off using the space for a clear text label. If space is limited, often you’re better off using abbreviated text than icons.

It’s extraordinarily difficult to get icons right. Do not attempt to develop a new icon without extensive iterations of user testing. Even then, you may fail. Microsoft designers tried everything to make interpretable icons for Outlook’s toolbar before giving up and going with text labels on key controls.

Icon labels also make tech support difficult (e.g., “Click on the yellow sheet with a blue checkmark,” versus “Click on ‘Accept’”).

As rule of thumb, icons alone should only be permitted when at least two out of the following three conditions apply:

  1. Space is very limited (i.e., too small for text alone).

  2. The icons are standardized (e.g., the floppy disk image for save)

  3. The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes, or a red rectangle to set a page background red).

Tooltips are required for icons when they are used alone, but they are a poor substitute for text labels. Your users shouldn’t have to use your app by groping around for things. The fact that text labels never need graphic tooltips is a pretty good clue that text is better than icons.

If space allows, icons combined with text is best. (I think there was research showing this from the late 1980s but I can’t find it.) Selective use of icons with text makes certain items stand out more or add visual interest. It may also improve the scanability of the items, but good text labels can do this too. Users have been known to subjectively think an app is easier if it has icons, even when they don’t actually improve performance (see Wiedenbeck, 1999 cited above), so that’s another reason to have icons and text combined.

I usually see the icon either above or left of the text label. I don’t think it’s necessarily inherently better than the alternatives, but it’s a convention you should follow too if you have controls next to each other so the user can rely on experience to tell which text label goes with which icon.

  • +1. I wonder why the designers of the Mac OS X dock decided to use icons without text.
    – Jon
    Commented May 12, 2014 at 8:09
  • @Jon: The originator of the Mac HIG has criticized the Dock for this (asktog.com/columns/044top10docksucks.html), so you’d think the designers would know better. My guess is they did it because they thought it looked cool. It’s not the only time Apple has traded away usability for aesthetics. Commented May 15, 2014 at 11:15
  • @Michael: And then the Windows taskbar copied it. At least in Windows there's an option to get the text back. I find it interesting that an iPhone with far less real estate than a Mac wisely shows text with the icons.
    – Jon
    Commented May 16, 2014 at 6:04
  • I was thinking about how I know a ton of word icons by heart. Then I remembered I made a text editor in javascript from scratch, so of course I knew the icons after dozens of hours only staring at them. My point: a designer/programmer is not the end user. Commented Jun 15, 2016 at 21:37
  • 7
    @Stijn Both. Users in 1999 had a very different technical literacy to users even in 2010, when this question was answered. The first sentence of the answer is "Icons are notoriously ineffective as labels, being very difficult to interpret correctly without training or experience." By 2010, most users have been exposed to an exponentially larger number of digital icons and digital experiences, gaining the training and experience and refuting the notion of icons as ineffective (think of FB's thumbs up). While 10 year old citations might work in technical settings, in a UX setting, they do not.
    – rmarti55
    Commented Oct 8, 2016 at 22:04

From the Neilson/Norman group on icons:

Summary: A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Icons Need a Text Label

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.

The website Usability.gov uses navigation icons for Methods, Templates and Documents, and Guidelines on every page within the site [example w/ text & w/o text]. If I asked each person reading this article to send me an icon that represented Methods, I am sure I would receive a wide variety of designs. As we stated as part of our design guidelines for homepage usability years ago, “if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.” While the mobile version of the site recognizes that text labels need to accompany the icons to impart some meaning, the desktop version hides these labels until the curious user decides to hover over them. Fixing these navigational items to the left side of the page in order to remain available to users when they scroll indicates that the organization believes them to be important and useful. However, stripping these icons of text labels renders them completely meaningless and is counterproductive to the goal of providing easy access to content.


According to research cited by Don Norman, icons alone work the least well. Solo text works better than icons. And text + icons works best.

  • 9
    Could you link to the research?
    – Rahul
    Commented Oct 3, 2010 at 8:45
  • I read similar information a while ago, but could not find anything out there to support that. The gist was (iirc) that most icons by itself are not recognized and that text was needed to clarify the functionality. Commented Oct 3, 2010 at 11:36
  • Rahul, the info comes from a video where Don Norman was giving a talk at the Budiness of Software conference and he mentioned this.
    – Hisham
    Commented Oct 4, 2010 at 5:45
  • @Rahul Here is the link that I was able to find: nngroup.com/articles/icon-usability Commented Dec 16, 2016 at 15:01

In addition to the answers above, I have a point to make.

What kind of website is it?

If the website is going to be used infrequently, you'll need to label your icons. Or else new users might find the UI cumbersome.

If the website is going to be used frequently, like Gmail, good icons with well placed tool tips are better than going with a text-only or icon-only approach. I am pretty sure Google went over this question, because in the past they used to use text-only buttons, but now they are using icons+tool-tips in Gmail. This new approach gives a clean interface without sacrificing usability. Even Photoshop and Notepad++ use a similar approach.

  • 3
    Icons plus tool tip is not really a solution if you are targetting tablets and phones, as tool tips are meaningless there.
    – L-Four
    Commented Aug 7, 2014 at 8:41
  • @L-Three less and less so, e.g. - the 'air view' feature on the newer Samsungs.
    – Rotem
    Commented Sep 17, 2014 at 14:01

Let the user choose, defaulting to Both.

Text+Icon helps first-time user learn the icons; but as he uses the application more, the user will get used to the icon and doesn't need the text anymore. Once he learned what the icons means, he'd prefer a larger workspace rather than the redundant Text.


Firstly, when are you going to design a user interface you have to consider the principles of usability (consistency, affordance, etc.). Affordance is one of the main concepts and it means that your interface should be intuitive. For example, your icons should be related with the meaning of the following action like the example cited above for save icon by Michael. Some icons are also standardized and you can reuse the meaning. The point is that if you use only icons for tool-bars, etc. you have to use the tooltip in the case that the icon is not good enough to express the meaning but if your icons are permissive enough they do not need a label and the tooltip could be enough.

In any case, it is difficult to design icons specially when your system is for an specific system and you have to design icons. In this case, you can propose some designs and evaluate it with the users. It could be helpful to know what the user thinks about your system, visual interfaces and icons. Also you can make a re-memorable test one day after your real test trying to evaluate if the users can remember your icons, the meaning or your icons or the possible areas where they can find the action that you are asking. Also a questionnaire could help if you have more than one design for icons.

On the other hand, if you need to put the label I think that it is better the label below the icon: [icon] [label]

Remember that “An affordance is an aspect of an object that makes it obvious how the object is to be used. In user interface displays, the features that create affordances are usually visual . .." Rosson, M. B. & Carroll, J. M. (2002) Usability Engineering, Morgan Kaufmann.

Or maybe if you have time... you can read this one: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

If during the design process you have considered the affordance, maybe the labels are not necessary and you just use the tooltip otherwise you can consider the labels below the icons and evaluate or propose more designs to be evaluated with users(no so many) they can be colleagues at the beginning until the version that could be tested with final users.


In current trend The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. and when you use English always keep the letters on right side. because obviously icons will be the main attraction. Therefore, users might ignore the letters on front.

for an example iTunes- Organized as a library that contains your media library: music, movies, shows, audibooks. Beneath the Library is the Store where you can buy more media to put in your Library.

enter image description here

and for the recent trends like Google pallet design and windows 2D tiles suggest icons. but better to have icons with a fast mouse hover tool-tip. good luck.

  • Upvoted for answering the extra question.
    – ArturoTena
    Commented May 13, 2015 at 18:10

This will depend on the users. From Usability point of view, having both icon and text delivers better results because that follows recognition over recall, provided the icons are accepted by a reasonable population. Having only the icon is applicable for symbolic glyphs - those which are globally understandable. Text only is most appropriate when the items are arbitrary and do not have any recognizable glyphs to represent them. For such items, having text only is perhaps the best. However, the nomenclature used should be tested for appropriated use.


After read all questions and agree with all I would like to add an extra viewpoint.

Before decide to show icons, don't show icons, add text around the text, don't add any text you should answer some questions:

  • Where you intend to add the icons?
  • Why do you need icons?
  • Who will use these icons?
  • What the knowledge about the icons/content/action by the users?
  • Is it common to use icons for it?
  • You will make the user interaction easier?

And to answer these questions you must consider some points:

  • The people use the smartphone every day, every time and the most famous icons like Facebook, Youtube, Google, What's App, Instagram and others need to show a label to guarantee that people will know.

enter image description here

  • Word/Google Docs is using successfully icons without text because are the same for years and everyone already knows what is but even so on mouse over they show a text to explain the icon.

enter image description here

  • Different geographic regions could understand your icon differently. For example in the UK is more common to use the basket on e-commerce and on the otherwise in de USA is cart. It's happening because of regional language influence.

  • Complex icons could stop your conversion because of misunderstanding.

enter image description here

And you can have a look at a good comparison that I borrowed from Smashing Magazine.

enter image description here

Considering all of the answers I will use text with an icon on 90% of the cases and the position of text depends on your design concept and if it is easy for the user to connect them.

And like I always say on my comments, nothing here is absolutely truth, you should test, compare for YOUR users on YOUR website/application.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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