What Are UI Icons? – Types & Examples

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 represent 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 explain the meaning of the lock symbol, and they could easily relate to real-life instances.

Icons are grouped into different categories based on style, themes, interaction, and other aspects. Let's learn about: Resemblance, reference, arbitrary, flat and semi-flat, Skeuomorphic and glyph icons.

Resemblance Icons- Icons depicting or representing a physical object are categorized under resemblance icons. The functionality of the thing you choose will define functionality behind the icon. Like, clicking on the Home icon takes you to the landing page or app's main screen.

Reference Icons- The 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 reference icons. Broken wine glass on the cartons represents fragility.

Arbitrary Icons- The icons bear no resemblance to the physical object or their concept. 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.

Flat and Semi Flat Icons- The icons based upon the minimalist and the 2d dimensional design approach fall under this category. They are clean, simple, and easy to recognize. But there is a lot of effort behind describing these icons' visual details.

Skeuomorphic Icons- The icons designed to provide a more natural and 3d effect on the interface are called skeuomorphic icons. The App Icons or the icons used to create 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, and the BlueTooth icon is commonly used.

Go read more, go to:

Originally Published at ProCreator Blog, Written by — Sandesh Subedi.