---
# System prepended metadata

title: Как нарисовать стандартную иконку

---

Статья Как нарисовать стандартную иконку
[Все доки](https://hackmd.io/UbcEkPsoSXiok4QZx_TnIQ)
# Как нарисовать стандартную иконку

## Типы иконок
Для большинства мест в интерфейсе подходят наши стандартные навигационные иконки. Это те иконки, которые используются повсеместно на сайте и приложении, и как правило выполняют какую-то служебную функцию. Например:
- вернуться на экран назад (стрелочка)![](https://i.imgur.com/EbCC1te.png)

- удалить товар (ведёрко)![](https://i.imgur.com/99t4FTS.png)

- перейти к выбору адресной доставки (домик)![](https://i.imgur.com/IQglcJA.png)

- выбрать дату (календарь)![](https://i.imgur.com/AL8PqmO.png)

и так далее.

### Таких стандартных иконок у нас два размера: 
- [16х16](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons?node-id=1%3A13) 
- [24х24](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons?node-id=1%3A31)

Эти размеры обозначают размеры фрейма, в которые вписаны иконки. Непосредственные размеры иконок чуть меньше и могут не совпадать от иконки к иконке — это нормально. 

![](https://i.imgur.com/hr06gbl.png) ![](https://i.imgur.com/3JY5L3V.png)




### Также иконки бывают трёх видов
- Stroked — линейные
- Filled — с заливкой
- Colorful — с заданным цветом

в основном мы используем линейные иконки, а иконки с заливкой используются, чтобы показать смену состояния. 
Например, товар до добавления в избранное и после добавления в избранное:

![](https://i.imgur.com/ojleDZX.png)

### Что нельзя
Нельзя изменять размер иконок, растягивать их или ужимать.
Нельзя взять иконку 24х24 и уменьшить до 16х16. У многих больших (24х24) иконок есть маленькие (16х16) аналогичные — используйте нужный размер в зависимости от задачи.

Если существующей иконки нет в другом размере, мы её рисуем под этот размер, а не искажаем уже существующую.

![](https://i.imgur.com/1SWcH1m.png)


## Правила отрисовки

### Source и Fill
У каждой иконки есть два слоя:
- Source — рабочий слой (группа), в котором лежат исходники: обводки и формы, из которых рисовалась иконка. В готовой иконке этот слой всегда скрыт, но хранится на всякий случай, если нужно будет что-то перерисовать.
- Fill — верхний слой, который является уже готовой иконкой: все обьекты обьединены в одну векторную фигуру. Для этого мы используем команды Outline stroke (чтобы превратить обводку в обьект), Flatten и Union selection (чтобы слить все части иконки в одну)

![](https://i.imgur.com/moRhHSM.png)



### Толщина линейных иконок
Все иконки рисуются линией в два пикселя. Именно поэтому важно не масштабировать иконки, а рисовать отдельные под каждый размер.
Для линии (обводки) задаётся параметр расположения center.
![](https://i.imgur.com/3XP5PAG.png)


### Cкругления
В наших иконках нет острых углов.

Чтобы края линий не были острыми, для них устанавливается параметр сглаженных кончиков — round.

![](https://i.imgur.com/fZOlwwI.png) ![](https://i.imgur.com/RTZImLS.png)


Уголкам иконки задаём скругление. Как правило это 1-2 px.

### Области

Вокруг иконки до края фрейма, в котором она находится рекомендуется соблюдать охранный отступ, равный 1 px, но это не строгое правило. Главное, чтобы иконка не выбивалась по весу и визуальному центру из общего набора иконок.

Примеры стандартных форм иконок с охранными полями:

![](https://i.imgur.com/ojPKRnH.png)


### Цвет

Следим, чтобы добавленные в кит чёрные иконки были не совсем чёрными, а цветом 87% Black (#212121) из [токенов](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens?node-id=4%3A72).


## Передача в разработку

У разработчиков есть [библиотека стандартных иконок](https://sima-land.github.io/ui-quarks/), которая реализует наши иконки. При добавлении новой иконки или удалении существующей, нужно просить ответственного разработчика вносить изменения в библиотеку.

### Что нельзя 
- Оставлять Source видимым
- Использовать маски при отрисовке иконок

Если не соблюдать эти правила, иконка может попросту не отобразиться после её транспортировки в код, либо отобразится некорректно. Случаи были.
