Chapter #31. Never Use Text on Icons

Icons are supposed to be simple pictures that depict a concept. They are a shorthand visual reminder for users that what they're about to click is the thing they want.

Often, icon designers get frustrated that their pictogram isn't quite right, as it isn't quite recognizable or distinct enough. Instead of solving the problems with the picture, they opt to simply add a line of text into the icon design. Note that I'm not talking about text labels for icons—those are essential—I'm referring to the shady practice of including text within the icon itself.

Three icons with text as part of the icon

First off, this is lazy design, but secondly, and more importantly, it breaks translation and accessibility functionality. Whether your product is a website, which can be translated with an online service like Google Translate, or a self-contained app, which will be internationalized with "strings" of copy, the text in icons won't get translated and users will get confused...