Brand iconography and pictogram guidelines

How to name icons: by form or by function

There are two approaches here, and most teams choose the wrong one. The first one is to name an icon by what it does: "go-to-next", "open-menu", "save-document". The second one is to name it by what it represents: "arrow-right", "hamburger", "floppy-disk". The difference may seem like a semantic detail, but it determines how many icons you will draw per year.

An arrow to the right can mean "next step", "expand", or "go to website" — the shape is the same. If you name it "go-to-next", when a second context appears, the designer will draw "expand-right" with the same geometry, and the library will double in size without a real reason.

The working naming scheme is hierarchical: [size]/[category]/[name]-[fill]-[direction]For example, 24/navigation/arrow-outline-right. For files, kebab-case is used: arrow-outline-right_24.svg. This structure immediately defines the brandbook folder organization: sections by categories (navigation, actions, statuses, objects), inside — by sizes, inside — variants of fill and direction.

How many sizes are needed and how they differ in meaning

A common mistake is to carry over five to six sizes "just in case" into the guidelines. In practice, two to three sizes tied to specific interface contexts are enough, not an abstract scale.

IBM in its system goes further and adds 20px as an intermediate step, but this is more of an exception for large product ecosystems rather than a rule for a medium-sized business brandbook. Three sizes — a working minimum that covers 90% of scenarios.

Scaling versus individual drawing

Simple vector scaling does not work — this is the most common technical error visible in finished interfaces with the naked eye. When scaling an icon from 32px to 16px, the line visually 'thins out', angles lose readability, and small details merge into a mush.

• Line thickness does not scale proportionally to size — it is individually adjusted for each grid step to maintain consistent visual weight.
• Rounding radii on small sizes are increased relative to the geometry, otherwise the angle becomes almost sharp.
• Details that are readable at 32px (for example, the second line inside the arrow) should be removed at 16px — otherwise the icon becomes a blob.

Alfa-Bank in its 2500-icon guideline solves this radically: for each size, there is a separate rendered version, not derived from one master file. This is more expensive at the creation stage, but eliminates endless bug reports about 'icons looking different on different screens'. Micro-icons 12–16px are a separate category that cannot be left to automatic scaling: they are drawn with a minimal set of details from scratch.

A brand technique as a distinctive layer

Technical parameters — grid, line thickness, angles — make icons neat, but not recognizable. Recognizability is provided by a brand technique, fixed as a rule, not as a coincidence. For Selectel, this is a specific formula: the outer side of the corner is rounded four times stronger than the inner side, and the contour thickness is fixed at 4px. The formula sounds like a technical detail, but it is precisely this that makes the silhouette of Selectel icons distinguishable from thousands of similar sets, giving them a strict line and right angle.

If your guideline does not contain such a 'signature' — a set of techniques that a designer applies unconsciously — icons will simply be neat but interchangeable with any other brand.

Semantic layer: one form, different functions

This is a topic that almost all sources avoid, yet it directly affects the size of the library. The problem is that the same form can mean different things in different contexts: a circle with a plus sign means 'add', 'create', 'upload' depending on the product section. Drawing a new icon for each case leads to the set swelling to an unmanageable state.

The solution is subglyphs, micro-icons-modifiers that are overlaid on the base form and change its meaning without creating a new entity. This approach is applied at Alfa-Bank: the base form of a document plus a small subglyph-arrow gives 'download document', plus a subglyph-plus — 'create document'. In the brandbook this is recorded as a separate section with a table of combinations 'base + modifier = value', not as arbitrary designer creativity on the spot.

How to manage a growing library without chaos

A guideline that does not include a process for adding new icons is doomed to become obsolete within the first quarter of active product development. A working model, tested in practice at large banks — for example, at Raiffeisenbank — is built as follows:

1. A designer who needs a new icon first checks the library and subglyphs — can the required meaning be assembled from existing elements?
2. If a ready solution is not available, the icon is drawn according to the existing grid, line thicknesses, and the brand's signature technique.
3. The draft undergoes approval by at least two other designers on the team — not the author.
4. The final decision is made by a brand expert or the person responsible for the brandbook — he checks for stylistic conformity, not just technical parameters.
5. The icon is added to the library with a version, date, and author's name — this simplifies rollback if it turns out a month later that the form conflicts with another.

Without such a process, each designer decides for themselves where to place the rounded corner and by how many degrees to cut the angle — and after a year three generations of the same metaphor live in the interface.

Exceptions: when to allow them and how to record them

No guideline covers 100% of cases — and a good brandbook honestly states this, not pretending to be universal. The exception is justified when strict adherence to the grid makes the icon unreadable: complex composite symbols, icons for highly specialized industry terms, localized variants for different markets. The rule is simple — the exception is recorded on a separate page in the brandbook with an explanation of why the standard grid did not fit, and is signed by the same expert who approves the new icons. If exceptions grow to more than five or seven per hundred icons — this is a signal to review the grid itself, not to proliferate caveats.