Want to integrate a unified set of icons, don’t miss these tips

Finding a set of icons is not a big problem for designers. Not only do a lot of websites offer free icons, but the designer’s own modify and design is not a big deal. However, this involves a very real problem.

For the dozen or so icons that are commonly used, it is not difficult to find them. The set is full of icons, like the icons of “Settings” and “Editing”. However, there are many icons that are unique to a particular project. You want to find one that can be used in the general icon collection, and it is not very likely. If you find a theme match in other places, but you can’t be consistent in style, this is awkward. Can’t you use it directly? That is easy to play.

When you look at these icons individually, you may feel that it’s okay to watch, but it’s not that right when you put them together.

So how do you integrate the icons from different UIKits into one, and even make the icons in different places and sources, such as websites and apps, a consistent and pleasing design?


Among the many messages conveyed by icons, color is the most intuitive one. Icons from different sources are first unified in color, such as using the same color.

Although it is convenient to use a single color, if you can use the existing color scheme to unify the color of the icon, the effect is even better:

If you really like the icons you find, but their colors are different, you can adjust them yourself or find a professional icon designer to help you. It’s worth noting that most of the material sharing licenses are edited and authorized, you can change the color and size.


The struggle between skeuomorphism and flat design has been going on for many years. At present, flat design is the mainstream, but I don’t know how long this situation will last, because today’s flat design contains a lot of ideas. Materialized design techniques and elements. What will be popular in the next 5 to 10 years is hard to say. Fashion and trend are like this.

All I know is that you have to pick a style. Either flat or skeuomorphism.

Look at this set of icons, the color scheme is the same, but the style is not the case.

Mixing the flat design and the skeuomorphism will inevitably lead to a messy interface.

However, under the big style setting, designers still have enough choices. For example, in the flat design style, iOS’s Apple Human Guideline and Google’s Material Design are very typical flat design style design specifications, both of which are very strict in terms of details and style, even specific The thickness to each line:

Designing new icons based on systematized icons tailored to specific operating systems is the surest way. These design specifications accepted by the majority of designers guide the work of many designers in their daily design.

Therefore, consistency in color and style is paramount. In addition, there are some subtle but noteworthy details that require the designer to be particularly attentive. Because the design of these icons has become more classic, and heavy users and experienced designers can distinguish the details of the icons that are not enough at a glance. Therefore, designers often hear such feedback: “I don’t know where it is wrong, I just don’t think it is right.”


The following five icons are also used in the skeuomorphism style. For the sake of unity, I have fine-tuned their colors and they look more consistent. But no matter how they are adjusted, they look like icons for 5 completely different applications (in fact they are).

If you put these five icons in perspective, you can clearly see that they are in a different perspective and position.

They are scattered in different locations in the perspective, which is clearly inconsistent, and this completely violates the consistency of icon design.

Icons should look like part of the entire interface, the relationship between them is equal, and the relationship between perception and perception should be maintained.


In the design of the shadows, this consistency should also be maintained between icons. Take a look at the two icons below:

These two icons are derived from the same set of icons, but it seems that only one icon has been illuminated by the sun. The direction of light is equally important. Therefore, if you want to keep the icons consistent, it’s best to keep the icons consistent in the lighting angle.

Tip: Although shadows are considered to be used in skeuomorphism design in most cases, in reality, shadows are also used in flat design styles including Material Design. So in principle, it is generic, and designers need to maintain consistency in design.

5.Visual weight

The size, density and weight of the icon gives us the visual weight we often say. And in the same set of icons, the visual weight of the icon should be kept very close.

Take a look at the two icons below:

When you squint at the color blocks formed by the two icons, you can more clearly compare the visual weight of the two:

The difference is really very big. This example looks very extreme, so let’s continue to find other cases to compare:

In terms of visual weight, the above group is obviously unbalanced, and you only need to squint to judge it quickly.


The devil is hidden in the details. But the types of devils hidden in the details are still very diverse. We may wish to expand on this topic.

1.Duplicate element

Sometimes, designers add some consistent, repetitive elements to make sure the icon looks unique enough.

Take a look at the set of icons below, which will add some pixelated elements in the lower right corner, each with its own and different.

The same is true for this set of user avatar icons:

2.Number of details

In another case, there is an inconsistency in the number of details. This inconsistency can upset the overall consistency. In short, this set of icons should be balanced in complexity. Otherwise, users will have difficulty judging the attributes of each icon because of confusion.

In conclusion

As I said at the beginning, to incorporate different icons into a system, the main goal of the designer is to ensure consistency. Experienced designers will optimize the icons from various angles and attributes. Today’s articles have combed potential and needs to be addressed. The design of the icons is done, and the design of the interface will be smoother.