Brand iconography: a unified visual language of signs
An icon as an heir of the logo, not its neighbor
A logo is a condensed formula of the brand: several lines, a tilt angle, a character of rounding. If iconography does not inherit these parameters, it begins to live separately from the identity, and the user subconsciously feels a rupture between how the brand looks «as a whole» and how it behaves in small details. VK solved this task through sharp angles and joints that literally repeat the geometry of the monogram — so the pictograms are read as a continuation of the logo, not as a separate library that accidentally ended up nearby.
The hybrid nature of the sign
Semiotician Charles Peirce divided signs into three types: iconic (resembling the object), indexical (pointing to a cause or effect), and symbolic (meaning established by convention, as with letters or numbers). In practice, strong icons almost never belong to just one type—they are hybrid. The "shopping cart" icon is iconic (resembling the object), but in the context of an interface it is simultaneously an indexical signal "delete." Developing iconography without accounting for this hybridity turns a set of signs into either literal pictures or an abstract cipher that must be explained to the user.
What turns a set of icons into a system
A system holds not on how effective each individual icon is, but on how predictable the entire library behaves. This is the key balance between novelty and continuity: each new icon must be recognizable as "ours," but must not literally repeat existing forms.
- uniform line thickness and one outlining principle (either fill only or stroke only—mixing breaks perception);
- coordinated radii of fillets — if one angle is sharp and the adjacent one is rounded for no reason, the eye considers this an error;
- one optical density of the form — icons should not 'argue' with each other in terms of visual weight on the screen;
- a single principle of construction (modular grid, base on a square or circle).
Form as a psychological signal
The choice between sharp and rounded angles is not an aesthetic decision, but a meaningful one. Sharp forms are perceived as precision, technicity, distance; rounded ones as friendliness, safety, humanity. Many brands consciously combine both approaches: sharp joints in accent elements and soft fillets in the main body of icons, to achieve both character and comfortable perception.
The same applies at the level of basic form archetypes, which are perceived subconsciously, regardless of the user's culture:
- circle — eternity, equality, absence of hierarchy;
- cross — center, orientation, reference point;
- rhombus and square — stability, earthly origin, belonging to a place.
Abstractness versus literalness — another fork in the road. A literal icon (e.g., 'envelope' for mail) is quicker to interpret for a new user, but it ages faster and expresses brand individuality less strongly. An abstract form requires adjustment, but becomes a trademark asset — once a user learns the sign once, they no longer confuse it with others.
Why scaling 'by eye' breaks the icon
When the icon is reduced or enlarged, not only the dimensions change — the line thickness, corner radii, and shape density also change. With simple stretching, a small icon loses readability: the lines become too thin, angles 'melt together', and the detail that was visible at 32 px disappears at 16 px. That is why Alpha-Bank created separate versions of the same icon for each size, rather than simply changing the height of the vector file — this made it possible to preserve readability on any screen.
Practice shows that there is no universal 'one size fits all' — icons exist within a set of fixed grids, and each brand chooses its own standard.
| Company / system | Approach to sizing | Feature |
|---|---|---|
| Google Material Icons | 24×24 px | a single base grid for all icons of the product |
| Toyota | three fixed sizes | when increasing, 1 px is added to each parameter instead of proportional stretching |
| Alpha-Bank | individual versions per size | separate drawing for each scale instead of resizing |
General rule: the smaller the icon, the thicker the line should be relative to its dimensions, and the fewer details it can carry. Working with standard grids — 16×16, 20×20, 24×24 or 32×32 px — sets a system within which the designer does not guess, but chooses a ready-made module.
How the library grows without inflation: subglyphs
When there are more than a hundred icons, the question arises: redraw each variation from scratch or combine meaning from basic elements? The second path is more reliable. Subglyphs are small modifiers (arrow, dot, plus, lock) that are overlaid on the base form and refine its meaning without creating a new icon from scratch. Alpha-Bank built its library of 2500 icons on this principle: base forms remain few and controlled, while meaningful variations are assembled combinatorially. This solves the problem that almost any growing product faces — the library either becomes a chaos of thousands of unique drawings, or remains a manageable system of modules.
Documentation: guidelines as a tool, not a showcase
The section on icons in the brandbook is often made 'for beauty' — showing a grid and a dozen examples. This doesn't work: the development team and external contractors need not a demonstration, but an instruction by which they can make decisions independently, without calling the brand manager for each new symbol.
- To fix the basic grid and allowable sizes (for example, 16/20/24/32 px) with indication of what happens to the line thickness and radius when transitioning between them.
- To describe the principle of form construction — sharp/rounded corners, relationship to the logo, allowable degree of abstraction.
- To specify the nomenclature of subglyphs and rules for combining them with basic forms.
- To introduce unified naming for files and layers — for example, icon/search/24 or DocumentOutline20 — so that the designer and developer operate with the same names.
- To add a checklist for verifying a new icon before adding it to the library and a flowchart titled 'what to do if a ready-made form is not available'.
A working guideline for iconography rarely comes in shorter than 50 pages — not because we need 'more text,' but because each rule requires examples of correct and incorrect application. A document without checklists and block diagrams turns into a beautiful collection of images that still has to be explained verbally to each new team — exactly what documentation was originally created for.
An icon as an heir of the logo, not its neighbor
A logo is a condensed formula of the brand: several lines, a tilt angle, a character of rounding. If iconography does not inherit these parameters, it begins to live separately from the identity, and the user subconsciously feels a rupture between how the brand looks «as a whole» and how it behaves in small details. VK solved this task through sharp angles and joints that literally repeat the geometry of the monogram — so the pictograms are read as a continuation of the logo, not as a separate library that accidentally ended up nearby.
The hybrid nature of the sign
Semiotician Charles Peirce divided signs into three types: iconic (resembling the object), indexical (pointing to a cause or effect), and symbolic (meaning established by convention, as with letters or numbers). In practice, strong icons almost never belong to just one type—they are hybrid. The "shopping cart" icon is iconic (resembling the object), but in the context of an interface it is simultaneously an indexical signal "delete." Developing iconography without accounting for this hybridity turns a set of signs into either literal pictures or an abstract cipher that must be explained to the user.
What turns a set of icons into a system
A system holds not on how effective each individual icon is, but on how predictable the entire library behaves. This is the key balance between novelty and continuity: each new icon must be recognizable as "ours," but must not literally repeat existing forms.
- uniform line thickness and one outlining principle (either fill only or stroke only—mixing breaks perception);
- coordinated radii of fillets — if one angle is sharp and the adjacent one is rounded for no reason, the eye considers this an error;
- one optical density of the form — icons should not 'argue' with each other in terms of visual weight on the screen;
- a single principle of construction (modular grid, base on a square or circle).
Form as a psychological signal
The choice between sharp and rounded angles is not an aesthetic decision, but a meaningful one. Sharp forms are perceived as precision, technicity, distance; rounded ones as friendliness, safety, humanity. Many brands consciously combine both approaches: sharp joints in accent elements and soft fillets in the main body of icons, to achieve both character and comfortable perception.
The same applies at the level of basic form archetypes, which are perceived subconsciously, regardless of the user's culture:
- circle — eternity, equality, absence of hierarchy;
- cross — center, orientation, reference point;
- rhombus and square — stability, earthly origin, belonging to a place.
Abstractness versus literalness — another fork in the road. A literal icon (e.g., 'envelope' for mail) is quicker to interpret for a new user, but it ages faster and expresses brand individuality less strongly. An abstract form requires adjustment, but becomes a trademark asset — once a user learns the sign once, they no longer confuse it with others.
Why scaling 'by eye' breaks the icon
When the icon is reduced or enlarged, not only the dimensions change — the line thickness, corner radii, and shape density also change. With simple stretching, a small icon loses readability: the lines become too thin, angles 'melt together', and the detail that was visible at 32 px disappears at 16 px. That is why Alpha-Bank created separate versions of the same icon for each size, rather than simply changing the height of the vector file — this made it possible to preserve readability on any screen.
Practice shows that there is no universal 'one size fits all' — icons exist within a set of fixed grids, and each brand chooses its own standard.
| Company / system | Approach to sizing | Feature |
|---|---|---|
| Google Material Icons | 24×24 px | a single base grid for all icons of the product |
| Toyota | three fixed sizes | when increasing, 1 px is added to each parameter instead of proportional stretching |
| Alpha-Bank | individual versions per size | separate drawing for each scale instead of resizing |
General rule: the smaller the icon, the thicker the line should be relative to its dimensions, and the fewer details it can carry. Working with standard grids — 16×16, 20×20, 24×24 or 32×32 px — sets a system within which the designer does not guess, but chooses a ready-made module.
How the library grows without inflation: subglyphs
When there are more than a hundred icons, the question arises: redraw each variation from scratch or combine meaning from basic elements? The second path is more reliable. Subglyphs are small modifiers (arrow, dot, plus, lock) that are overlaid on the base form and refine its meaning without creating a new icon from scratch. Alpha-Bank built its library of 2500 icons on this principle: base forms remain few and controlled, while meaningful variations are assembled combinatorially. This solves the problem that almost any growing product faces — the library either becomes a chaos of thousands of unique drawings, or remains a manageable system of modules.
Documentation: guidelines as a tool, not a showcase
The section on icons in the brandbook is often made 'for beauty' — showing a grid and a dozen examples. This doesn't work: the development team and external contractors need not a demonstration, but an instruction by which they can make decisions independently, without calling the brand manager for each new symbol.
- To fix the basic grid and allowable sizes (for example, 16/20/24/32 px) with indication of what happens to the line thickness and radius when transitioning between them.
- To describe the principle of form construction — sharp/rounded corners, relationship to the logo, allowable degree of abstraction.
- To specify the nomenclature of subglyphs and rules for combining them with basic forms.
- To introduce unified naming for files and layers — for example, icon/search/24 or DocumentOutline20 — so that the designer and developer operate with the same names.
- To add a checklist for verifying a new icon before adding it to the library and a flowchart titled 'what to do if a ready-made form is not available'.
A working guideline for iconography rarely comes in shorter than 50 pages — not because we need 'more text,' but because each rule requires examples of correct and incorrect application. A document without checklists and block diagrams turns into a beautiful collection of images that still has to be explained verbally to each new team — exactly what documentation was originally created for.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
