The image of the plane you see on a send button or the shopping cart you see on Amazon’s website are all part of the family called icons. UI icons are the graphical representation of a functionality, concept, a specific entity, and the application itself. An icon can resonate with the real-life object, like a lock to denote that it will unlock and lock the particular feature of an application. The user does not need to be explained about the meaning of the lock symbol. They could easily relate to the real-life instance.
Icons are grouped into different categories based upon style, themes, interaction, and various other aspects. Let’s learn about them.
Resemblance Icons- Icons that depict or represent a physical object are categorized under resemblance icons. The functionality of the object you choose will define the functionality behind the icon as well. Like, clicking on the Home icon takes you the landing page or the main screen of the application. The magnifier icon depicting search, are all examples of resemblance icons.
Reference Icons- The icons that define the object or an action via an analogy falls under the category of reference icons. Using the clam action as an icon to depict the zipping action of a file, is one of the examples of reference icons. Broken wine glass on the cartons represents fragility.
Arbitrary Icons- The icons bear no resemblance to the physical object or the concept behind them. They are inducted into the user’s mental model by repetitive usage and exposure to the icons. The hamburger icon is one of the most common examples. Similarly, the floppy disk representing the save action has also been set as standard.
Icons can further be categorized based upon their visual appearance.
Flat and Semi Flat Icons- The icons based upon the minimalist and the 2d dimensional approach of design falls under this category. They are clean, simple, and easy to recognize. But there is a lot of effort that goes behind describing the visual details of these icons. Color, contrast, and shadow need to be in place to help them separate from other UI elements present on the screen.
Skeuomorphic Icons- The icons that are designed to provide a more natural and 3d effect on the interface are called skeuomorphic icons. The App Icons or the icons used to design gaming interfaces constitute such icons.
Glyph icons – The typographic symbol that takes the form of a character for an icon falls under glyph icons. The ‘@’ is one of the examples. The BlueTooth icon is commonly used.
It doesn’t matter which set of icons you choose to represent the functionality; it can range from a fruit to a fortune cookie. But the usability of the interface should not be affected. Learn more about icons, the guidelines in our upcoming articles.
Let’s learn the importance of icons in detail- Why is Icon Design Important in UI Design
