Сетка и размер
Пак рисуется в 24 px на уменьшенной сетке — так иконки гармонично стоят в контейнерах.
Пак заменяет существующий пак филловых иконок 24 px и постепенно включает в себя перерисованные метафоры из набора 36 px.
Размер 24 px
Размер выбирается один раз — при отрисовке. Иконку нельзя уменьшать или увеличивать из другого размера: масштабирование ломает выравнивание и вес линий, а пак становится неудобно использовать и поддерживать. Нужен другой размер — это отдельная отрисовка.
Охранная зона
Обычно рабочая область иконки 24 px — 20 px, то есть охранная зона по 2 px с каждой стороны. Мы уменьшили рабочую область на пиксель — до 19 px, и охранная зона стала 2.5 px: компактная иконка лучше смотрится в круглом контейнере, у которого визуальный вес меньше, чем у квадратного. Поэтому все основные формы тоже меньше стандартных на пиксель:
- круг — 19×19 px;
- квадрат — 17×17 px;
- прямоугольник горизонтальный — 19×15 px;
- прямоугольник вертикальный — 15×19 px.
Размеры записываем как Ш×В (X×Y в Figma).
В основе — сквиркл
Если у базовой формы сглаживаем углы, ставим ползунок Corner smoothing в Figma на 60%.
Смещение на полпикселя
Из-за уменьшенной сетки формы иногда приходится смещать на полпикселя относительно целого значения. Опасения, что на малом разрешении иконки будут «шакалиться», не подтвердились: у больших дизайн-систем вроде Apple шрифтовая иконографика тоже точно не стыкуется с пикселями — и это работает.