Icons 101: Not only for designers

This is not a how to create your first icon. This is a how to download an icon off the web and not break it.

Icons aren’t very complicated. They’re so simple in fact that many of us stop paying attention and ignore some very simple rules that everyone should respect when dealing with icons. Let’s dive in.

Vector vs Bitmap

Everybody knows this, but then you catch some sneaky developer exporting your vectors as PNGs while nobody’s looking. Bitmaps (most common formats include GIFs, JPGs, and PNGs) do not scale well. Scaling them up or down will decrease clarity and introduce blurriness. Unless there’s a very good reason to use them for icons in your product — don’t.

Vectors on the other hand are created through the use of mathematical formulas, making them scaleable into any size you can imagine with no impact on their quality. The most common format in use is SVG.

SVG as a format can contain bitmaps or even mix bitmaps and vectors. Even if you’re a designer whose imagination knows no bounds, computers do. Exporting bitmap images to SVG will not make them scaleable without loss of visual fidelity and is considered a criminal offense in some regions of the world.

Stroke vs Outline

Sometimes you get these icon packs that use stroke instead of outline. Which is cool, as it makes them easily adjustable.

Should you convert to outline when you’re done adjusting? In most cases outline is the safer choice. You lose some flexibility, but once exported, the thickness of the lines easily scales along with the size of the icons. That’s one less thing to worry about during implementation.

Containers

Just like a painting needs a canvas that defines its boundaries, an icon needs its own space to exist. If the space isn’t defined by designers and respected by developers, all kinds of chaos will most likely ensue.

Even if visual design is not your cup of tea and you interpret the world as lines of code, you should notice that the icons above vary in size.

That’s why the best practice is to place them inside square containers (or artboards). Most designers will know that having containers allows for optical adjustment of the center of each icon.

What’s even more important than that is the fact that without these evenly sized, square containers bare vectors create all kinds of visual chaos when placed in layouts, because they affect the position of other objects — whether in your designs or in live products.

See the image above for an example of what could happen if you’re not careful. The spacing between the icons and the text is always the same, but because the icons vary in size horizontally, the text is not properly aligned.

The vertical alignment within each row is set to the top, which is apparent when comparing icons of largely varying sizes. When you’re dealing with icons of similar size, it might be harder to notice right away, but even tiny differences impact the overall reception of your design or implementation.

If you’re a designer, never pull vectors out of their containers. If you’re a developer, never export without containers. Let’s all work together to create more beautiful interfaces for everyone!

Do you run into other issues working with icons that I forgot to mention? Let me know in the comments section.

Resources

Feather, Simply beautiful open source icons — https://feathericons.com/
white paper photo — https://unsplash.com/photos/_zKxPsGOGKg