Гид по иконкам: как не ошибиться в стиле

Мы работаем на модульной сетке 24×24 с безопасным отступом 2px от краёв. Это оставляет активную область 20×20 — ровно столько, сколько нужно, чтобы иконка не «притиралась» к соседним элементам и не сливалась с текстом. Для плотных списков и компактных кнопок используем сетку 16×16 с тем же правилом отступа в 1px.

Пиксельная идеальность означает, что горизонтальные и вертикальные линии штриха всегда ложатся на целые пиксели. Линия в 1.5px, смещённая на полпикселя, при рендере размывается и выглядит тоньше соседей. Поэтому мы выравниваем координаты по сетке и проверяем каждую иконку в 1× и 2×.

Мы фиксируем два значения и не отходим от них: 2px для острых, «технических» иконок и 4px для мягких, дружелюбных. Смешивать радиусы внутри одной коллекции нельзя — иначе иконка «дом» и иконка «настройки» будут казаться нарисованными разными людьми.

Важно различать внешний и внутренний радиус. У замкнутой формы внешний угол скругляется сильнее, а внутренний — слабее, чтобы углы не выглядели «съеденными». На практике это значит, что у одного и того же прямоугольника внешние углы — 4px, а внутренние (если есть) — 2px.

Мы выносим параметры иконок в Figma-токены: толщина штриха, радиус, цвет, размер. Когда разработчик или дизайнер создаёт новую иконку, он тянет эти значения автоматически. Так коллекция не расползается со временем и не превращается в мешанину.

Цвет тоже наследуется: активные иконки берут currentColor, а не жёстко заданный HEX. Это позволяет менять акцент всей серии одним значением — от #00b5c4 до #4b6bff — без перебора файлов.