A consistent icon set is one whose items are designed following the same strict rules. Before you start drawing icons or illustrations for a set, create a list of rules that all items 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 items. For example, if you set a rule for the line width to be 1.5 and the colour to be #E51919, then all the items 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 items in a 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 graphics together and create a great-looking, uniform design. Keep a close eye on line widths, gradients, gloss, textures, labels etc. The critical areas to get right are:
Stroke width is important to be kept consistent, to achieve a professional look of your icons or illustrations. You should be careful about using too thin lines since many users will use your artwork 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 or illustration is scaled down or up.
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.
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).
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.
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.
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.
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.
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:
When it comes to illustrations, all the criteria that are valid for icons (as mentioned above) are equally valid for illustrations.
We highly recommend creating a large number of matching illustrations on different topics and placing them in large illustration families. These illustration families have a great commercial value and will attract many customers.
Some examples of consistent illustration families, where all illustrations match each other:
An illustration family called Tuesday, with 97 matching illustrations:
An illustration family called Milano, with 929 matching illustrations:
Here are some good examples of consistent illustration families:
Brooklyn - 1042 matching illustrations
Milano - 929 matching illustrations
Barcelona - 815 matching illustrations
Tuesday - 97 matching illustrations
Check out all our Criteria for approving icons and illustrations.