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.

User Experience

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 netThe 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

Clipboard icon meaning attachment.  Attachment

A blow horn is often used as icon for sound, volume or audio Audio

Icon used for recycle or trash bin.  Bin

Image of an credit card used as icon for UI  Credit Card

User interface Icon for cancel or close is a X image Close

User Interface icon for documents is a paper Document

User Interface favorite or popular icon is a star Favorite or Popular

User interface icon for folders is a folder Folder

help-icon Help

User Interface image for the inbox Inbox

User Interface icon for the Link is Link

User interface icon for locked elements is a padlock Lock

User interface icon for Warning or Alert is an exclamation point. Warning

User Interface icon for Refresh is a circle with arrow representing repeat Refresh

User interface icon for printing is a printer Print

Magnifying glass is used as icon for search  Search

 

Common UI Icons for Mobile Devices

User Interface icon for adding something is a plus sign Add

User Interface icon for Airplane Mode is an airplane Airplane Mode

A battery is used as icon for the phone's battery status.  Battery

Sun or brilliant light is used as icon for the screen brightness  Brightness

A paper calendar is used as icon for calendars or dates  Calendar or Date

Cameras are used as icons for cameras.  Camera

User Interface icon for menu is a paper with a list Menu

User Interface for WiFi signal is an abstract image representing wavelenghts Signal

User Interface icon for settings is a cog Setting

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.

Hovering over newegg's shopping cart displays "Empty Shopping Cart", which is written in the title tag.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.