USER INTERFACES

Hopefully, the Ultimate Guide to an Interface Icon Set

Creating icons for user interfaces. A continuation of the article on optical effects. Here is a Chinese version.

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 similar visual weight since they turn into more or less the same blobs.

Basic silhouettes of icons

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.

Rectangles on an optical grid

A square, circle, and triangle on an optical grid

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.

Examples of icons that can be inscribed into different rectangles

Examples of icons that can be inscribed into a square, circle, and triangle

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.

Example of an icon with 2-pixel lines

Example of an icon with 2-pixel lines

If you choose 1-pixel borders for icons, they should be either outer or inner but not centered.

Example of an icon with outer 1-pixel lines

Example of an icon with outer 1-pixel lines

Centered 1-pixel borders make an icon blurred at 100 % scale, although it seems sharp if you zoom in.

Example of an icon with centered 1-pixel lines

Example of an icon with centered 1-pixel lines

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.

Vector versus raster icon examples

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.

Examples of a low and high level of detail

When icons have different levels of detail, the more detailed ones attract more user’s attention and seem visually heavier.

Inconsistent level of detail

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.”

Inconsistent gaps between the lines

Gaps between the lines fixed

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.

Inconsistent gaps between the lines

Gaps between the lines fixed

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.

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.

Examples of harmonized dimensions

Example of inconsistent dimensions

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.

Example of a consistent set of icons

Example of an inconsistent set of icons

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.

Example of styles used for different states

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.

Vector icon structure: broken and fixed

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.

Vector icon structure: broken and fixed

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.

An icon example in Sketch

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.

An icon example in Adobe Illustrator

You can remove this trash and save the file.

A tidied up icon example in Adobe Illustrator

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.

Examples of icons with SVG trash and without it

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, this type of graphics should be emotional and convey the brand voice. I don’t know how a designer can depict a character by a limited choice of simple shapes and sticking to 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.