Icons & Text

I took an intentional walk around my neighborhood on a mission to find different icons and examine the ways in which they were presented.

Here is an example:

It’s funny how we see these icons on a daily basis, but it took an intentional look for me to consider: 1// When was the last update to these icons? (The car being towed in image 2 reminded me of the car my father used to drive in the 80s.) 2// Almost all the icons had additional text.

It had me thinking.. Do all icons have accompanying text? If so, does it automatically become one image (icon + text) in our brains due to familiarity? Is text always necessary? When is text detrimental?

How do we apply this in the context of websites and apps? Take for example the ever controversial “Save” button.

Microsoft Word 2015

Though Sony, the last manufacturer of floppy disks, stopped production of the floppy disk in 2011, floppy disks were becoming less of a household staple a few years prior. And as the argument goes, the next generation of computer users have never seen a floppy disk in their lifetime, so is it good practice to use the floppy disk icon to “save”? Further, as you can see here, the icon is not accompanied by text (though a hover-over says “save”).

Now, let’s look at Google Docs and how it denotes save.

Google Docs

A save option is not immediately visible. Even in the drop down, there is no option to save. Instead, GoogleDocs immediately saves your files to your drive without user input. This is likely the direction of the future with cloud computing becoming the norm.

How about one more “save” icon to drive the point home…

This down arrow has been silently replacing the floppy disk to mean “save.” Did it always present itself as a textless icon? How did this icon become equivalent to save? (Though, one can argue this down arrow is also associated with download, possibly more so, I am generalizing the concept of saving something onto your hard drive which can also encompass downloading as well.)

According to this article by Aurora Bedford,

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.

Though there are universal icons (i.e. print, magnifying glass, home, play, etc.), they are rare. Outside of this, most icons remain ambiguous to users until there is enough interaction and understanding of the icon. The meaning must be learned. However, we cannot just bank on multiple interactions only. There is variability and variance in interpretation from one person to the next. Therefore, text must always accompany an icon.

Bedford’s article provides useful tips for when designing icons. Here are a few to keep in mind when designing icons:

Familiarize yourself! Research the icons used by your competitors and those commonly used on the platforms you are targeting.
Test the icons for recognizability — ask people what they expect the icons to stand for
Test the icons for memorability — ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier
Always include a visible text label.


Show your support

Clapping shows how much you appreciated Shelly Oh’s story.