A consistent icon set is one whose icons are designed following the same strict rules. Before you start drawing icons for a set, create a list of rules that all icons in the set must follow. You need to decide the rules for the line width, colors, corner shapes, spacing etc. and closely follow these for all icons. For example, if you set a rule for the line width to be 1.5 and the colour to be #E51919, then all the icons in the set must have the line width of 1.5 and have the color #E51919.

For an in-depth tutorial on creating consistent icon sets, check out our blogpost Better Icon Design in 6 Easy Steps.

Keeping a consistent style across icons in an icon set is critical for the value of the set as a whole. When the style is inconsistent, it becomes difficult for the users to use the icons together and create a great looking design. Keep a close eye on line widths, gradients, gloss, textures, labels etc. The critical areas to get right are: 

Strokes

Stroke width is important to be kept consistent, to achieve a professional look of your icons. You should be careful about using too thin lines since many users will use your icons in small sizes e.g. in a mobile app. Thin lines will disappear when scaled down. Pick line-widths that are visible even when the icon is scaled down.

In the above example the stroke/line weight is inconsistent. Some icons have thin lines, while others have thick lines and there's no pattern followed. All the icons should use the same line weight or have consistent line weight through the set in cases where you decide to use two line weights.
 

In the above example the stroke/line weight is consistent for all icons.

Effects

If you use effects such as shadows, gradients and gloss, make sure that these are used consistently through the icon set. This means that you should not apply different effects to each icon. All icons in a set should have exactly the same effect.

In the above example, the effects are inconsistent. Icons are using different kinds of shadows. Also some gradients are inconsistent.
 

In the above example, the effects are consistent (both shadows and gradients).

Shapes

If you're using background shapes for your icons, make sure that all of them are having the same shape. Having different ones like squares, circles, triangles etc. will not look consistent an might be rejected during our review process.

In the above example the shapes are inconsistent.
 

In the above example the shapes are consistent.

Sizes

Visual size (visual volume) of the icons should be consistent. It’s not enough to make sure the icons all have the same height and width in pixels. Some icons might have a larger area e.g. a house icon, compared to a plus sign, even if their width and height in pixels are the same. These two icons would appear in different sizes even though they have the same dimensions in pixel. 

In the above example, there is no consistent sizing of the icons with some of them too large and others smaller, making them look uneven.
 

In the above example, the icon sizes are consistent ,making the set look professional and well balanced.

To adjust the sizes of your icons, you should view them all together in an overview and try to spot the icons that stand out and scale them until no icons stand out. If icons look different sizes, this could also be caused by their artboard sizes. Read more about Artboards and icon templates

Colors

When using colors in non glyph/outline sets, try not to use a too wide color palette. Usually, customers prefer limited color sets as they are easy to adjust to the needs at hand with a few clicks. Even if you choose to use a lot of colors, then try to balance them around the set to keep things consistent. 

In the above example, the colors used are not clearly defined across the set. There is no defined color palette, which takes away the consistency of the set.
 

In the above example, the icon designer picked up a limited and original color palette, making the set consistent and unique.

For more insight into colors you can check out the following article on Colors. Also, a good starter in color theory is this guide: Color Theory: Brief Guide For Designers.

Design styles

The design style within a given set should be consistent among all icons in the set. For instance, if your set is in outline style, then all icons in the set should be outline style. Do not mix glyph, flat, or 3D icons in an outline set. By the same token, if your set is a glyph icon set, do not mix flat, outline, skeuomorphic, cartoon, etc. styles within a glyph set.  

In the above example, there is a lack of consistency in style, wrongly using almost all styles (outline, glyph, flat). This makes the icon set unmemorable and hard to use on a project where consistency is essential.
 

In the above example, you can see a consistent design style which makes the icons original and memorable.

Details

This means adding a specific detail to all the icons so that they can be seen as a consistent set. 

All the icons above contain a discontinued line detail that makes them be consistent with each other. If only some of them had that line detail and others didn't, then the set would be inconsistent. 

Here are some good examples of consistent icon sets:

Picons Essentials
Streamline
Robotics - Volume 2


Check out all our Criteria for approving icons

Did this answer your question?