Icons are an integral part of any design system. The main reason for using icons is to help users interpret ideas fast, navigate quickly, solve the language barrier, and make the user journey usable and enjoyable.
Icons as a design tool are most popular between UI/UX and graphic designers. These tiny design elements are simple and understandable to every person, and these characteristics give them the status of universal digital language.
10 essential tips to create icons:
In this article, I’ve gathered 10 best tips and tricks to help you design perfect icons from scratch. Get to know each piece of advice closer! And yeah.. Read this article till the end and find a referral code to activate access to 25.000 free icons from my favorite library!
Size
The minimum icon size is usually 12 x 12px. Take these dimensions as a base. The further values are industry standards, and most of them are simply created by doubling the previous number.
- Small Icons, px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
- Medium Icons, px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
- Large Icons, px: 512 x 512, 1024 x 1024.
Important note: when you create icons, it’s important to design at 100% scale to make icons pixel perfect, while zooming in for accuracy.
Pixel-Perfect
Pixel Perfect icons display in sharp and crisp lines and shapes. Nowadays high-resolution monitors and Retina Displays are getting better and better, so the need for pixel-perfect icons may be declined in the nearest future. But for now, making your icons scalable, responsive, and suitable for many devices is highly important.
- Pixel grid alignment allows to make straight lines perfectly sharp and increases the sharpness of curved lines and corners.
- Perfect angle. Angled lines are more blurry. The perfect angle for creating icons is 45° since pixels that form a corner are placed diagonally above each other.
- The edges. Straight lines must occupy the 4 darkest pixels on their edges. This way line edges look way sharper.
Line Width
To make icons look neat and consistent it’s important to keep in mind the line width and the gap size. This rule I classify as must-follow: all lines are identic in width.
Ideally, the line width and the gap size shall be equal too. However, sometimes you have to break this rule. It happens when you need to illustrate an object we face in everyday life that has an asymmetric pattern. Let’s take a barcode as a relevant example. Making line width and gap size inside the icon deliberately uneven, we indicate the identity of our object.
Corner Radius
In UI design, the corner radius of the objects, including icons, defines the look and feel of the project. When we say about multiple objects in one set, the rule is simple: choose between square and rounded corners and apply the same properties for the whole bunch of icons.
Why is it so important? Consistency is the key principle of UI/UX design. A usable and user-friendly design always provides a consistent experience. In the example below you can see how breaking this principle affects visual perception.
Optical Balance
What may seem perfectly aligned and balanced for a computer, may not seem the same way for your eyes.
When we put together a square and a circle equivalent to each other in size, we have a feeling that something is wrong. The circle seems to be smaller than the square. To make our shapes look visually identical in size, we shall make the circle bigger (or decrease the size of the square).
This principle is also valid for icons design and use. Some icons might be heavier on one side. Try to adjust them by one or two points until the overall alignment looks correct. In the example below you can see that the highlighted icon seems to be big although it has the same size with other pieces. To balance this set we need to adjust the highlighted icon by reducing its size.
Optical Alignment
It’s not a secret that we often use center alignment in our design routine. There’s nothing wrong with this approach. But when it comes to the details, such as icons design, we need to trust our eyes and break the laws of mathematics in order to enhance the balance of elements.
Let’s take the play button as a showcase. This example is trivial, but highly illustrative, because the more asymmetric shape is, the more noticeable the imperfections that shall be improved.
Keep it Simple And Straightforward
I bet you’ve already guessed that we are referring to the KISS principle. The idea behind this principle is that the majority of systems work best if they are kept simple. The easier for users to understand and interact with something — the more likely it is to be approved.
How is it applicable in the icons design?
- Don’t use text. the binding of text and an icon decreases the number of ways of using the icon. Also, small size text is not readable. If you still need text as a supportive element, use tooltips and labels next to the icons.
- Don’t overdesign. Unnecessary complexity gets in the way of purpose and should be avoided. Overloaded designs can turn the user experience into a complete nightmare.
- Avoid unnecessary elements when possible. But don’t forget to make sure that each icon is understandable and clear in the overall context.
Important note: use the KISS principle in icons design wisely. Don’t make things so simple that they compromise the functionality. For the positive user experience icons shall be clear and understandable.
Frames and Keyshapes
By keyshapes we typically mean a circle, a square, portrait and landscape rectangles combined together. They create a pattern to follow for creating icons. However, this rule is very flexible and gives way to the optical balance that was covered previously. So, if you feel that your icon doesn’t fit perfectly inside the shapes, but looks totally right — trust your eyes!
The frame is a “container” for your designs. Frames allow you to choose an area of the canvas to create your designs in. Icons are always placed in frames, and there are a few reasons behind it.
- Size. All icons have different height and width due to their geometric shapes. For the correct use of icons in our designs, we should place them into frames that are always equal in size.
- Export. Icons inside the frames are aligned to the visual center what is often ignored by developers since they often adjust icons according to the actual center without noticing the difference. That’s why exporting icons with frames is crucial — your inner perfectionist can stay calm and sleep well.
- Time. If you use Figma, save your time by creating components. You can quickly replace one icon with another using the Instance function.
Relevant Keywords
Have you ever thought about what challenges your users face when searching for an icon in your library? What are their pain points? What are their needs? To answer these questions, put yourself in the user’s shoes.
- Don’t make your users think. For example, if they don’t know what exact flower icon they want to find, let them see a bunch of options: flower necklace, flowers in the interior, plant shop, etc.
- Show the whole set. For example, if users want to find icons in the same topic or category, they can quickly check the full set that contains this particular icon.
- Use hashtags. Users might struggle to find the right words for searching or might want to see all the similar and supplementary options to choose the best fit from. For example, when the actual name of an icon is “Orchid petals”, you can still find it with the following keywords: #Orchid #Petals #Petal #Flower #Decoration #Floral #Plant #Garden #Blossom #Botanical #Nature #Tropical #Branch #Beautiful #Flora #Beauty #Natural #Leaf #Elegant #Romantic
Format: SVG and PNG icons
SVG or PNG? This is the key question when you’re on the stage of exporting assets. Let’s compare the formats:
- SVG has a very small file size what means fast loading of the final design, while PNG is quite large.
- SVG format is infinitely scalable, whilst the resolution of PNG is limited to the size you created file at. However, scaling down a complex SVG icon to random sizes can result in half-pixel edges that might make the icon appear soft. This happens because as an icon becomes smaller on your screen, it has fewer pixels to represent its source, resulting in the loss of sharpness. This doesn’t mean you need to avoid using SVG files. Just adjust SVG icons according to the intended use.
- SVG files can be edited and animated, PNG ones are static.
- For PNG format you have to provide assets for all sizes and colors, while there’s no need for that when you work with SVG.
- PNGs are compatible with most browsers, while SVGs may not be supported by old browsers.
My personal choice is to work with SVG icons because it saves a lot of time. However, it’s important to be careful with scaling down complex shapes and to keep in mind that old browsers may not support SVG format.
Conclusion
You’ve just learned 10 essential rules for creating icons like a pro. Use these rules in your icon design journey and get the most out of it!
Free Bonus: Free Icons
If you don’t have time for designing icons on your own and are struggling to find a perfect icon library — here’s my personal choice: koloicons. Why this one? Because this library hugely saves my time.
- They create icons in vast numbers! The library now counts more than 45.000 pieces, and they are constantly growing. This means I can find literally any icon I need.
- All icons are made in a consistent style, so I don’t need to waste my time on adjusting stroke or corner radius. All icons are ready to use!
- Two packs: simple and detailed. This means I have no limits. For system icons choose simple pack, for illustrations — detailed one.
Coming back to the point, the library goes freemium! This means that with the referral code you can activate access to free icons! Copy this code 64bfe and paste it in the appropriate field on your account page, and you are ready to go!
What’s next?
Icons draw attention, solve the language barrier, help users navigate quickly, drive them to action, and make their experience enjoyable. The topic is not as simple as it seems at first glance. So, in the nearest future, I will publish a sequel of the article, and you will learn how to use icons like a PRO.
Follow me on Instagram to improve your UX/UI design skills and efficiency.
Stay tuned! Karina 🏴☠️
