Icons can add so much personality to even the most minimalist designs. Mastering the use of icons allows you to use them to enhance user experience and actually make your products more usable.
Understanding the types of icons (glyph icons, outline icons, universal icons, conflicting icons, and other types), how they’re best used, and what makes a “good” icon will help you implement them effectively in your UX designs.
Types of icons
An icon is an icon, right? Well, not so much. There are a lot of different kinds of icons out there, and understanding what each type is and what they’re suitable for is the first step in using them in your designs.
Originating from the Greek word for “carving,” glyph icons are graphical symbols and are usually solid. They can be scaled to whatever size you need and can be customized with different colors and shadow effects. Because they’re generally a solid color, glyph icons can work really well at small sizes, but may not hold much visual interest at larger sizes. You can find examples of free glyph icon sets at Fontawesome, Glyphicons, or Fonticons.
Colored icons are just that — colored. They can either have a solid color or gradient color scheme, and can make icons appear less formal and more playful. The downside to colored icons is that they can be more challenging to integrate into a product’s aesthetic and can even distract users from meaningful content. Because of that, overuse is generally detrimental to UX.
While colored icons generally use one color (or a gradient), duotone icons contain two similar colors that are distinctly separated. To create one, you take an icon, split it’s elements into two layers (such as an outline and fill space), select a starting hue, experiment with layer opacity, and a duotone icon is born.
Duotone icons can add some extra visual interest to your designs without overpowering them. Just beware that at very small sizes, they can be hard to decipher.
Outlined icons are created by vector strokes, and are empty inside. They have pros and cons. On the upside, they’re clean, minimalist, and can look very polished. On the downside, they can take users more time to process and recognize.
Universal icons are immediately recognizable, and usually represent repetitive actions like home, print, or search. Universal actions in your product should be represented with universal icons to avoid confusion.
For example, the search icon is traditionally a magnifying glass. Getting creative by using binoculars instead is only going to confuse users. While you can adjust the exact style of the icon to fit your design, the basic shape and idea behind it should be the same.
Unlike universal icons, unique icons represent unique functions or features. The downside to using them is that they can be hard for first-time users to figure out. If you use them, make sure that you include text labels so users don’t have to decipher their meanings.
Logo icons would be one example of unique icons. The Sketch logo is a stylized diamond. For someone unfamiliar with the program, the diamond will be meaningless. But for those who have used the product, it’s immediately recognizable. Keep that kind of impact in mind when using unique icons.
In some cases, you’ll have to decide between multiple icons that commonly represent a single concept. These are called conflicting icons. For example, to like a post on Facebook you’d use a thumbs up, but on Instagram it’s a heart, and on still other sites it’s a star. While you can use any of those icons in your design, the key is to be consistent and only choose one for your interface.
Conflicting icons can sometimes have different meanings on different sites. Going back to the heart icon, on Instagram it likes a post, but on Facebook it loves a post, and on sites like Etsy it will add a product to your favorites list. That doesn’t mean you shouldn’t use a heart icon; just be aware of the different meanings users may attribute to it and make sure your usabe is clear and consistent. Labels can help remove any doubt about the icon’s meaning.