Why “good / bad” design guidelines are not always suitable for creating icons

Instagram posts or articles on design blogs provide examples of the “right” and “wrong” way of designing. While there are reliable and proven patterns that often work better than others, you shouldn t tell product designers (especially beginners), “This is the only surefire way to mark up a form, card, use color or typography,” and so on.

Design is not a one-size-fits-all solution.

I have collected several examples of such dubious recommendations, but out of respect for the authors, I deleted information about them.

“The color of the car can be any, provided it is black.”

– Henry Ford

Using the right icons is not easy

I came across these two Instagram posts. In them, designers talk about the correct use of iconography. Of course, there are usability considerations when using icons in button containers or navigation tabs, as well as in other interface patterns. However, to argue that icons should not be colorful or abstract is to ignore iconography as part of the product s corporate identity.

Unique visual brand identifiers

While simplicity in design is often a powerful tool for managing customer behavior, adding visual uniqueness can help your brand stand out from the competition. For example, below we see how well-known companies have used icons to reflect their brand identity. Using forms that are too simple, like the Instagram post mentioned above, is only suitable for some contexts and harmful for others. Before you follow these rigid guidelines, be sure to research the context of using the icons and determine what works best for your brand.

Using iconography with buttons

Now you can argue that the above example is more of an illustration than an icon, but the two often overlap. Notion and Facebook (among others) use complex, mixed-color symbols for navigation. This can help customers quickly identify an object by color and symbol.

Creative solutions

These two Instagram posts grabbed my attention because there are ways to mitigate two problems with their proposed “right” way of designing icons.

What does this icon mean?

I agree to add a label for clarity if you doubt the icon will be clear to your users. However, there are more than two simple solutions (add / not add a label).

What if you pair your navbar icons with tags, and then remove the tags after the customer reaches the engagement benchmark? That is, you start by using labels, and after making sure the user is familiar enough with your product, you fire an event that hides the labels, and voila, you re satisfied with both use cases.

How about showing labels on hover or active state? You can display the label of an icon when tapping / clicking on it, giving this button the current context.

There are other ways to deal with missing labels, for example, flagging during onboarding or a long press that allows the client to hide / show the labels, although this comes at the cost of overwhelming onboarding instructions.

The point is to look for creative alternative solutions to interface problems, rather than being limited to “right / wrong” choices.

Devices and context

The above example may lead a designer to choose an icon that is too simple, when he might prefer a more descriptive icon / illustration. Responsive icons are a responsive solution to gradually display the correct icon in the right context.

Knowledge sharing with the design community

The dissemination of knowledge is important. It helps designers grow. We need to be careful not to absolve design decisions by calling them right or wrong. Design is a complex and evolving discipline, so we are constantly learning which solutions work, however, you also need to consider where and when the rules should be changed.

It is better for guideline writers to discuss why certain approaches have been successful for their product, rather than recommending them as the one-size-fits-all solution for all products and patterns.

Thanks for reading, friends!