Creating monochrome icons for user interfaces. For nerds who have read my article on visual weight and optical alignment.
1. Use the optical grid
An interface icon usually can be approximated to one of the basic formats: a landscape rectangle, a portrait rectangle, a diagonal rectangle, a circle, a triangle, a square. Blurring shows they have equal visual weight because they turn into more or less the same blobs.
Depending on an 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 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 in accordance with the pixel grid. Diagonals with the angles of 45°, 30° and 60° look sharper than diagonals with uneven angles like 13.7° or 81°.
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 viewer’s attention on what is different. It’s like fraction simplifying in maths. The less graphic noise you see, the clearer your understanding is.
If the target user already realizes what he or she works with, there is no need to repeat that again and 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.
6. Choose a certain style and follow it
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 2-based sizing system
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. But this is important for proper, not distorted icon rendering in the final product. Keep in mind the minimal needed number of shape anchors and absence of gaps between adjacent elements.
The same story with annoying “8.999 px” or “100.001 px” sizes. If the shape anchors are located accurately, icon edges look sharp. And you don’t run the risk of getting excessive anchors and gaps when you merge shapes.
9. Cleanse SVGs from trash
Many interface editors like Sketch can 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 iconfont or use SVGs on a webpage.
You can remove this trash and save.
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 trash in an icon in a code editor. If you know how SVG code looks like, try deleting unnecessary data strings directly.
Of course, all these recommendations aren’t absolute truth. If you know what you do, skip them. Here are the cases when, in my opinion, strict geometric icons won’t be the best choice.
Empty states. If you are creating empty state screens like “No tasks left” or “All emails read”, it’s better to illustrate them with emotional icons or put the text only. Emotional icons can make users smile, whereas emotionless geometric icons won’t add any value to the interaction.Mascots and illustrations. If your interface has a mascot or illustrated onboarding screens, this type of graphics should be emotional. I don’t know how a designer can depict a character by a limited choice of shapes and sticking to a grid.