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.
Here’s quite an effective flow for icon creation. As you can see, the process starts much earlier than the first line is drawn.
Here are some examples of icon sets in different styles designed along the flow described above.
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.
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!
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
Lunacy’s latest release comes with new features designed to speed up your workflow and a…
Sometimes there is just no time to wait for a professional designer to make your…
Graphic designers use dynamics and movement to make their work more exciting. It can help…
Design should not feel sham. It should reflect a real-world experience, with a lot of…
New AI-based routine killer from the Icons8 team for those who need to edit images…
Freelance designers are exposed to a range of cybersecurity threats on a daily basis. Here’s…