Icons and Iconography :

The little heart images, the microphone speaker you see while visiting the web and looking at them can relate to the associated functionality and know the next action to be taken. Yes, those are icons. They are images, used contextually to communicate their functionality, while they resemble the real-life object.

Icons came into the picture with the advancement of technology and the need for a visual symbol capable of easy interaction and function at the same time. Like, Icon scissor does signify its usage to cut the selected text, even if the label ‘Cut’ is missing. An iconography is a form of visual language used for effective communication with the users when they are trying to use an Interface for a product.

Icons are simple and are meant to be understood immediately. You can see some common icons in the illustration above.

Importance of Iconography :

The flavor lies in universalism. The translation step is skipped as everybody understands it. Another advantage lies in the ability to replace text and convey the content via visual cues. Images are perceived faster than words; hence icons leave a great influence on the usability of the interface.

Icons can be used to highlights important information on the screen. They can make certain tasks stand out on the interface separately. For understandings, we can consider the telephone and mail icon on any interface.

They help a lot from the perspective of branding. You can make your products stand out by creating your own custom set of icons.

Icons can be categorized based on functionality, Visual Performance, image Metaphor. By far, we have realized that it is not something new. Somehow, we have always been aware of the symbol language from the old days, where each symbol has significance. We have just modified and tried making it more connected to the real world. Let’s take a quick swim in this ocean of visual language.

Icons-Based on functionality :

Clarifying Icons—They mark their territory on the interface. They are not used as a mode of direct interaction; they help categorize the various genres across the interface. They can act as containers to the multiple direct interactive elements.

The clarifying has a list of other direct interactive elements. Generally, they are not misunderstood, but it is good to use them with a label.

Interactive icon— They are used as the mode of direct interaction. Interactive icons are supporters of a direct call to action. Their purpose is to help users be aware and informed about the functionality attached to the other UI elements (interactive) present on the interface.

 For example— The home icon on your phone’s screen.

Decorative & Entertaining—They are useful in bringing out the aesthetic appeals of the interface. They are mainly used to present promotions, special offers, or announcements for upcoming events. They work to drive a positive user experience and attract users by setting the grounds for desirability.

App icon—Unlock your phones and look for any popular application, let’s say Amazon. The purpose of the icon is to support the brand’s identity on the digital platform. They are interactive and are custom created, matching the brand’s logos, values, primary color. It makes the brand stand apart from other applications on your phones to get them easily spotted.

Icons – Based on Visual performance :

Glyph Icon—Glyph has a typographical essence related to it. It represents a readable character used to write from the agreed set of such symbols. It is a typographical character that signifies meaning using numbers or characters. They are common and well known among users. @means at, the Bluetooth Icon, the airplane—which signifies the airplane mode.

Flat and Semi Flat Icon–  Simplicity prevails. Flat icons are 2—dimensional. They make use of simple rectangles and squares. The icon makes use of a single hue, without gradients, depth, and drop shadow. Semi-Flat icons are an upgraded form of flat icons to identify clickable areas. They make use of highlights, subtle shadows to provide a certain sense of depth to UI.

Skeuomorphic Icon—The term skeuomorphic signifies realism. It defines the objects in design that mimic the real world’s physical objects, making use of shadows, shapes, and shades to appear as a 3D image. Altogether, they use highly detailed illustrations and life-like textures, highlighting providing a realistic feeling to the icons. Recycle bin is the most common example.

Icons – Based on Image Metaphors :

Similar Icons—They are based upon simple actions and concepts which are easily understood. The ‘next’ and the ‘previous’ arrows indicate the ability to move forward and backward.

Example icon—They are based on an associated action or an object. They exemplify complex actions with the help of simple and related objects. Like a scissor represents the action ‘Cut’ an envelope represents ‘email’.

Symbolic Icon—The icons represent an object or an action with the help of an abstract version of well-defined concepts. For example—a spark symbol can be associated with electricity, and the broken wine glass signifies fragile objects.

Arbitrary Icon—They bear no resemblance to the concept we are trying to induces. They are learned by repeated exposure and usage Hamburger is a well-known example.

Key Features of Effective Icons :

some icons are nouns, some are verbs, and some can act as both. Icons like pause & download are verbs. Icons, where the human faces are involved, will always be a noun. Some are debatable like volume, where volume is a noun, but the underlying meaning of changing volume represents a verb.

To choose the right category of icons, first, identify the grammar behind it. Some key features certify the efficiency of any icon.

Clarity— Keep the icons simple and meaningful. A side glance should communicate the concept.

Consistency— keep the color palette simple & engaging both at the same time. The level of details should be consistent, providing a feel of uniformity and harmony throughout.

Label + Icon – This is always a win-win. Adding labels provides meaning and enables the predictive ability of the user in the treasure hunt. Icons should be easily recognizable. Try conducting user research at any point in the design methodology. Take the feedback and notice if they recognize the icons. Icons should not portray any rude or offensive meaning to any part of the target audience. Keep your research tight, especially in terms of geographical locations, to learn the meaning of various symbols and gestures. We would love to leave you with some of our Pro Tips, so stay tuned.

Pro Tips :

Follow a common naming convention throughout.

Make icons of the correct size as that of the interface.

Make use of basic geometric shapes.

Break it down further and discuss on minimal the icon can be made without losing the essence.

Avoid unnecessary effects, inject more realism.

Make wise of gradients if you are planning to.

Tools like an illustrator give you the freedom to choose up to 100 art-boards and set multiple formats and dimensions. The icons can then be exported as PNG, JPG, SVG, and PDF formats.