(Originally posted, May, 2011) We posted this article a few years ago as a guide to the icons found on mobile apps. In general, “icons” mean emoji for grown-up developers. If you notice a missing icon or wonder what one means, send us a link of where you see it and we’ll help all our users learn what the new or confusing icon means: [email protected])
As more and more people are using mobile devices to run their lives and businesses, the people who develop applications for these devices face a challenge. Smaller screens mean less space to use words that instruct the user where to go and how to use the mobile website or app. For that reason, a whole new visual language of small symbols called “icons” is evolving. These icons are supposed to convey to the user what will happen when they tap onto or click the image.
The only problem is, sometimes Developer A and Developer B use the same image for various things, or different images for the same thing. For instance, what does and “i” in a circle mean? How is it different from a “?” in a circle? Or, for that matter, an “!”? (We included that last one, as it’s an on-going debate we have among ourselves at SmallBusiness.com.)
Here are some common icons and what will likely happen when you click or tap on them. The following icons are from the folks at Font Awesome who have open-sourced them as part of development framework called Bootstrap that was created at Twitter and became an open-source project in 2011.
Cog, Widget or Gear
We started with this one because it demonstrates some of the confusion. First off, it’s a symbol that goes by different names. In the real-world, the symbol can mean “widget,” a word that has a meaning among developers that has nothing to do with that real-world meaning. On an app or website, it typically means “settings.” Click it and you can adjust something.
This, also, is what we mean by a confusing icon, as it can, like the cog-gear-widget, also mean “settings.” For example, Google Apps used to have a wrench icon for settings but now uses a “cog-gear-widget.”
An envelope should mean email, right? It may. Or it may have a broader meaning, like “click on this to contact us.” Look for one on SmallBusiness.com and click it and the latter will happen.
Right Swirving Arrow
This means share. Click on it and you’ll likely see a list of ways to post the content you’re seeing onto social media sites or email it to friends or co-workers.
Another Sharing Icon
Perhaps we didn’t mention that the internet has no governing board that controls how many symbols can mean the same thing, as this one means “share” also., but wait, there’s more.
Yet, Another Sharing Symbol
We feel certain there are some nuance differences in the two previous sharing icons and this one, but on SmallBusiness.com, we’ve narrowed it down to the middle one. This one is especially confusing because it can also mean “print.” One day, this will all be worked out by the UN.
The exclamation point in a circle means, “take note and watch out.” If it’s in a triangle, it means “TAKE NOTE and WATCH OUT.” Or, if it’s part of the logo of SmallBusiness.com, it means, “here’s your answer!”
This should be obvious. It means, click here to play a game of Monopoly.
Sometimes (say, if you use Google+), you may even see a stack of ellipses. We’re guessing this icon is a visual pun that means “the stuff we couldn’t…fit here.” Clicking or tapping on the icon will reveal options related to what you are currently viewing. (Coincidentally, the next icon means and does about the same.)
Parallel Bars (hamburger or a stack of hamburgers or hot dogs)
When used as a navigational icon, either of these two “lists” mean there are lots of things the app or website couldn’t fit on a tiny screen. Typically, if you click or tap on them, some form of the navigational bar will slide in from the side or top.
This means “edit” pretty much anywhere you see it.
Triangle in a Circle
This is a play button icon. That, or a cattle ranch brand.
This means refresh. Refresh means stay on the same page, but try to make it work, this time.
A Dot with Two Curved Lines
This is an RSS icon. It’s a magical tool that far too few people use. If you want others to be more informed than you, ignore it.
This means “search.” Even if you don’t see a search box, click on it. In fact, you can test what we mean by looking for one at the top of this screen (depending on the device you are using). Tap or click on it. We promise a search box will appear.
This icon means “turn off your computer and go have a beer.”