← Blog Eugene Arutyunov July 7, 2026

Five Requirements for Icons

Here are the requirements usually applied to icons:

1. Convey meaning
2. Form a system
3. Be distinguishable from each other
4. Integrate into text and interface
5. Convey the product’s image

Let’s break down these requirements one by one in more detail.

Convey meaning

You can think of an icon as a shorthand way of writing other words, something like a hieroglyph. The icon’s superpowers: compactness, built-in localization. The limitation: unfortunately, very few words and concepts can be reliably encoded as icons within a single language environment. Universally understandable ones are even rarer.

What’s usually done about it:
— in critical places, the meaning gets labeled with words
— the audience is gradually taught the product’s icon “dialect” (“here’s what this icon means specifically for us”), while avoiding obvious conflicts.

We do the same.

Form a system

If you just throw together a random set of graphic thumbnails, each conveying its own meaning, they’ll be hard to perceive as a whole. This isn’t only about aesthetics — differently styled images are obviously noisy and confusing, but there’s a functional side too: a contract with the user. Any system implies something like an agreement about what can and can’t appear on a page, in an interface, in a user flow. This predictability makes complex things feel simpler, and people get frustrated less and trust the product more.

So we try to maintain consistency in our iconography. This shows up in some very basic constants: how much line thickness and spacing between objects can vary, what level of detail is acceptable. And also: solid fills, no outlines/strokes.

Be distinguishable from each other

If icons are made too similar to each other, they turn into noise. You can compare this to alphabets: it’s good when an alphabet has letters that look like S, I, A, R, or O — it helps reading; it’s bad when you get something like НПЦШЩ, as in the Cyrillic alphabet — that doesn’t help at all.

Obsessing over modularity, over-unifying shapes — this is the most common mistake and the main problem with most modern icon sets. It mostly comes from icons being designed and “sold” outside their real context, laid out neatly like candy in a sweet shop. Real-world conditions demand much more diversity.

So we make icons that are consistent in character but very different in shape.

Integrate into text and interface

Literally, this means: icons should shrink down to letter size (okay, maybe a bit bigger than a letter, but comparable) without losing functionality, and scale up just as painlessly — the same icon should hold up whether it’s a 16×16 favicon or a 200×200 illustration on an empty state screen. They should also become monochrome without any issues.

Sure, our preferred version might be in color, and the monochrome version might convey the meaning slightly less well (for example, the deepfake icon relies mostly on color to convey its meaning), but in its monochrome form an icon shouldn’t turn into a different icon or fall apart.

Most of our icons are monochrome, but not all of our colored icons become monochrome painlessly — that’s a known problem we still need to solve.

Convey the product’s image

A carefully drawn icon can create a feeling of “something interesting, thoughtful, and well-made is waiting for you here.” This approach is mostly typical for app icons — like in iOS.

In the Modulate design system, icons originally appeared for dashboard navigation, and they were small to fit into a line. We made model icons using the same recipe, also for navigation.

But then the Pricing page grew, and to keep the spec tables from all looking the same, we needed clear visual accents. So our simple icons grew to iPhone-icon size. And honestly, they didn’t quite meet the requirement of conveying the product’s image.

So we came up with volumetric versions for them:

Need one as an image? Open Icon Studio — pick an icon and a backdrop, set the angle, and take a screenshot.