Что разберём
1Взять из набора, нарисовать или обойтись словом
Своя иконка — это время на рисование и риск, что её не поймут. Прежде чем рисовать, проверьте, нужна ли она.
Сначала поищите в наборе
И не одним словом: иконки называют по тому, что нарисовано, а не по смыслу.
Например, кофемолка может найтись как mill или grinder, а «повторить заказ» — как refresh.
Поиск сразу по многим наборам, например в Icônes, покажет, как задачу решили другие.
Но переносить иконку из чужого набора в свой не стоит: у неё будет другая сетка и другая линия. Возьмите её как подсказку, что рисовать.
Иконки понимают хуже, чем кажется
В Nielsen Norman Group пишут, что почти всем понятны лишь несколько иконок — дом, печать, лупа поиска, — а остальным нужна подпись.
Отвлечённое понятие вроде «программы лояльности» картинкой не объяснить совсем.
| Случай | Что делать | Пример в магазине |
|---|---|---|
| В наборе есть иконка с таким смыслом | Взять из набора | Лупа для поиска, корзина в нижнем меню |
| Предмет понятный, но в наборе его нет | Нарисовать по правилам набора | Кофемолка для фильтра «Помол» |
| Смысл отвлечённый, картинкой не объяснить | Обойтись словом | «Программа лояльности», «Условия возврата» |
Проверьте себя
Восемь мест в приложении магазина. Взять иконку из набора, нарисовать свою или написать словом?
Кнопка поиска в шапке каталога.
Взять из набораЛупа есть в любом наборе, и её понимают без подписи. Рисовать свою — только тратить время.
Фильтр «Помол»: в наборе нет ни кофемолки, ни чего-то похожего.
Нарисовать своюПредмет понятный и узнаваемый, а в наборе его нет. Рисуется по правилам набора.
Пункт меню «Программа лояльности».
Обойтись словомПонятие отвлечённое. Звезда или подарок будут значить что угодно, а слово значит ровно это.
Корзина в нижнем меню приложения.
Взять из набораКорзина есть в каждом наборе для магазинов, и её узнают сразу. Подпись под ней всё равно не помешает.
Фильтр формата: «Зёрна», «Молотый», «Капсулы». Зерно в наборе есть, капсулы нет.
Нарисовать своюКапсулу узнают, а три пункта фильтра должны выглядеть одной семьёй. Недостающую рисуют по правилам набора.
Отметка «обжарен на этой неделе» у свежего кофе.
Обойтись словомОгонёк или календарь заставят гадать. «Обжарен 24 сентября» понятно сразу и полезнее.
Кнопка «Повторить заказ»: в наборе есть круговые стрелки.
Взять из набораКруговые стрелки в наборе уже есть. Рядом — подпись «Повторить заказ», одни стрелки легко принять за «Обновить».
Раздел «Условия доставки и возврата» в профиле.
Обойтись словомГрузовик с листком бумаги прочитают кто как. Пункт списка со словами найдут быстрее.
2Почему своя иконка выглядит чужой
Новую иконку выдаёт не сюжет, а мелочи: размер, толщина линии, концы, скругления и детали.
Вот иконки из фильтров магазина и новая кофемолка.
Переключайте версии: нарисованную на глаз, с исправленной толщиной и по всем правилам набора. Верхний ряд в увеличении, нижний — в настоящем размере, 24 пикселя.
На глаз
Толщина исправлена
По правилам набора
Параметры набора
Чтобы иконка встала в ряд, выпишите параметры набора до того, как рисовать. Если в описании набора их нет, измерьте две-три готовые иконки в редакторе.
| Параметр | В наборе магазина | Кофемолка на глаз |
|---|---|---|
| Холст | 24 × 24 | 24 × 24 |
| Поле | 2 пикселя со всех сторон, рисунок в квадрате 20 × 20 | Рисунок до самого края |
| Толщина линии | 2 пикселя | 1,5 пикселя |
| Концы и углы линий | Скруглённые | Прямые |
| Скругление прямоугольников | 2 пикселя | Нет |
| Заливка | Нет, только линия | Нет |
| Детали | Между линиями не меньше 2 пикселей | Винтики и насечки вплотную |
Иллюстрации
С ними то же самое. Картинка для пустого экрана, которая стоит рядом с такими иконками, берёт у них толщину линии, скругления и два-три цвета из палитры продукта.
Иллюстрация в другом стиле будет выглядеть так же чужой, как кофемолка на глаз, только крупнее.
3Холст, поле и опорные фигуры
Иконку рисуют на холсте набора и не выходят за поле. Форму подгоняют под опорные фигуры, чтобы круглые и квадратные иконки казались одного размера.
Холст — квадрат 24 на 24. Поле — отступ 2 пикселя со всех сторон, рисунок живёт в квадрате 20 на 20.
Отступ нужен, чтобы иконки не слипались друг с другом и с краем кнопки. Включайте и выключайте слои и посмотрите, как кофемолка стоит на сетке.
Опорные фигуры
Они нужны из-за оптики. Круг, вписанный в тот же квадрат, что и квадрат, кажется меньше: у него нет углов.
Поэтому во второй версии Material Design круглые иконки рисуют по кругу диаметром 20, квадратные — по квадрату 18.
А вытянутые — по прямоугольникам 20 на 16 и 16 на 20. Так они выглядят одного размера.
4Проверка в настоящем размере
В увеличении любая иконка выглядит аккуратно. Правду показывает размер, в котором она стоит на экране.
Иконку рисуют крупно, а проверяют в тех размерах, где она будет: 24 в кнопке, 20 в поле, 16 в строке списка. И на обоих фонах — светлом и тёмном.
С насечками и без, 16 и 24 пикселя
Целые пиксели
Экран рисует пикселями. Линия толщиной 2, поставленная на целые координаты, ложится ровно на два столбца пикселей.
Сдвинутая на полпикселя, она ложится на три: крайние становятся полупрозрачными, и иконка выглядит размытой. На экранах с высокой плотностью пикселей это почти не видно, на обычных мониторах — сразу.
Контраст
Иконка, без которой непонятно, что делает кнопка, должна иметь контраст с фоном не ниже 3 : 1. Это требование WCAG, критерий 1.4.11, уровень AA.
5SVG для разработки
Разработке нужен файл, который встаёт в код как есть: один рисунок, без служебного мусора и с цветом, который можно поменять.
Вот кофемолка, как она часто выходит из редактора без настройки экспорта, и та же кофемолка, готовая к передаче.
Из редактора
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="Frame 12" clip-path="url(#clip0_12_3)"> <g id="Group 4"> <rect id="Rectangle 7" x="5" y="12" width="14" height="9" rx="2" stroke="#1B1F24" stroke-width="2"/> <path id="Vector 3" d="M8 12L7 8H17L16 12" stroke="#1B1F24" stroke-width="2" stroke-linejoin="round"/> <path id="Vector 5" d="M12 8V4H17" stroke="#1B1F24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <circle id="Ellipse 2" cx="18" cy="4" r="1" stroke="#1B1F24" stroke-width="2"/> <path id="Vector 6" d="M10 17H14" stroke="#1B1F24" stroke-width="2" stroke-linecap="round"/> </g> </g> <defs> <clipPath id="clip0_12_3"> <rect width="24" height="24" fill="white"/> </clipPath> </defs> </svg>
Готовый к передаче
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="12" width="14" height="9" rx="2"/>
<path d="M8 12 7 8h10l-1 4"/>
<path d="M12 8V4h5"/>
<circle cx="18" cy="4" r="1"/>
<path d="M10 17h4"/>
</svg>
| Что в файле | Зачем |
|---|---|
viewBox="0 0 24 24" | Холст набора. Размер на экране задаёт разработка, рисунок масштабируется целиком |
stroke="currentColor" | Цвет берётся у текста рядом, поэтому иконка сама перекрашивается в тёмной теме и на кнопке |
fill="none", толщина, концы и углы | Параметры набора один раз на весь файл, а не у каждой линии |
Нет id, групп и обрезки | Они только занимают место, а одинаковые id у двух иконок на одной странице ломают друг другу рисунок |
Имя grinder.svg | Что нарисовано, латиницей, как у соседей по набору, а не icon-new-final2.svg |
Почистить файл помогает SVGOMG: он убирает служебные данные редактора, а переключатель Show original показывает, не испортилась ли при этом форма.
Цвет на currentColor и лишнюю обрезку рамки из Figma он не заменит — это правят руками. После чистки откройте файл в браузере и сравните с макетом.
Что иконка значит
Допишите это для разработки. Если иконка стоит рядом со словом, экранному диктору её не читают. Если кнопка состоит только из иконки, ей нужно название словами — «Помол», — иначе диктор скажет просто «кнопка».
6Лицензия набора и своя иконка
Своя иконка — ваша. Но когда вы дорисовываете к чужому набору или меняете его иконки, условия набора продолжают действовать.
У открытых наборов условия простые, но они есть. Ниже — что они требуют, если иконки набора попадают в ваш продукт:
| Набор | Лицензия | Что нужно |
|---|---|---|
| Lucide | ISC | Сохранять текст лицензии с файлами набора, которые вы распространяете |
| Tabler Icons, Heroicons, Phosphor | MIT | То же: текст лицензии остаётся с файлами |
| Material Symbols | Apache 2.0 | Приложить текст лицензии и отметить файлы, которые вы изменили |
| Remix Icon | Собственная, с января 2026 года | В продукте можно. Продавать иконки отдельным набором и делать на их основе свой набор иконок нельзя |
| Font Awesome Free | CC BY 4.0 для иконок | Указать автора. В скачанных файлах указание уже стоит в комментариях |
Лицензии иллюстраций
С иллюстрациями условия разнообразнее:
- unDraw разрешает ставить картинки в коммерческий продукт без указания автора, но не разрешает раздавать и продавать их как свои наборы;
- Storyset бесплатен, если указать сайт как источник, без этого — по подписке Flaticon Premium;
- Humaaans и Open Peeps выложены под CC0: условий нет совсем.
7Найдите чужие иконки
Иконки фильтров и меню магазина. Пять из десяти нарушают правила набора.
Нажимайте на иконки, которые выбиваются из ряда. В разборе будет, каким параметром.
Иконки показаны в 32 пикселя, чтобы на них было удобно нажимать.
- Чашка.По правилам. Линия 2, концы скруглены, рисунок в поле.
- Избранное — залитое сердце.Заливка. Набор линейный, и залитая иконка сразу темнее и тяжелее соседей. Залитое сердце можно оставить как состояние «уже в избранном», но основная иконка — контуром.
- Корзина.По правилам. Та же линия и те же скругления, колёса — точки, как у соседей.
- Профиль — линия тоньше.Толщина. Линия 1,5 вместо 2. В ряду иконка выглядит бледнее, будто неактивная.
- Помол — кофемолка.По правилам. Та самая кофемолка из урока. Нарисована по правилам набора, и её не видно как новую.
- Время доставки — часы во весь холст.Размер. Круг выходит за поле и упирается в края холста. Часы кажутся крупнее всех остальных. Круглой иконке хватает круга диаметром 20.
- Поиск.По правилам. Круг в поле, ручка лупы заканчивается у его края.
- Уведомления — колокольчик с острыми углами.Концы и углы. Концы линий обрублены, углы острые, а у всего набора они скруглены. Разница мелкая, но в ряду иконка выглядит жёстче остальных.
- Доставка — грузовик.По правилам. Прямоугольник кузова скруглён на 2, как у кофемолки, колёса в поле.
- Зёрна — зерно с точками и штрихами.Детали. Точки и штрихи ближе 2 пикселей друг к другу. На 24 и тем более на 16 они сливаются в пятно, и зерно становится похоже на что угодно.
Все пять найдены. Каждая чужая выбивается одним параметром: заливкой, толщиной, размером, концами или деталями. Кофемолка, которую вы рисовали весь урок, в чужие не попала.
8Задание
Найдите в своём продукте задачу, для которой нет подходящей иконки, нарисуйте её и поставьте рядом с иконками набора.
Часть 1 · Правила набора, 15 минут
- Найдите задачу, для которой в наборе нет иконки, и проверьте по первому разделу урока, что иконка здесь вообще нужна.
- Выпишите правила набора: холст, поле, толщину, концы, скругления, заливку, детали. Нет описания — измерьте две-три готовые иконки.
- Узнайте лицензию набора и запишите её.
ИКОНКА: ______________ смысл: ______________ где стоит: ______________ НАБОР: ______________ лицензия: ______________ ПРАВИЛА НАБОРА холст: __ × __ поле: __ px толщина линии: __ px концы и углы: скруглённые / прямые скругление прямоугольников: __ px заливка: нет / есть детали: промежутки не меньше __ px ПРОВЕРКА размеры 16 / 20 / 24 — проверено в каждом: да / нет светлый и тёмный фон — проверено: да / нет контраст с фоном: __ : 1 в ряду из десяти её не отличить от соседей: да / нет ФАЙЛ имя: ______________.svg цвет: currentColor групп, id и обрезки нет: да / нет название словами для кнопки без подписи: ______________ откуда иконка: своя / из набора ______________
Часть 2 · Нарисовать, 40 минут
- Создайте холст набора и включите пиксельную сетку.
- Выберите опорную фигуру по форме предмета: круг, квадрат или прямоугольник.
- Соберите предмет из простых фигур с толщиной и скруглениями набора. Сначала силуэт, детали — только если без них предмет не узнать.
- После каждого шага смотрите иконку в 100 %, а не только в увеличении.
Часть 3 · Проверить и отдать, 15 минут
- Поставьте иконку в ряд из десяти иконок набора на светлом и тёмном фоне, в 16, 20 и 24 пикселя.
- Покажите ряд коллеге и спросите, какая иконка новая. Если угадал сразу, сравните с соседями по одному параметру.
- Выгрузите SVG, почистите в SVGOMG, назовите по правилам набора.
Что должно получиться
- Иконка в SVG, готовая к передаче в разработку.
- Ряд из десяти иконок с вашей — на светлом и тёмном фоне.
- Заполненный шаблон с правилами набора и проверкой.
План работы: 15 минут на правила, 40 на рисование, 15 на проверку. Всего — чуть больше часа.
Частые сложности
- «В увеличении ровно, на экране криво». Обычно виноваты точки на полупикселях или детали мельче 2 пикселей. Проверяйте в 100 % после каждого шага, а не в конце.
- «У набора нет описания правил». Откройте две-три иконки в редакторе и измерьте холст, отступ до края, толщину и радиусы. Этого хватит.
- «Предмет не узнаётся». Уберите детали и оставьте силуэт. Если без подписи всё равно не понять, это нормально: подпись нужна почти любой иконке.
- «Всё по правилам, а иконка всё равно чужая». Сравните плотность: сколько линий на холсте у соседей и у вашей. Иконка с вдвое большим числом линий выглядит темнее при той же толщине.
9Чек-лист и ошибки
Иконка готова, если
- Её действительно нет в наборе, а предмет узнаётся
- Холст и поле как у набора, рисунок за поле не выходит
- Форма подогнана под опорную фигуру
- Толщина, концы, углы и скругления как у соседей
- Между линиями не меньше 2 пикселей
- Проверена в 16, 20 и 24 пикселя на светлом и тёмном фоне
- SVG без групп, id и вписанного цвета, имя по правилам набора
- Записано, откуда иконка и по какой лицензии набор
Что мешает
- Рисунок до края холста. Иконка кажется крупнее соседей и слипается с краем кнопки.
- «Почти такая же» толщина. 1,5 вместо 2 в ряду читается как неактивная иконка.
- Детали ради красоты. На 16 пикселях они превращаются в пятно.
- Проверка только в увеличении. Размытие и слипшиеся линии видны лишь в настоящем размере.
- Иконка из чужого набора. Своя сетка и своя линия, и в ряду её видно сразу.
10Три ступени темы
В этом уроке учимся рисовать отдельную иконку, которая встаёт в готовый набор. На следующих ступенях — собирать свой набор с общими правилами и настроенным экспортом, а потом описывать правила так, чтобы набор дорисовывали другие.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior — этот урок | Решать, нужна ли своя иконка; рисовать на холсте набора с его полем, толщиной и скруглениями; проверять в настоящем размере; отдавать чистый SVG; понимать лицензию набора | В ряду из десяти иконок вашу не видно как чужую |
| Middle | Задавать правила набора один раз; собирать иконки компонентами с цветом и размером в переменных; настраивать экспорт; проверять набор в двух темах и в мелком размере; не заводить два значка на одну задачу | Смена цвета и размера любой иконки — одно действие, а не правка исходника |
| Senior | Описывать правила набора для других; собирать примеры «так» и «не так»; принимать чужие иконки по правилам; решать, что в набор не берём; держать лицензии в порядке | Чужая иконка вошла в набор без вашей перерисовки |
Что почитать дальше
- System iconsХолст, поле и опорные фигуры с картинками: откуда берутся 24, 20 и 18. У Material концы линий прямые, а рисунок может заходить в поле ради веса — в наборе урока и то и другое иначе.
- Lucide design languageЧетырнадцать правил открытого набора с парами «так» и «не так»: холст 24, линия 2, скругления 1 и 2, промежутки от 2 пикселей. Удобно сверять свою иконку, только поле у Lucide — 1 пиксель, а не 2, как в уроке.
- How to Master Pixel Perfect IconsКак держать иконку на пиксельной сетке: целые размеры, координаты и толщины, проверка в Pixel Preview. Статья 2015 года, все шаги — для Adobe Illustrator; про линию в 1 пиксель на половинках пикселя в ней ничего нет.
- Icon UsabilityКакие иконки узнают без подписи — дом, печать, лупа — и почему подпись советуют даже знакомой иконке. Там же правило пяти секунд и путаница сердца со звездой. Статья 2014 года, обновлена в 2024-м.
- SVGOMGЧистит SVG от служебных данных редактора, а переключатель Show original показывает, не испортилась ли форма. Цвет на currentColor и обрезку рамки из Figma он не заменит — это правят руками.