The image of the plane you see on a send button or the shopping cart you see on Amazon’s website is all part of the family called icons. UI icons are the graphical representation of a functionality, concept, specific entity, and the application itself.
An icon can resonate with a 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 on style, themes, interaction, and various other aspects. Let’s learn about them.
Types of UI Icons
1. 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 to the landing page or the main screen of the application. The magnifier icon depicting search is an example of a resemblance icon.
2. Reference Icons
The UI icons that define the object or an action via an analogy fall 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. The broken wine glass on the cartons represents fragility.
3. 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.
4. Flat and Semi-Flat Icons
The icons based upon the minimalist and the 2D-dimensional approach of design fall 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.
5. 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.
6. 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 UI icons you choose to represent the functionality; it can range from a fruit to a fortune cookie. However, the usability of the interface should not be affected. Learn more about UI icons, and the guidelines in our upcoming articles.
Let’s learn the importance of UI icons in detail- Why is Icon Design Important in UI Design
Join the best designing agency, where every icon is meticulously crafted to enhance user understanding and engagement. Transform your UI design with the best UI UX design company in Mumbai – ProCreator!
