Hey! My name is Dima, I am a designer and creator of the Universal Icon Set. Not so long ago I released version 2.0 of this set. While working on version 1.0, I have not clearly defined rules for building a united icon system. As a result, there were some inconsistencies.
To avoid such situations in the future, I created the principles that can be used when building an icon system.
My list of principles is true for every style in the set (linear, solid, duotone). Thus, each style can be used separately or combined with each other, in both cases it will look harmonious.
In total, I got 12 rules. Continue reading and I will share my experience.
What is the main purpose of an icon? Quick understanding of it’s meaning. The human eye processes visual images much faster than text. It is also a universal way of understanding information in any language. So, the more accurate the metaphor of your icon is, the sooner it can be “read”. And this is the first thing to pay attention when creating icons.
It is also important to pay attention to the context of using the icon. For example, the same house icon will have different meanings for the browser interface and on the maps.
Before you start drawing, you need to think about how your icon will look. The simpler its image is, the easier it will be for the end user to understand it.
Simplicity can be achieved by using the minimum possible number of parts for creating an icon. If in the work process the icon turns out to be complex, do not be afraid to remove unnecessary details, leaving only the most important parts.
If you go to Dribbble and type “icons” in the search bar, you will see many options for different icon styles. Each style suits its needs. All icons in the set should be made in the same style, do not forget about this.
I have three different styles in my set — line, solid, duotone. In my experience, it is more than enough to cover most of the use cases for icons.
You can use two styles of icons when you need to highlight one of them. For example, for navigation a line style icons can be used, while a solid style can be used for highlighting.
Let’s move on to more technical principles. They will help us to create a system with clear rules. First of all, start with choosing a base grid. All icons will be built on its basis. Every part of your icon should be placed within a pixel grid.
The grids are different depending on the task. The most common sizes are 16×16, 24×24, 32×32, 48×48, 64×64, 96×96;
The size of the grid depends on the reason for using icons, guidelines and operating system features. For example, for Android, the grid size is 24 x 24 dp.
Trim area (or padding) indicates the area of the grid that should be avoided. The main part of the icon should be located exactly in the safe area (or live area). In most cases, this is not a rule, but rather a recommendation. You can go into the cropping area if common sense requires it. In my set, I use this area as extra space for maneuver in exceptional cases.
In special cases, this rule becomes strict. For example, when we are dealing with application icons for operating devices.
The icon’s visual weight should be the same if you want them to look harmonious. The basic shapes will help with this. They include square, circle, horizontal and vertical rectangles.
They help to simplify the creation of icons while maintaining a single visual weight for each one. The visual weight of an icon can be calculated using the formula. The values will be approximate, but this will be enough. Now let’s do some geometry!
We will start with the area of the circle:
In our case, the diameter ‘d’ is 20 px, and the radius ‘r’ is 10 px, the area of the circle is approximately equal to 314 px²
Next, we will find the sides of the square and its area:
The side ‘a’ will be approximately 17.7 px. Round to the nearest even number. In our case,18 px. The area of the square will be 324 px²
Next, let’s find the sides of the rectangle:
In our case, the side ‘b’ is 20 px, and the side ‘c’ is 16 px.
This gives us the dimensions of our main shapes:
After we have configured the basic parameters for our grid, we can start creating icons. We need to choose the line width for the icons. In order to make your icons look pixel-perfect on any device, I recommend sticking to the integer value. For example, 1 px or 2 px.
It is also important not to forget about the minimum distance between elements. It should also be equal or more than the width of the line.
When creating a harmonious set of icons, it is important to define the corners in your objects. To begin with, choose the corners shape: sharp or rounded. Everything is clear with sharp edges. However for rounded corners, you should set the rules by which they will be rounded, depending on the size of the object.
For example, I have a rounding set for the main objects from 2 to 4 px depending on the size of the object.
You can specify base values or a single step (for example, 15 degrees) to uniform the angle of slanted lines. This limitation will also help you in creating icons.
Often, what is even from a geometrical point of view is not even from a visual point of view. When creating icons, you need to align objects by their visual weight. This primarily applies to asymmetrical objects. For example, we often face such problem when drawing the “play icon”.
In addition to all principles, it is important for uniformity of icons to stick to one perspective. In most cases, a 2D view of the icon will work. This can be a top or a front view. It is okay to use a 3D view, but then you have to use the same perspective for all icons in the set.
I recommend sticking to these principles to create a consistent set of icons, but you also should be guided by common sense and your personal visual taste. There are exceptions to any rule, so break it if you have to.
Instead of a boring conclusion, I want to show you the video which I made for Universal Icon Set v2.0.
Thank you for reading to the end. Hope this article was helpful to you.