Design, UI, UX, Insights, Inspiration
UI Icons: Explaining Every Single Type with Inspirational Examples
UI icons can be grouped based on recognizability, function, and graphic style. Let’s see some excellent examples for each.
UI icons serve to communicate concepts with the power of symbolism. They show pictorial resemblance with an object or a function they represent so they can support the user interface and provide a successful flow. The most important benefit of the UI icon is its ability to replace text and strengthen the usability of the product as people perceive images way faster than words.
When it comes to classifying the types of icons, we take into consideration the following factors:
- Recognizability: How easily do users recognize the icons and how literally or figuratively the icon depicts the function? This includes: universal icons, conflicting icons, unique icons, resemblance icons, reference icons, and arbitrary icons.
- Function: What is the role of the UI icon in the final design? This includes: clarifying icons, interactive icons, favicons, decorative icons, app icons, and SVG icons.
- Visual Characteristics: How understandable, attractive and detailed in graphic elements is the icon? This includes: flat icons, skeuomorphic icons, glyph icons, duotone icons, colorful icons, and outlined icons.
When you choose the right icons for your design, you consider how the different icon types work with the overall design what functions they perform and how they enhance the user experience.
This is why in today’s blog post, we’re going to look at all UI icon types with many inspirational examples.
Table of Contents
1. UI Icon Types by Recognizability
Examples of UI Icon Types Based on Recognizability and applied image metaphor
We can group icons into different categories based on recognizability, function, and graphic style. The first category features 6 types of icons: 3 types related to how easily users recognize them and 3 types related to how literally or figuratively they depict an object or a function.
- Based on recognizability: Universal icons, conflicting icons, and unique icons.
- Based on applied image metaphor: Resemblance icons, reference icons, and arbitrary icons.
Now let’s see some examples for each.
Universal Icons
Immediately recognizable, universal icons are the standard symbols for repetitive actions like home, search, music, profile, save, exit, refresh, etc.
Tab Bar Navigation Universal Icon Set by Dima Groshev
Most UI designers prefer to use universal UI icons to make products more intuitive. For example, a house with a roof is the universal symbol for the home icon. Anything else may confuse the user.
- Universal icons are standard and generally accepted.
- They are immediately recognizable.
Conflicting Icons
In some cases, there might be multiple icons that represent the exact same function or concept. If these icons are equally recognizable, this means they are conflicting icons.
For example, we know two equally common and recognizable Share icons: the curved arrow and the three connected circles. Depending on the social media platform, the icon for liking posts can also be a heart, a star, or a hand with a thumb up.
- Conflicting icons depict the same function.
- They are equally common and recognizable for the same function.
Unique Icons
Just as the name suggests, unique icons represent unique functions and features. They are always new for first-time users and wouldn’t mean anything to the user until they become familiar with the concept they represent. The purpose of the unique icon is to establish itself as the only icon that represents a particular function. In the long run, users familiar with the function will immediately recognize the unique icon.
The best example would be logo icons. Users who are familiar with a product will immediately recognize the unique logo icon of YouTube, GitHub, Slack, Sketch, or Instagram. Respectively, users who have never used or heard of Slack, won’t recognize the unique icon.
- Unique icons represent unique features.
- They are usually logo icons, related to a particular brand.
Resemblance Icons
In terms of applying image metaphor, resemblance icons are the direct depiction of a physical object or a concept that the icon represents. This means the icon performs the same functionality that the illustrated object does.
The obvious examples are the Home icon that sends you back to the home screen, the magnifying glass icon that represents searching, and the trash icon where you can find your deleted items.
- Resemblance icons are literal.
- They resemble an object that performs the same function as the icon.
Reference Icons
While resemblance icons use a literal approach when it comes to visual depiction, reference icons prefer analogies. This icon type usually illustrates an object or a concept that represents the function of the icon.
For example, the maintenance icon usually looks like two crossed wrenches, immediately associated with engineering, repair, and overall maintenance work. Same as gear for the Settings icon, a pencil for the Edit icon, and a clam for compressing (zipping).
- Reference icons use figurative analogies and associations.
- They use concepts that represent part of the icon’s function.
Arbitrary Icons
This icon type neither resembles the object that performs the function nor represents it in any way. Its recognizability comes entirely from the power of habit and the established mental model by repetitive usage.
For example, the Floppy Disc icon represents the Save action. Many would argue (and rightfully so) that the floppy disc is a reference icon as it depicts an object connected to the action of saving files. However, this is not the case with younger users who have never used or even seen a floppy disc, yet they still recognize the action and immediately know what action it performs. They just know the meaning connected to this image because they’ve used it for years.
Another common example is the hamburger Menu icon. Everybody immediately recognizes it as the navigation drawer or side menu from the left side of the screen they need to click on to reveal the list of navigation options. Sadly, no hamburgers there.
- Arbitrary icons are recognizably based on convention and habit.
- The object they depict rarely has any connection to the icon’s function.
2. UI Icon Types by Function
Examples of UI Icon Types Based on their Role in the Final Product
Another way to group icons is based on the function they perform in the final design. In this category, we can separate icons by interactivity, format, and specific role, as follows:
- Clarifying icons
- Interactive icons
- Favicons
- Decorative (illustrative) icons
- App icons
- SVG icons
And we’ll look at some beautiful examples by UI/UX designers that best depict each type.
Clarifying Icons
These icons serve to explain particular features. They are usually illustrative elements combined with a short explanatory copy and a button. This is why clarifying icons are rarely interactive.
Designers use them in order to activate multiple elements of perception and provide a better context for the users. In most cases, users will immediately recognize the concept from the icon itself without the need to pay any attention to the copy.
- Clarifying icons work in combination with a copy and a button.
- They aren’t interactive.
Delivery Service Set by Desire Creative Agency
Colorful Set by Krestovskaya Anna
Healthcare Database Icons by Benjamin Oberemok
SoFi Money Product Design Finance Icons by Phil Goodwin for Unfold
Interactive Icons
Interactive icons are directly involved in the interaction process as they are always clickable and perform the function they depict. Since they are usually part of the main navigation, they are often animated. These UI animations are triggered when the user interacts with the icon by hovering or clicking.
- Interactive icons perform the function they represent.
- They are always clickable.
Tab Bar Animation by Mohammad Reza Farahzad for Oniex
Button Hover Animation by Ayhan Altinok
Download and Like Icon Animation by Alex Bender
Favicons
This icon type serves a very specific purpose. Also known as the URL icon, it represents a brand as a small icon in the URL browser tab and the bookmark tab. It gives a quick visual representation of the website you’re browsing. Usually, the favicon is a very simplistic version of the original logo so users could read it easily at such a small size.
- Favicons represent a brand in the URL browser tab.
- They establish a quick visual connection.
Progress Indicator by Cameron McEfee for Sentry
Decorative and Illustrating Icons
This icon type serves the overall aesthetics of the product rather than performing a particular function. When done right, decorative icons attract users with their visual appeal and beautiful design. Think of item icons in mobile games, or weather icons.
- Decorative icons are aesthetically pleasing to the audience.
- They are purely visual and add to the user experience.
Mobile Game Interface Icons by Jasmine Phong
3D Fintech Icon Collection by Diana Hlevnjak
Vertt Mobile App Icons Set Colorful Illustrative Concept Icons by Tubik
Frosted Glass Weather Icons by Zvonimir Juranko
App Icons
Each app you have on your device has a shortcut icon that you can see on your display. These shortcut icons are known as app icons. They usually feature the product logo or an abstract image with the brand colors and elements.
- App icons serve as product brand signs on each platform.
Google Neumorphic Display Interface Icons by Maxim Kulikovski
VStack iOS App Icon by Matthew Skiles
iOS App Icon by Alex Vanderzon
SVG Icons
SVG stands for Scalable Vector Graphics and is used to define vector-based graphics for the Web. They are XML code blocks directly served to and rendered within a browser.
- Scalable Vector Graphics
- Responsive XML-based vector images
- An SVG is not a fixed-size pixel image
3. UI Icon Types by Visual Characteristics
Examples of UI Icon Types Based on Visual Style
The last category groups icons by their visual style rather than function or format. They serve to fit the overall design of the product and depend on the designer’s choice and creativity.
The most common visual styles for icons include:
- Flat icons
- Skeuomorphic icons
- Glyph icons
- Duotone icons
- Colorful icons
- Outlined icons
Simplicity, details, colors, contrast, shadows, and lines are a few of the characteristics that determine the visual style of an icon. Now let’s see some examples for each type.
Flat Icons
The most common UI icons usually have a flat or semi-flat style. They are clean, simple, and easy to read as they lack details and have high visual contrast.
- Flat icons are simplistic and lack details such as gradients and shading.
- They are very easy to recognize and read.
Google Iconography by Dmitri Litvinov
TruckMap Iconset Square Colorful Icons by James
Testportal animated Icons by Maria Brilkova for Unikorns
PayPal Illustrative Icons by Dmitri Litvinov
Eleyo blog icons by Aleksandar Savic
Skeuomorphic Icons
In contrast to flat style icons, the skeuomorphic icons offer more detailed and realistic images. They use gradients and shades to create a more natural 3D look of real physical objects. You will often find this type of UI icon in mobile apps and games.
- Skeuomorphic icons have a realistic 3D look.
- They are less flexible and practical for digital interfaces.
3D Glass Animated Icons by Emmanuel Julliot for Anagram
Airtable Icons Frost Glass by Dmitri Litvinov
Colorful Frost Glass Icons by Thomas
Glyph Icons
In its essence, a glyph is a typographic symbol that takes the form of a character. This refers to alphabetic and numeric fonts, as well as non-character fonts. When it comes to icons, glyph icons usually refer to universal simplified minimalistic outline or silhouette icons, such as the Material Design icons.
- Glyph icons are simple, minimalistic, single-color silhouette icons.
- They are bold and geometric system icons.
Glyph Icons by The Noun Project
Safari System Glyph Icons by Makers Company
Duotone Icons
Not a particular visual style, as duotone icons can be flat, skeuomorphic, outlined, or another style. The only particular thing that stands out is that they are made from two tones of colors. It can be two contrasting colors or two shades of the same color.
- Duotone icons have two colors.
- This can be applied to any visual style.
Animated Icons for Synthesized Website by Tubik
Plumpy Animated Icons by Denis Starko for Icons8
Duotone Animated Set by Iconly Pro for Piqo Design
Colored Icons
Colored icons go a step further from duotone icons and use multiple colors to create fun, more illustrative images. Not related to a particular visual style, colored icons can be flat, skeuomorphic, outlined, and even cartoony.
- Colored icons use multiple colors to add more detail.
Isometric Icons by reseven std
Colorful Icons by Leo Alexandre
Icons for Mobile App by GFX fuel
Outlined Icons
And the last UI icon type based on visual style is the outlined icon. Clean and minimalistic, these icons look very polished as they’re created by vector strokes.
- Outlined icons are constructed by simple vector strokes and are empty inside.
Weather App UI Concept by Yup Nguyen
Animated Minimalistic Outline Set by Clay
Animated Icons for Mobile App by Iconly Pro for Piqo Design
Navigation Menu Icons by James
Conclusion
We can easily conclude that there are a lot of different kinds of icons, and understanding what each type is and what they’re suitable for is the most important step in using them in your designs and making your interface usable and navigable.
In the meantime, you may also be interested in some of the related articles: