Icons
Icons are the visual language of the interface. They help users recognize actions, objects, and states faster, reduce text volume, and make interactions with the product more intuitive. At the same time, an icon should not replace meaning—it should reinforce it.
In a design system, icons are an independent component with clear rules for design, usage, and support. Their purpose is to ensure interface consistency regardless of the team, product, or platform.
Principles
Consistency
All system icons must be designed in a unified style:
- identical line thickness
- uniform corner radii
- similar level of detail
- matching proportions
- consistent construction rules
Clarity
The user should understand the meaning of the icon without having to interpret the image for long. If there is a risk of ambiguous understanding, use a label.
Simplicity
The icon must be as simple as possible and easily recognizable even at a small size. Every extra element reduces recognition.
Scalability
Icons must look equally good at different sizes without losing legibility. The library is designed in a base size (e.g., 24×24 px). Proportional scaling is acceptable for most scenarios. If an icon is used at sizes of 16 px and below, it is recommended to create a separate optically adapted version. It must maintain legibility, have sufficient clearance between elements, and contain no excessive details.
Optical Weight
All icons must have the same visual weight. Even if the geometric dimensions match, the fill area can differ significantly.
Icon styles
Using multiple styles is acceptable only when there are clear rules for their application.
Outline
Outline icons without fill. Used in the majority of interface components. Benefits include visual lightness and versatility.
Filled
Filled icons. Used for active and selected states, accent actions, and increasing visual priority.
Duotone
Icons consisting of two levels of color or opacity. Used in analytical panels, dashboards, and marketing interfaces.
Grid
All icons are designed on a unified modular grid according to the same construction principles. The grid ensures visual consistency, simplifies the creation of new icons, and guarantees a uniform perception of the entire library.
Safe Area
A safe area is designated inside the grid, where the main elements of the icon are located. It creates uniform inner paddings and prevents the graphics from "sticking" to the edges.
The icon should not completely fill the grid. Small margins provide visual lightness and allow maintaining the same density across the entire library.
Keylines
Auxiliary lines and geometric shapes used when constructing icons. They help maintain uniform proportions, symmetry, and visual balance. The guides are not part of the final icon and are used only during the design stage.
Pixel Perfection
Paths and nodes must be aligned to the pixel grid to avoid blurry lines during export and rendering.
Vector objects are displayed on a screen consisting of individual pixels. If a line runs exactly along the pixel border, it looks sharp. If a line falls between two pixels, the browser or operating system antialiases it, which can make it look less crisp.
Sizes
The base icon size is determined by the line height of the base text. Other sizes are achieved by scaling.
Separate versions are created only when the level of detail needs to be adjusted: larger sizes allow for more detail, while smaller sizes require less.
When an icon is reduced in size, its primary shape and meaning are preserved. Secondary details may be simplified or removed if they become indistinguishable.
SVG vs Icon Fonts
SVG and icon fonts solve the same problem in different ways: SVG describes the geometry of the image, while icon fonts use font glyphs.
With icon fonts, it is simple: they are characters in the Unicode table of a custom font and are usually distributed as a single WOFF2 file, so almost all properties available for regular text apply to them. SVG icons are embedded as a separate file, an SVG Sprite, or inline SVG—and depending on this, they have different limitations and advantages:
Inline SVG
SVG code is placed directly in the HTML document. It allows you to control all icon elements via CSS and JavaScript, apply animations, and style individual paths. The downside is the increased HTML volume and markup duplication when reusing the same icon.
SVG Sprite
All icons are combined into a single SVG file and used via <use>. It allows storing the library in one file, reusing symbols, and efficiently caching the icon library. However, access to the internal structure of symbols is limited, which complicates styling and animating individual elements.
SVG File
Each icon is stored in a separate SVG file and linked via <img>. This method is easy to use and is well cached by the browser, but the SVG content is not accessible for styling: you cannot change the color, animate individual elements, or control the image structure.
Background-image / Data URI
SVG can be used as a background image (background-image) or embedded directly into CSS as a Data URI. These methods are primarily suitable for decorative graphics, since the SVG content is not accessible for styling and control.
Accessibility
Decorative Icons
Decorative icons do not add information that is not already available in the surrounding context. They should be hidden from assistive technologies and not announced by screen readers. W3C
Functional Icons
Functional icons convey information or represent an action. If there is no visible text describing their purpose, they need an accessible name provided through text, aria-label, or aria-labelledby. W3C
Critical Information
An icon should not be the only way to communicate important information. Information necessary to understand content or state should also be available through text or another accessible means.
Color
Color should not be the only way to indicate a state. For example, an error icon should not rely on red color alone to communicate an error; its shape or another visual cue should also convey the state.