1. Web Design
  2. UX/UI
  3. Icon Design

Bad Icon Design: 3 Pitfalls and How to Avoid Them

Scroll to top
Read Time: 2 min

Let’s look at three common mistakes and pitfalls when designing icons, and ways to avoid them!

Pitfall 1: Icon is Too Complex

An icon may be designed to represent a complex topic but it should avoid being overly complex itself. Complexity affects scalability and can lead to it being unrecognizable. An effective icon is meant to be recognizable and unique at a glance, at whatever scale. 

Take a look at this simplified “Lightly” icon; it scales more effectively and still conveys the same concept. 

iOS 6 vs iOS7 iconiOS 6 vs iOS7 iconiOS 6 vs iOS7 icon
Lightly icon redesign for ios7 by Jay Kwong

Solution: Use simple, unique shapes that best convey the concept without any superfluous details. Get to know the scalability requirements for your icon and design for your constraints. Simple and distinctive icons can be highly effective. 

Pitfall 2: Icon is Designed in a Silo 

If your icons look like they wouldn't fit together visually side by side, you may have been designing the icons in a silo. Icons for a digital product should fit in with the overall visual strategy to look and feel like a family. This is a common pitfall that can happen if newer icons are designed over time and by different designers. 

Facebook’s latest mobile icon set has a cohesive look due to the use of rounded shapes and simple line styles. 

Facebooks cohesive iconsFacebooks cohesive iconsFacebooks cohesive icons
From Facebook and Instagram get redesigns for readability on TechCrunch

Solution: Design icons as part of a set. Use common perspective, line weights, color choices and styling to ensure a cohesive feel. Approach the icon design by focusing on the context where it will live. 

Pitfall 3: Icon is Designed From Scratch

Icon libraries exist for a reason. Use references to get a sense of what visual metaphors exist for your concept, and don’t make assumptions about what works for an icon before gauging the existing landscape. An icon designed from scratch may be confusing to users from differing cultures and backgrounds. 

“Settings” icons are typically depicted by a gear, but that’s not always the case.

from icons8comfrom icons8comfrom icons8com

Solution: Utilize existing icon libraries to start brainstorming your icon concept. Be aware of any potential differences or alternative meanings of symbols across cultures as well as consistency with shapes used for common icons.

Learn More About Icon Design

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.