Scalable design system based on BEM
Как рисовать иконки
1. Сетка
Иконки должны быть выполнены с помощью сетки размером 16px (_size_s) или 24px (_size_m).
2. Базовые формы
Привязка к этим фигурам в сетке сохраняет пропорции во всем наборе.
Круг прямоугольник (горизонтальные и вертикальные) квадрат.
3. Размер
При создании иконок меньшего размера иногда можно просто изменить размер (выровняв по пиксельной сетке). Хороший пример иконки picture. Баланс между пробелами и штрихами по-прежнему выглядит хорошо при изменении размера.
Но в большинстве случаев элементы слишком малы и становится нечитаемыми при сжатии, поэтому имеет смысл сделать эти элементы целыми.
4. Толщина штриха
Толщина штриха должна быть 2px. Однако, в некоторых случаях допустима 1,5px.
5. Анатомия
Сложные формы должны образовываться слиянием простых фигур. Для создания дуг используйте круги. (Пример иконок notification и picture).
6. Скругления
Скругление углов не является обязательным и должно зависеть от того, как выглядят объект в реальной жизни. Обычно у конверта углы всегда прямые, а у телефона есть скругления.
7. Углы
Углы форм должны быть стремиться к 45 или 90 градусам.
8. Использование логотипов в иконках
Иногда в иконках необходимо использовать логотип других сервисов. В таких случаях мы не изменяем форму, а только подгоняем в сетку и если это возможно выравниваем по пиксельной сетке. (Пример иконок метки и блога)
9. Примеры (хорошо и плохо)