There are many aspects that make for a great icon design. All of them play an important role in creating the best user experiences on websites and mobile apps. The icons that are designed well generally have three major qualities, namely form, recognition, and aesthetic unity.
Each of these qualities must be considered while designing a new set of icons. It must start with the general aspects and then move towards the specifics. Even if the intention is to create a single icon, these three qualities can still be incorporated in it. The three qualities are elaborated below:
1. Form
This is the foundational structure of an icon and indicates how it has been made. In order to make a circle, a square, a vertical rectangle, or a more organic shape, it is necessary to have an underlying structure. Simply drawing a line around the major shapes will not give the desired output.
A visually stable foundation for designing icon is created by the primary geometric shapes. They are the square, the triangle, and the circle. For example, in order to create an animal’s head, one may draw two triangles and two ellipses. One may begin a drawing by sketching the simplest and largest shapes.
Then he or she can start refining towards greater detail. The key is to start with the simplest shapes and then go on adding more detail. One must always remember that only the detail needed to communicate the concept is required.
2. Recognizability
It is an outcome of the essence of an icon or a particular aspect that makes an icon unique. How easily the user understands the object, idea, or action depicted by the icon ultimately decides its success. Recognizability involves presenting the properties that the user commonly associates with the idea.
It can also involve some unexpected and unique elements. One must understand that recognizability is not all about comprehension of an object, idea, or action. It is also about recognition of the unique icon set. Considering this, it can be concluded that aesthetic unity and recognition can often overlap.
For example, there are two dogs having their own unique color, ear shape, and head shape. They can still be recognized as a part of the same set. This is owing to their shared elements of design and style.
3. Aesthetic unity
Aesthetic unity refers to the elements shared within a single icon and across an icon pack. These elements can be rounded or square corners, limited and consistent line weights, and the specific size of corners. They can also be the style, the color palette, and others. Aesthetic unity can be achieved when the designer repeats the choices throughout the icon pack.
This is usually done with the intention of visually keeping it together as a whole. For example, in three dog icons, there can be common elements. They may include rounded corners, thick stroke around the faces of these dog icons, and their heart-shaped noses. Thus, the common design and style elements shared by the dog icons create aesthetic unity.