Icon design is a simple and fast way to Establish communication between the interface and the user.

However, icon design isn't something simple to do and you shouldn't underestimate any part of your process.

Read on to understand how to develop icons with more consistency and in a more organized and planned way.

Why icon design?

Icons are part of our daily lives even before the creation of smartphones, apps and other digital products.

As Traffic signs are a beautiful example of how icons are important forms of communication.

In this sense, icons are small symbols that can Communicate various information, whether driving a car or for the interaction of an app.

In digital interfaces, space for content can be quite limited. In this way, the use of icons becomes an important way to describe resources, inform the user, and even to reinforce the brand's identity.

This importance justifies the care that must be taken when developing entire icon systems or just a few isolated icons. To this end, it is important to understand some attributes and principles so that, when finished, the icons fulfill their function with excellence.

Reading Tip: Understand How to Use Design Sprint

Fundamental attributes of icon design

For the successful icon design of an interface, it is important to keep in mind some fundamental attributes: Form, Aesthetic Unity, and Recognition.

Shape

The form is the base structure of the icons. In this sense, an effective icon design is created from elementary geometric shapes. We will see more details throughout this article.

Thus, looking beyond the details, what geometric shapes can we identify in the icons around us? Squares, rectangles, triangles, or ellipses?

Understand how structure drawings based on these geometric shapes are the first step towards efficient icon design.

Aesthetic unit

Aesthetic unit is what is the called standard used between several icons in the same set.

The icons should show consistency and have aesthetic standards to indicate that they are part of the same group.

In this sense, it is important to pay attention to pWeight of lines, corners, angles, style, colors, etc., so that aesthetic standards can be created that standardize the developed icons.

Recognition

Recognition is the basic attribute for efficient icon design.

This attribute determines that the icons must be understood by the user, clearly communicating the message that one wishes to send. Whether it's an action, an idea, or just an aesthetic detail that makes up the identity of your icons.

In this sense, the attribute of recognition and that of aesthetic unity can overlap, and this often happens.

If the user is unable to recognize the icon present in an interface without understanding what it means, the basic purpose of icon design has not been achieved.

8 principles of icon design

For creating icons efficiently, there are some important principles that must be taken into account.

1) Clarity

The principle of clarity, in icon design, is essential to create the attribute of reconnaissance.

We must remember that the main purpose of the icon is to communicate a message to the user. Thus, if there is difficulty understanding an icon, it is necessary to take a step back and evaluate a new way of designing it.

Clarity, too, can Vary according to the audience that reads the icon. The musical notes in a score, for example, are clear to musicians, but not to those who haven't studied this type of theory.

That way, the clarity of an icon lies both in its design and in the experience of its audience.

2) Take into account your audience and persona

In line with the principle of clarity, another important premise to consider is your audience and Persona of your interface.

In this regard, it is important to take into account cultural, social, and particular aspects of the users of the interface and product. What may be kind to one group of people may be offensive to another.

That way, make a survey before starting to develop the icon design for your interface. And, like many aspects of UX Design, trial The icons with users to understand its effectiveness.

Reading Tip: The Importance of Persona in Your UX Design Projects

3) Readability

An icon's legibility is different from its clarity.

While clarity works with interpretive and cultural concepts, legibility acts more on the issue aesthetics properly said.

In this sense, the icon designs must be legible, their details must be clear and the image quality must be high for better understanding by the user.

Work with spaces and line widths appropriate for the desired icon size.

Also, develop the icons to the exact size for which they will be used. This means that you must avoid the temptation to resize the icon to use it in various sizes.

4) Alignment

The principle of alignment is important in UI Design as a whole and should not be different when it comes to icon design.

In this aspect, alignment means that the icons have poise in its design and among other icons from the same group.

It is important to always check the alignment of the icons because, in addition to making the design more consistent, the aesthetic and visual aspect do not remain unbalanced.

To ensure the alignment of the icon design, use the necessary tools, but also Use your eyes. Perfect alignment is not always visually pleasing to the eye.

Reading Tip: Alignment is the Invisible Concept of the Interface

5) Brevity

Brevity means Don't draw too many details on the icons, to the point of leaving them confused and polluted when applied to the interface.

Remember that icons are generally used in small sizes, so many details may end up blurring the image.

In this sense, try to maintain the simplicity of the items and work with colors and contrasts if you need to make clear the identity of a brand or product in its icons.

6) Consistency

Consistency is another important principle in UI Design as a whole and, without a doubt, it ends up being essential for icon design as well.

Thus, the principle of consistency determines that your icons must have standards that makes them recognizable within a group or system.

This means that when arranged side by side, the icons must demonstrate a unique identity, without some distinguishing themselves from the group with different traits or colors.

In addition, it is important to maintain the consistency of the icons with the rest of your interface, its elements, and other content. All of this guarantees the identity of its interface and makes the user have a more pleasant experience without cognitive dissonance.

To ensure the consistency of the icons, consider some factors such as:

• Filling;
• Width of the lines;
• Colors, shadows and light;
• Perspective;
• Sizes and shape.

7) Personality and identity

What makes your icons unique or how do you make them convey the identity of the brand or product?

A personality of the icons brings a sense of exclusivity.

As much as a magnifying glass is the universal icon of Busca, you can add aspects of your brand's identity to give personality to this icon.

8) Easy to use

The development of an icon doesn't end when your design is ready. It is also necessary document and create a user manual.

This way, creating new icons is easier since there are pre-determined guidelines for their development.

In addition, test your icons to understand their efficiency in interacting with users. Icons need to be easy to use by designers and developers as well as platform users.

Reading Tip: Understand How Cognitive Bias Can Affect Your Projects

Step by step for icon design

So far, we have listed important attributes and principles that will help you design icons for your interface.

However, although the theory is essential, Practice also has great value.

Therefore, in this section, we will describe a small practical step by step so that you can develop icons using the attributes and principles described.

1) Before getting your hands dirty

Before starting to draw and create, it's important Think and plan some aspects that will make the difference for icon design:

• Understand and be clear about What set of icons should you develop. That way, understand where they will be used, which icons are real representations and which are metaphors;
• Think about appropriate metaphors for icons. Use dictionaries, find synonyms, and familiarize yourself with definitions and concepts. The metaphors must be appropriate to clearly convey the message of the symbol to the user;
• Search for references. Look for icons that resemble those you will develop and use universal icons, such as the magnifying glass for searching and the heart for enjoying.

With this information and guidance, the development of the icon design will be better structured and informed.

2) Establish the size of your Grid

The Grids are essential tools for digital design. They allow you to easily adjust the proportions, alignment, and consistency of your icon design.

Thus, it is important to establish what will be the sized from your Grid.

Usually, the icons are displayed at 24 x 24dp. Therefore, use these dimensions as the basis for the size of your Grid.

However, you can use other icon sizes, ranging from more (28, 30, 32dp) or less (22, 20dp).

Remember that these dimensions are total and the icon design should not fill all that space, otherwise there is no breathing zone between the boundaries of your icon.

In this sense, establish within the Grid a living area and a Negative space — a blank area. In the case of a 24 x 24dp grid, the standard is to consider as a living area the dimensions of 20 x 20dp.

Of course, if necessary, the icon design can go beyond the living area and fill a part of the negative space. But the purpose of this space is to create a breathing area around the icon, so use this space only if extremely necessary.

Reading Tip: Understand More About the Grid System

Aligning the icons in the Grid

Generally, the icons are aligned with downtown of the Grid, whether they are square, circular, rectangular, or triangular icons.

As standard, circular icons extend to the limits of the living area. In the case of other forms, avoid this total extension.

In addition, notice that within the 24dp grid, two rectangles are formed: a vertical one (20 x 16dp) and a horizontal one (16 x 20dp).

Use these two rectangles for icons with vertical and horizontal orientation.

3) Use simple geometric shapes

Identify how you can draw the icons using only simple geometric shapes such as squares, rectangles, circles, and triangles

Even if your icon has a more organic final shape, start drawing with this approach.

When it comes to icon design, trying to create these small drawings by hand can make the final result look a bit Confused and messy.

So start with the geometric shapes and then adjust to create more organic shapes for your icon.

4) Be precise with angles, corners, and curves

Don't draw icon details such as angles, corners, and curves by hand. Use the Grid and precision to make the icon design more consistent.

In this sense, just be careful that the mathematical precision of these drawings does not leave the icon looking too mechanical.

Angles

In most cases, use 45º angles, or their multiples, for sharper results in your icon design.

This pattern is recognized by our eyes and is quite pleasant to see.

Cantos

The rounded corners, as standard, use a radius of 2dp.

However, use rounded corners on the outside of the icons and never on the inside of the drawing

Curves

Don't rely on your motor ability to draw curves and circles freehand.

Use the tools of ways that exist in design software to obtain more precision in curve drawings.

Reading Tip: How Does Typography Contribute to the User Experience?

5) Maintain trait consistency

For icon strokes, the size of 2dp.

However, it is possible to establish a hierarchy In the stroke sizes, giving more suppleness for icon design.

To do so, establish a hierarchy every second and have no more than 3 hierarchical levels.

This way, you can maintain the consistency of the line and work in a more flexible way to customize different types of icons.

6) Give clarity to the icon - Pixel Perfection

Position your icon Perfectly on top of the pixels, otherwise the design will look blurred/ blurry.

To this end, Transform X and Y coordinates into integers, avoiding decimals.

The concept of Pixel Perfection is especially relevant in smaller designs such as icons.

6) Use details and decorative elements with caution

In the temptation to create unique and creative icons, we may end up exaggerating the inclusion of details and decorative elements in the designs.

The excess, however, of these components can create complexity in the recognition and reading of the icon. Remember that these drawings are small and any detail may end up becoming a blur.

In that sense, be careful about adding details to your icons. It is not a forbidden practice, but it is something that must be done with enough nursed.

7) Colors

Usually, the best practice for designing icons is to leave them with a unique color.

However, using more colors can be interesting to create hierarchies between the icons and make visible those that are most relevant for the user.

Also, don't forget to check the contrasting between the icons and the Background from where they will be positioned.

Reading Tip: A Quick Guide to Using Colors in Your Projects

8) Don't restrict your creativity

The idea of this step by step and the tips throughout this article is to be able to provide a basic guide so that your icon design is functional and efficient.

However, this information should not be seen as restrictions on your creativity.

It is possible to follow good practices and rules and, even so, create unique and differentiated icons.

That way, Get inspired and let your creativity flow to develop unique and exclusive icons.

‍