Reading time: 4 min.

There is no problem in finding icons. Thousands of designers draw icons daily, and hundreds of websites offer them, often for free. The variety is huge. With that variety, however, comes a problem.

A typical app needs 10 to 20 icons. Some icons are used everywhere, like “settings” and “edit”, while others are unique to every project. If you start browsing websites for icons and downloading the ones you like, your interface would quickly turn into an exotic meal. Not the tasty and pleasantly surprising kind. The “I would never eat in this country again” kind.

How to Combine Icons from Different Sets in Your UI | picture

You may love each one of these icons separately, but together they just “don’t fit”.

So how do you combine icons from different designers & icons sets so that they look consistent and pleasant on your website, app or any UI that uses icons?

Color

The first and most prominent thing you see with icons is their color. And the easiest way to combine icons from different sets is to get them all in one color.

How to Combine Icons from Different Sets in Your UI | picture

Though it’s easier to use monochrome (one color), icons made in a consistent color palette work as well:

How to Combine Icons from Different Sets in Your UI | picture

If you really like the icons you’ve found, but they are all in different colors, you can edit the icons yourself, or ask a fellow designer to help you. Keep in mind, that most creative commons licenses allow small edits such as color and size change. Some services (not mentioning any names) even have built-in recoloring. Who would have thought…

How to Combine Icons from Different Sets in Your UI | picture

Recoloring icons at some-unnamed service

Style

The battle between flat design and skeuomorphism has gone on for an eternity.

How to Combine Icons from Different Sets in Your UI | picture

The image credit goes to Jixee.

Currently, flat design is winning. But I have no idea how long this will be the case, just as I have no idea what people will be wearing in 5 or 10 years. Fashion, they call it.

I’ve never understood the fashion industry. Those people are so clothes minded.

All I know is that you have to pick a side. You either go full flat-design or full skeuomorphism.

Look at this set. Color palette is consistent. Yet…

How to Combine Icons from Different Sets in Your UI | picture

Combining flat and skeuo icons leads to many things: messy interface, wrong accents and, sometimes, total disregard of buttons as “buttons”.

Of course, within flat and skeuo styles there are many “sub-styles”. For example, in flat style most famous are Apple Human Guidelines for iOS and Google’s Material Design. They are well documented to the point where even line should be of certain width:

How to Combine Icons from Different Sets in Your UI | picture

Combining icons that were made specifically for a target operating system is the surest way for UI to be consistent. These guidelines are widely popular and many designers follow them in their work.

So being consistent with color and style is paramount, yet there are still a few subtle, albeit important, details. An experienced designer will spot such flaws instantly, and the user will feel the classic, “I can’t tell exactly what it is, but something here bothers me”.

Perspective

Take a look at these 5 icons. They all are made in skeuomorph style and I adjusted color a bit, so they would look more consistent. And yet, they seem like icons for 5 different apps. (and they are, actually).

How to Combine Icons from Different Sets in Your UI | picture

All five objects from icons can be incorporated into one picture.

How to Combine Icons from Different Sets in Your UI | picture

However, between them, scattered around in several places, there won’t be any consistency. And in a world of icons, consistency is everything.

Icons should look as if they are a part of a one panel, interface. Don’t forget that first icons were used in “offline” interfaces, and our perception of them in the “digital” world is hugely affected by this fact.

How to Combine Icons from Different Sets in Your UI | picture

I want to press them. Do you?

Shadows

Another sign of consistency is the light. Or shadow, for that matter. Take a look at these two icons:

How to Combine Icons from Different Sets in Your UI | picture

It seems like the sun is only shining for one of the icons. A direction of light is also important so that icons would fit together. Either the sun is the same for all, or there is no sun for anyone. *Dramatic pause… *

Note: though shadows are often used in skeuomorphic style, sometimes they are incorporated into flat design as well. But the principle stays – same shadows for every icon in a group.

Visual Weight

Visual weight is how big, dense, and heavy an icon is perceived. The theory is explained in-depth here. In short, icons should look nearly identical in size.

Take a look at these two icons.

How to Combine Icons from Different Sets in Your UI | picture

Now squint your eyes so that you see only big washed out shapes:

How to Combine Icons from Different Sets in Your UI | picture

See the big difference between the size of these two forms? That’s a big NO-NO. This example is pretty extreme, so let’s look at this comparison between two other similar sets:

How to Combine Icons from Different Sets in Your UI | picture

In terms of visual weight, the upper set is clearly out of balance. And all you needed is to squint your eyes.

Details

The devil is in the details, they say. Well, “details” is a broad topic, so I’ll try to be very specific.

Repeated Elements

Sometimes designers incorporate some element or trait into their designs, so their set would look unique.

How to Combine Icons from Different Sets in Your UI | picture

Take a look at the pixelated element in the right corner of every icon – any subsequent icon should have it as well. Another example of a repeatable element would be user icons:

How to Combine Icons from Different Sets in Your UI | picture

So here’s a thing – any repeatable element of style should be… well, repeated.

Amount of Details

Another case: consistency may also be disturbed by different amounts of details in icons. Simply put, all icons should be either simple, or complex. Mixed combinations act quite unpredictably. Users won’t know what’s a button and what’s an image. Bad UX.

How to Combine Icons from Different Sets in Your UI | picture

Final Thoughts

As I’ve repeatedly pointed out, the only thing you have to strive for while combining icons from multiple packs is consistency. Consistency. Consistency. Consistency. An experienced designer decides whether icons fit together or not almost intuitively, and the list of possible attributes (shadows, styles, lines) can be endless. However, in this article, I tried to pinpoint the most important, and often ignored ones, so we all could become better at “gathering” our interfaces.

Hope you enjoyed the article. If you have something to add – I welcome your feedback in the comments.


About the author
Andrew started at Icons8 as a usability specialist, conducting interviews and usability surveys. He desperately wanted to share his findings with our professional community and started writing insightful and funny (sometimes both) stories for our blog.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Background Remover Background Remover, AI-based online tool for removing background from any photo
Mega Creator Mega Creator, online tool for creating visual content from pre-made elements
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit