USER INTERFACES
Designing a well-balanced set of interface icons
Applying human visual perception to icon design; a continuation of the article on optical effects
1. Use the optical grid
An interface icon can usually be inscribed into one of the basic formats: a landscape rectangle, a portrait rectangle, a diagonal rectangle, a circle, a triangle, or a square. Blurring shows they have similar visual weight since they turn into more or less the same blobs.
Depending on an overall icon shape, inscribe it into a corresponding frame of the optical grid. For example, squarish icons are more compact than triangular or elongated ones.
The more compact an icon is, the less space it needs. The more sharp edges or small details an icon has, the more artboard space it should occupy.
Beware of becoming your grid’s slave. It is to help, not to restrict. If an icon is visually better with some sticking out elements, let them stick out.
2. Mind the pixel grid
To make icons sharp on non-retina screens, stick to the pixel grid and give preference to 2-pixel borders for line icons. Centered 2-pixel borders usually provide enough thickness and crisp silhouettes.
If you choose 1-pixel borders for icons, they should be either outer or inner but not centered.
Centered 1-pixel borders make an icon blurred at 100 % scale, although it seems sharp if you zoom in.
Set the start and end points of diagonals following the pixel grid. Diagonals with the angles of 45°, 30°, and 60° look sharper than diagonals with such uneven angles as 13.7° or 81°. Millions of people use devices with low-resolution screens nowadays, that’s why icon sharpness still matters.
3. Keep a certain level of detail
It’s better to start an icon set from the most complex icon. It will define the level of detail and help to make icons of the same visual weight.
When icons have different levels of detail, the more detailed ones attract more user’s attention and seem visually heavier.
4. Control the minimal gap size
The space between neighboring elements of an icon shouldn’t be too small or inconsistent throughout a set. Define the minimal gap and keep it everywhere to avoid contour “sticking.”
For line icons, it’s good to make the minimal space equal to the line thickness. Lines should be either distinctly separate or accurately connected, never almost connected.
5. Remove repeating parts
In the sets of icons, you might have repeating details. Get rid of them to focus the viewer’s attention on what is different. The less visual noise you see, the clearer your understanding is. If users already realize what they work with, there is no need to repeat that again. For instance, avoiding envelope-based icons won’t make people think this is not an email app.
This rule also concerns various decorations — frames, backgrounds — around an icon. If they don’t help to read an icon, they hinder to read an icon.
👋 Hi there! I enjoy two things — sharing knowledge and drinking good coffee. If you like what you are reading now, feel free to support me via the “Buy Me a Coffee” platform ☕ Thank you! ❤️
6. Follow a chosen style
Don’t mix showing volume with frontal depiction within one icon set. Style consistency will help users to recognize icons and understand that they have equal importance or state.
The same principle works with line icons and filled icons. If you mix them, people might think they have different importance or status. Of course, unless you deliberately want that. For instance, a filled icon is for the key command, and line icons are for other commands.
It’s nice to have two variants of each icon in interfaces. A line icon — for the disabled or regular state. A filled icon — for the clicked state.
7. Utilize a sizing system based on 2
The 8-pixel grid and 12-column layout are used for many interfaces as more flexible compared to decimal-based sizing. 12 can be divided by 2, 3, 4, and 6. So, the 24- or 48-pixel icon areas have become standard. These icons can be scaled if a larger size is needed.
8. Keep silhouettes clean and accurate
Perfectionism is not the goal: no one needs pixel-perfect lines for the sake of pixel-perfect lines. However, this is important for proper, not distorted icon rendering in the final product. Keep in mind the minimal needed number of shape anchors and the absence of gaps between adjacent elements.
And what about the annoying “8.999 px” or “100.001 px” sizes? If the shape anchors are located accurately, icon edges look sharp. Also, you don’t run the risk of getting excessive anchors and gaps when you merge shapes.
9. Clean out SVGs
Many interface editors like Sketch produce SVGs with unnecessary artifacts — excessive groups, color layers, and clipping masks. Let’s see. In Sketch, everything looks good.
Open this SVG in a different editor (for instance, Adobe Illustrator). You’ll notice empty layers, unnecessary groups, and sometimes clipping masks. All these things might cause problems when frontend developers convert icons into an icon font or use SVG on a webpage.
You can remove this trash and save the file.
You’ll see that the Sketch SVG (picture.svg) and edited Illustrator SVG (picture_new.svg) have different previews in your file viewer. By the way, it’s possible to get rid of the trash in a code editor. If you know how SVG code looks like, try deleting unnecessary data strings directly.
10. Icons ≠ magic wand
Of course, all these recommendations aren’t unbreakable laws. Feel free to skip them if you know what you do. Here are at least two cases when, in my opinion, strict geometric icons won’t be the best choice.
- Non-typical UI commands. If you want people to understand a more complex action than “Save,” “Send,” or “Archive,” an icon might not be the best choice. Even if you manage to find a good metaphor, different users won’t interpret images the same way.
- Mascots and illustrations. If your interface has a mascot or illustrated onboarding screens, these types of graphics should be emotional and convey the brand voice. I don’t know how a designer can depict a character with a limited choice of simple shapes and a grid.
And one more thing: it’s always great to ask yourself whether you really need icons, in the first place. Is it the optimal way to solve a problem? What about writing a meaningful text? Otherwise, amazingly balanced, cute, trendy icons will frustrate people, and all efforts will be in vain.
- ✍️ Here are all my design articles on Medium.
- 💼 Let’s connect on Linkedin. Drop me a note if you want me to present the topic of this article at a conference or meetup.
- 🏰 Bored by design articles? Check my other blog about photography and overlooked architecture.
