Think of icons, for the most part, as doors.
In technology, icons are often active elements where you click to move forward (or backwards) as you navigate a website, software, app, etc. You also often click on icons in order to activate, modify or disable a feature within the product. At the very least, there are also static icons that serve as informational elements.
Certain icons do not differ much as you jump from a product to next product, and there is a good reason for it. People have grown to recognize certain important icons to the point that text is not needed but, in order to do so, the design cannot stray from its basic shape. Have you ever stumbled upon a website or software with its own unique set of navigational icons and you end up having to click it to know what it leads to? Annoying, I know.
It doesn’t matter if you’re an amateur, developer or an enterprise. If you are developing your own app, program, or even an operating system, it is very important to take into account thehabits of the users and how to provide them with the best user experience. In order to so, you have to give thought on how they will interact with the icons you have implemented on your product. However, there will always be some people that won’t recognize your icons, making it necessary to have a safety net. The safety net would be the title tag, serving as a tool tip for the users needing additional information about your icons.
I have compiled some of the most recognizable icons that are important for the user experience and divided them into two categories: Generic icons used across platforms (websites/software/etc.) and icons that are unique or more frequently used in a mobile device (table, smartphone, etc.)
Common Generic UI Icons for Computers
Common UI Icons for Mobile Devices
Calendar or Date
Safety Net: Use Title Tag
There will always be some that won’t understand the printer icon, don’t assume everyone knows. The safety net I mentioned at the beginning of this post is all about tagging these icons with text because when a user does not understand an icon’s meaning, he or she will most likely hover the cursor over the icon to see if a text box will come up with a description.
See the image on the right? I grabbed a random website, hovered my cursor over one of their UI icons, and it displayed the text below my cursor. If you want to know what website I grabbed it from, just hover your cursor over my image for the answer.
Credits to Adam Whitcroft for most of the icons used in this post.