Icon University

The five rules of good icon design

Over twelve years, our team of 8 icon designers applied these principles to create legible, efficient, consistent icons.

Icons can closely align with Dieter Rams' celebrated principles of good design, which reflect a clear commitment to clarity ("Good design is unobtrusive"), simplicity ("Good design is as little design as possible") and user-centered functionality ("Good design is honest"). But good icons also have their own rules, so let's try to define them one by one.

1 – Good icons are universal

Icons must communicate precise and relevant messages, so we need to choose the object or action that best fits what we're trying to represent.

It's crucial to choose images that are widely understood and don't rely heavily on cultural or contextual nuances. A universal icon transcends language barriers, ensuring that its meaning is clear and accessible to a diverse audience.

Even if an icon is intended to communicate an abstract item or action such as "Wi-Fi", "Like" or "Download", there are already a number of widely used visual standards that are inherently associated with those concepts.

Packaging indications using Sharp Solid icons

2 – Good icons are simple

Each icon must be designed as simplified as possible in order to avoid using irrelevant information, but without falling into abstraction.

Simplicity in icon design is essential for clarity and quick recognition, especially in contexts where space is limited or users need to process information quickly.

The simpler the icon, the easer it will be to recognize

However, we also have to be careful with excessive abstraction or unnecessary details. Icons must retain enough recognizable elements to convey their meaning without being overly complex or difficult to decode. Achieving this balance ensures that the icons remain effective at all times.

Braun icons by iconwerk are a bit more detailed than the usual set, but still legible in context

FontBase homepage icons are quite abstract, but they serve their purpose as visual indicators

3 – Good icons are legible

Icons must allow effective reduction and work in more "extreme" contexts without compromising legibility.

This reduction is particularly important to ensure that users can quickly and accurately interpret the meaning of an icon, even when it's displayed at a very small size or in poor visual conditions.

By enabling effective reduction icons maintain their adaptability, which is especially valuable in today's digital landscape, where icons are used in a variety of contexts from mobile apps with limited screen space to responsive web design.

Micro Solid icons demonstrating their legibility at small sizes

Core Line icons are perfect for long navigation menus where several elements coexist and legibility is vital

4 – Good icons are nonverbal

Overall, icons must avoid the use of alphabetic characters, since they tend to depend on a specific language and cultural context.

As we've seen before, icons are visual tools that transcend language barriers, allowing for a more accessible experience regardless of the user's cultural background. That's why icons have symbolic value.

Controller icons are easily recognizable despite their level of abstraction

However, there are some exceptions. For example, the use of the letter "P" to represent "Parking" or "I" for "Information" has become widely accepted in a variety of contexts. Even the word "STOP" is familiar enough worldwide. But in any case, these exceptions should always align to established conventions.

5 – Good icons are consistent

A set of icons must be designed on the basis of well-defined construction guidelines, where a uniform structure and visual constants coexist.

By maintaining consistency in size, shapes and overall style, users can easily associate icons with specific experiences. This uniformity provides a cohesive and intuitive language within a project, whether you're designing an interface, building a signage project or preparing a customer presentation.

Core Line construction guidelines, replicated across the whole set

In addition, consistency helps facilitate learning, as users can transfer their understanding from one icon to others within a specific set, encouraging efficient navigation and interaction.

Using a harmonious icon set like Platinum can enhance user experience

Flex Duo icons, all based on curvy and organic shapes for consistency

Form follows function

And that's about it! With these basic notions you already have enough knowledge to begin your journey in icon design. At the end, it all comes down to functionality. If an icon is simple, recognizable and carries a substantial message, it will inevitably be beautiful.

At Streamline, we're committed to continue sharing our passion for this unique field, so keep an eye out for upcoming articles to delve deeper into the peculiarities and more technical aspects of icon design. For now you can continue your journey with our article on grids and key shapes.