Let us show you step by step process of icon creation and provide a basic checklist of what to review in a newly created icon set.

We have been designing icons every day for more than 15 years. Meanwhile, you have probably read a lot about icon design. We will not give you a long presentation of what a good icon is but if you want to read something about it, check the end of this article — you’ll find links to useful stuff there. Yet, the main aim of this post is to let you go through all the process of icon creation step by step and provide you with a basic checklist of what to review in a newly created icon set.

The icon design guidelines have been written by various designers. Even when the design trends change, icon design stays based on the old principles of consistency, legibility, and clarity. Therefore, the process of designing an icon is simple enough if you follow a short bunch of rules. But based on our experience, keeping all the rules in mind while drawing an icon set can be challenging.

We are going neither to reinvent the wheel nor repeat the general rules. Instead, we will share our internal working process details hoping it will help you organize your work efficiently.

Food icon set in Cotton style

Step-by-Step Process of Icon Design

Here’s quite an effective flow for icon creation. As you can see, the process starts much earlier than the first line is drawn.

• Understand what icon set you have to create: consider where it will be used and what it should represent. Decide which icons require a metaphor and which are just real-world objects.
• Think about proper metaphors and brainstorm on the possible symbols. Write down all the associations you have to depict the essence of an icon in the best way. Use dictionaries and word sets to find keywords, synonyms, and definitions of the concept you need to represent in an icon. Simplify the idea to the point you will find an object that translates the idea of abstract concepts clearly.
• Don’t stay tete-a-tete with the task and conduct thorough research to collect the necessary references. Probably somebody has already designed the great version of icons for the needed theme and you could find some inspiration.
• Choose an icon style: outlined, flat, material, glyph, hand-drawn, etc. Take into consideration the interface your icons will be used in. The choice depends on both general requirements for this type of interface (for example, iOS or Material) and the stylistic concept of a particular UI layout.
• Sketch your ideas in a chosen style to see if it works just the right way. Keep consistency across the whole set.
• Vectorize the best sketches.
• Test the icons in the UI layout and enjoy it.

Here are some examples of icon sets in different styles designed along the flow described above.

Material, Outline: Science and Studies Icons

Carbon Copy: Animals

Nolan Icons: Aging

Designing icons set by set every day led us to the necessity of an instrument helping to ensure the harmony and readability of the set. That is where a checklist came to rescue. You can download the whole checklist to paste it into your workspace and review your designs.

Checklist for New Icons

1. Pixel-perfect. Position icons “on pixel” to avoid blurriness.

2. Visual weight. Use the squint hack to check all the icons have the same size: squint, look, adjust, look again. In order to maintain the weight consistency, we use “perfect circle and square for a set” and compare all the new icons with it.

3. Geometric shapes. Wherever possible, use simple firm shapes to draw all the necessary lines. It makes your icon set firm, attractive and persuasive.

4. Clarity and simplicity. Delete all the details that don’t help to communicate the concept of an icon but instead make your icons heavy and noisy.

5. Enough space. Ensure all the elements of your icons have enough space and air.

6. Contrast. Check if every color of your icons is visible on the white and black background and if the contrast between elements is sufficient.

7. Visual unity. Check if lines weight, corners size, color palette, level of detailing and design elements stays the same across the whole set.

8. Order in layers. That is just a good and professional tone.

We are going to issue several guides on icon styles available to get in the Icons8 library. Coming soon!

Useful Links

Pixel Perfect Icons

What Is Visual Weight

How to Combine Icons from Different Sets in Your UI

3 Simple Tips to Improve Your App Icon Design

Guide to a Variety of Interface Icons

How to design a top-quality icon

6 Easy Steps To Better Icon Design

About the author: Anna Golde, graphic designer for Icons8
Title image by Sara Maese for the Icons8 illustration project

Review Ouch, the collection of free vector illustrations for UX

Check how we redesigned the Icons8 web app, review popular graphic design trends on Dribbble and check the temptations of icon design you would better avoid