Как описать правила набора иконок, чтобы его дорисовывали другие

Что разберём

Правила на одной страницешаблон
«Так» и «не так» на своих иконках
Ревью по правилам, а не по вкусупоиск
Что в набор не берёмтренажёр
Своё и чужое в одном наборе

Пример для всего урока. Набор магазина кофе из урока Middle вырос до сорока иконок, и рисует их уже не один человек: новые иконки присылают дизайнеры двух команд. Урок — о том, как сделать, чтобы набор рос их руками и не разъезжался, а вам не приходилось перерисовывать каждую присланную иконку.

1Правила на одной странице

Карточка правил из урока Middle отвечает на вопрос «как нарисовать». Чтобы набор дорисовывали другие, странице правил нужно отвечать ещё на три: что рисовать, чего не рисовать и как прислать.

Так устроены правила больших наборов.

Lucide — принципы рисования и чек-лист для тех, кто присылает иконку. Зачем она нужна, названа ли по тому, что изображено, совпадает ли с набором по размеру, плотности и оптическому весу.
IBM — все присланные иконки проходят ревью, прежде чем их опубликуют.
Material Design — правила показаны парами «так» и «не так»: иконки смотрят прямо, без наклона и объёма.

Раздел	Что в нём	В наборе магазина
Основа	Холст, поле, опорные фигуры	24, поле 2, круг 20, квадрат 18
Линия и форма	Толщина, концы, скругления, заливка, перспектива	Линия 2, всё скруглено, без заливки, предмет смотрит прямо
Метафоры	Какой картинкой обозначается какой смысл	Корзина — тележка, избранное — сердце, оценка — звезда, удалить — мусорная корзина
Состояния	Как иконка показывает «выбрано», «новое», «нельзя»	Выбрано — заливка, новое — точка акцентом справа сверху
Размеры и цвет	Какие размеры, что с маленьким, откуда цвет	24, 20, 16 уменьшением; цвет текста
Имена и файлы	Как называть и куда класть	Предмет латиницей, компонент и файл называются одинаково
Чего не берём	Что в набор не попадает и почему	Логотипы, иконки для одного экрана, второй значок на тот же смысл
Источники и лицензии	Какие чужие наборы допустимы и как это записывать	Только открытые лицензии, реестр источников
Как прислать	Что приложить и кто принимает	Зачем иконка, где стоит, чек-лист автора, ревью письменно

Страница правил набора · заготовка

НАБОР: ______________   владелец: ______________   версия: ___   дата: __.__.____

1. ОСНОВА
холст __ × __, поле __, опорные фигуры: круг __, квадрат __, прямоугольники __ × __

2. ЛИНИЯ И ФОРМА
линия __, концы и углы ______, скругления __, заливка ______
перспектива: прямо, без наклона и объёма
детали: промежутки не меньше __

3. МЕТАФОРЫ (смысл → картинка)
______________ → ______________
______________ → ______________

4. СОСТОЯНИЯ
выбрано: ______   новое: ______   недоступно: ______

5. РАЗМЕРЫ И ЦВЕТ
размеры: ______   маленький размер: ______   цвет: ______

6. ИМЕНА И ФАЙЛЫ
имя: ______   файл: ______   папка: ______

7. ЧЕГО НЕ БЕРЁМ
______________________________________

8. ИСТОЧНИКИ И ЛИЦЕНЗИИ
допустимые лицензии: ______   реестр источников: ______

9. КАК ПРИСЛАТЬ ИКОНКУ
зачем нужна и где стоит; проверена по пунктам 1–6; в ряду из десяти не видна как новая;
ревью: кто ______, срок ______, замечания письменно со ссылкой на пункт

Пункты пронумерованы, чтобы в ревью ссылаться на них: «п. 2, линия 1,5 при правиле 2».

Правила отвечают на четыре вопроса: как рисовать, что рисовать, чего не рисовать и как прислать. Страница без двух последних — инструкция для одного автора, а не для команды.

2«Так» и «не так» на своих иконках

Правило словами понимают по-разному. Правило с парой картинок из своего же набора понимают одинаково.

Примеры «не так» рисуют на настоящих иконках продукта, а не берут из чужого руководства.

Тогда спор закрывается ссылкой на картинку, которую все в команде узнают.

Правила набора магазина · парами

Поле. Рисунок внутри поля 2

ТакНе так

Перспектива. Предмет смотрит прямо

ТакНе так

Детали. Промежутки не меньше 2

ТакНе так

Состояние. «Выбрано» — заливкой, не цветом

ТакНе так

Метафора. Один знак, без сюжета внутри

ТакНе так

Линия. Толщина 2 у всех

ТакНе так

«Так» и «не так» подписаны словами и рамкой, а не только цветом. Каждая пара — одно правило со страницы.

У каждого правила, о котором спорили, есть пара картинок. Новая пара появляется после каждого спора, который закончился решением.

3Ревью по правилам, а не по вкусу

Замечание со ссылкой на правило автор исправляет. Замечание «мне не нравится» он либо спорит, либо исправляет наугад.

Дизайнер из соседней команды прислал три иконки для новых фильтров: капсулы, френч-пресс и подарок к заказу. Вот они рядом с иконками набора.

Присланные иконки · рядом с набором

из набора капсулы френч-пресс подарок

Найдите замечания-вкус

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

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

Ревью трёх иконок · найдите замечания без правила

капсулыЛиния 1,5, в наборе 2 — п. 2, «Линия и форма».
капсулыКак-то грустно выглядит.
френч-прессКорпус выходит за поле снизу на 1 — п. 1, «Основа».
френч-прессЯ бы нарисовал турку, мне так привычнее.
подарокБант из шести линий с промежутком 1, на 16 сольётся — п. 2, детали.
подарокСлишком простой, добавь блеска.
подарокЛента залита, а набор линейный — п. 2, заливка.
френч-прессНе нравится оттенок серого.
все триИмена capsule, french-press, gift совпадают с компонентами — п. 6, всё в порядке.
все триНе чувствую бренда.

Капсулы: линия 1,5 при правиле 2.По правилу. Понятно, что исправить, и спорить не о чем: число и пункт.
Капсулы: «как-то грустно выглядит».Вкус. Что именно грустно? Если дело в тонкой линии — это уже первое замечание. Если в наклоне — есть ли про наклон правило? Нет правила — либо предложите его для страницы, либо снимите замечание.
Френч-пресс: корпус выходит за поле.По правилу. Видно, где и на сколько, и какой пункт нарушен.
Френч-пресс: «я бы нарисовал турку».Вкус. Метафору выбирают по разделу «Метафоры»: если там не записано, что заваривание — турка, у автора есть право на френч-пресс. Спор о метафоре закрывается записью в правилах, а не личным предпочтением.
Подарок: бант из шести линий.По правилу. Сказано, что сольётся и почему, со ссылкой на правило о деталях.
Подарок: «добавь блеска».Вкус, и против правил. Блики — это детали мельче 2 и объём, которых в наборе нет. Замечание толкает автора нарушить страницу.
Подарок: лента залита.По правилу. Заливка в наборе только у состояния «выбрано».
Френч-пресс: «не нравится оттенок серого».Вкус, и не по адресу. У иконки нет своего цвета: она берёт цвет текста. Если оттенок кажется неудачным, речь о цвете текста, и это разговор не с автором иконки.
Все три: имена совпадают с компонентами.По правилу. Хорошее ревью отмечает и то, что сделано правильно: автор видит, что пункт проверен.
Все три: «не чувствую бренда».Вкус. Что в наборе значит «бренд»? Если это скругления и линия, так и скажите и сошлитесь на пункт. Если что-то другое — это повод дописать правила, а не вернуть иконки автору.

Все пять найдены. Каждое замечание без правила — либо вопрос к ревьюеру «что именно?», либо пункт, которого не хватает на странице правил. Во втором случае правило дописывают, а иконки принимают.

Замечания по правилу тоже можно нажать: вы прочитаете, почему там всё в порядке, а счётчик «Найдено» не изменится.

Каждое замечание в ревью ссылается на пункт правил. Замечание, для которого пункта нет, превращается в предложение дописать правила.

4Что в набор не берём

Набор портится не только плохими иконками, но и лишними. Решение «не берём» — тоже работа, и у него есть причина.

Не берём	Почему	Что вместо
Второй значок на смысл, который уже есть	Человек начинает гадать, одно ли это	Существующая иконка
Иконку для одного экрана	Набор растёт, а пользы другим экранам нет	Картинка остаётся в макете этого экрана
Логотипы и знаки брендов	Их рисует владелец бренда и задаёт свои правила. Lucide не принимает логотипы брендов вовсе, в Material Symbols чужих логотипов тоже нет — только робот Android самой Google	Официальный знак из материалов самого бренда
Иконку, которую без подписи не понять	Подпись всё равно нужна, а иконка только занимает место	Слово
Иконку с несовместимой лицензией	Например, из набора только для некоммерческого использования	Своя иконка по правилам набора

В Atlassian Design System тот, кто предлагает новую иконку, сначала отвечает на вопрос, нужна ли здесь иконка вообще. А в парах «так» и «не так» там прямо написано: не рисовать новую, если подходящая уже есть.

Проверьте себя

Восемь иконок, которые предлагают в набор. Брать или нет?

Тренажёр · брать в набор?

Знак платёжной системы, перерисованный линией 2, для экрана оплаты.
Не братьЭто чужой знак, и перерисовывать его в своём стиле нельзя. Для экрана оплаты берут официальный знак из материалов самой платёжной системы.
«Без кофеина»: смысла в наборе нет, нарисована по всем правилам, нужна в фильтрах и в карточке товара.
ВзятьСмысл новый, используется в двух местах, правила соблюдены. Так и выглядит иконка, которая входит в набор без перерисовки.
«Подарок» с бантом из шести линий и залитой лентой.
Взять после правкиСмысл нужен, но две вещи против правил: детали и заливка. Замечания со ссылкой на пункты — и после исправления иконка входит в набор.
Иконка «Скидка для офисов» для одного баннера на главной.
Не братьИконка для одного места. Она остаётся в макете баннера и не занимает место в наборе.
Корзина-сумка «потому что так моднее», хотя корзина-тележка в наборе есть.
Не братьВторой значок на тот же смысл. Если тележка устарела, её заменяют на сумку во всём наборе — отдельным решением, а не второй иконкой.
Красивая иконка «Обжарка» из набора с лицензией CC BY-NC.
Не братьNC запрещает коммерческое использование, а магазин — коммерческий продукт. Смысл можно нарисовать самим по правилам набора.
«Капсулы» с линией 1,5 вместо 2.
Взять после правкиСмысл нужен, нарушение одно и понятное. Одна ссылка на пункт — и автор исправит сам.
«Френч-пресс» по всем правилам, нужен в фильтре «Способ заваривания» и в статьях о кофе.
ВзятьНовый смысл, несколько мест, правила соблюдены.

Сначала смысл: новый ли он и нужен ли больше чем в одном месте. Потом правила и лицензия.

Отказ записывают с причиной. «Не берём: логотип, п. 7» — и в следующий раз этот вопрос не поднимается.

5Своё и чужое в одном наборе

Когда в наборе есть и свои иконки, и взятые из открытых наборов, через год уже никто не помнит, какая откуда. Запоминать не нужно — нужен реестр.

Иконка	Откуда	Лицензия	Что сделано
`grinder`	Своя	—	Нарисована по правилам набора
`search`	Lucide	ISC	Перерисована по правилам набора, текст лицензии Lucide лежит с файлами набора
`capsule`	Tabler Icons	MIT	Толщина приведена к 2, текст лицензии Tabler лежит с файлами набора
`zoom`	Material Symbols	Apache 2.0	Изменена, файл помечен как изменённый, текст лицензии приложен

Условия разных лицензий нужно знать до того, как иконка попала в набор:

ISC и MIT — Lucide, Tabler, Heroicons, Phosphor. Уведомление об авторских правах и текст лицензии остаются со всеми копиями.
Apache 2.0 — Material Symbols. Приложить текст лицензии и пометить изменённые файлы.
CC BY 4.0 — например, иконки Font Awesome Free. Указать автора, дать ссылку на лицензию и отметить, если меняли.
CC BY-NC — только для некоммерческого использования. В коммерческий продукт не годится.
Собственные лицензии наборов. У Remix Icon с января 2026 года своя лицензия. В продукте иконки использовать можно, а продавать их отдельным набором и делать на их основе свой набор иконок — нельзя. Если ваш набор выложен как открытая библиотека, иконки Remix в нём, скорее всего, нарушают эту лицензию: она запрещает распространять на их основе свой набор.
CC0 — например, иллюстрации Humaaans и Open Peeps. Условий нет, но права на товарные знаки CC0 не затрагивает: логотип в такой картинке остаётся чужим.

Лицензия набора может поменяться. Remix Icon до января 2026 года был под Apache 2.0, а потом перешёл на собственную лицензию. Поэтому в реестре записывают не только лицензию, но и версию набора и дату, когда иконку взяли.

В наборе нет иконки без строки в реестре. Откуда, по какой лицензии, из какой версии и что с ней сделали.

6Задание

Опишите правила своего набора на одной странице, примите по ним три иконки, нарисованные другим человеком, и проведите ревью письменно.

Часть 1 · Страница правил, 1,5 часа

Заполните заготовку из первого раздела: девять пунктов, пронумерованных для ссылок.
Нарисуйте пары «так» и «не так» для трёх правил, о которых в команде спорили чаще всего.
Соберите реестр источников для иконок, которые уже есть в наборе.

Часть 2 · Три иконки от другого человека, по его времени

Попросите коллегу нарисовать три иконки для настоящих задач продукта — только по странице правил, без устных пояснений.
Всё, что он спросит по ходу, запишите: каждый вопрос — место, где страница молчит.

Часть 3 · Ревью, 30 минут

Напишите замечания письменно, каждое — со ссылкой на пункт правил.
Замечание без пункта превратите в правку страницы правил или снимите.
Примите иконки, когда автор исправит их сам, и внесите их в реестр.

Как понять, что задание выполнено. Чужая иконка вошла в набор без вашей перерисовки.

Что должно получиться

Страница правил из девяти пунктов с парами «так» и «не так».
Реестр источников и лицензий.
Письменное ревью трёх иконок со ссылками на пункты.
Список правок страницы по вопросам автора и замечаниям без пункта.

План работы: полтора часа на страницу правил и полчаса на ревью. Время коллеги на иконки — отдельно.

Частые сложности

«Страница получается на десять экранов». Правила — на одной странице, объяснения — ссылками. Если пункт не помещается в три строки, это два пункта.
«Коллега всё равно спрашивает в чате». Отвечайте ссылкой на пункт, а если его нет — сначала допишите пункт, потом ссылку.
«Иконка по всем правилам, но мне не нравится». Сформулируйте, что именно. Если это правило — допишите его на страницу и примените ко всем. Если нет — принимайте иконку.
«Не знаю, откуда взяты старые иконки». Поиск по картинке в Icônes или по открытым наборам обычно находит источник. Не нашли — перерисуйте по правилам и запишите как свою.

7Чек-лист и ошибки ступени

Набор растёт без вас, если

Правила на одной странице и пронумерованы
На странице есть метафоры, состояния, чего не берём и как прислать
У спорных правил есть пары «так» и «не так» на своих иконках
Каждое замечание в ревью ссылается на пункт
Замечание без пункта превращается в правку страницы или снимается
Отказ записан с причиной
У каждой иконки есть строка в реестре источников и лицензий
Иконки от других принимаются без вашей перерисовки

Что мешает

Правила только о том, как рисовать. Что рисовать и чего не брать, каждый решает сам.
«Не так» из чужого руководства. Команда не узнаёт своих ошибок в чужих картинках.
Ревью по вкусу. Автор исправляет наугад и в следующий раз угадывает снова.
Перерисовать самому. Быстрее сегодня, но набор перестаёт расти без вас.
Иконки без реестра. Через год никто не знает, откуда они и что можно с ними делать.

8Три ступени темы целиком

Тема прошла путь от одной иконки к набору, который растёт руками команды. Сначала своя иконка в чужом наборе, потом свой набор с правилами и экспортом. Теперь — правила, по которым набор дорисовывают другие.

Ступень	Что нужно уметь	Как проверить результат
Junior	Решать, нужна ли своя иконка; рисовать на холсте набора с его полем, толщиной и скруглениями; проверять в настоящем размере; отдавать чистый SVG; понимать лицензию набора	В ряду из десяти иконок вашу не видно как чужую
Middle	Задавать правила набора один раз; решать, что с маленьким размером; собирать иконки компонентами; настраивать экспорт; проверять в двух темах и в 16; держать один смысл — одну иконку	Смена цвета и размера любой иконки — одно действие, а не правка исходника
Senior — этот урок	Описывать правила набора на одной странице; показывать их парами «так» и «не так»; проводить ревью по пунктам правил; решать, что в набор не берём; вести реестр источников и лицензий	Чужая иконка вошла в набор без вашей перерисовки

Ориентир по этой теме: новая иконка от любого дизайнера команды встаёт в набор по странице правил, а спор о ней закрывается ссылкой на пункт.

Что почитать дальше

UI icons: design · contributeIBM Design Language · на английском · бесплатноПравила большого набора парами «так» и «не так» и порядок приёма: поиск дублей, заявка, ревью до 30 дней. В IBM присланную иконку может переделать команда бренда — урок учит, чтобы исправлял автор.
Lucide design languageLucide · на английском · бесплатноПравила рисования с парами «так» и «не так» — образец страницы правил для открытого набора. Чек-лист того, кто присылает иконку, лежит отдельно, в шаблоне запроса на GitHub.
System iconsMaterial Design, вторая версия · на английском · бесплатноПравила парами «так» и «не так»: прямой взгляд без объёма, одна толщина, целые координаты, простая форма вместо буквальной. Концы линий у Material прямые — в наборе урока скруглённые.
IconographyAtlassian Design System · на английском · бесплатноЧетыре вопроса до того, как предлагать иконку, — от «нет ли похожей» до «нужна ли иконка вообще», и пара «не рисовать новую, если подходящая уже есть». Стиль у Atlassian свой: линия 1,5 и прямые концы.
CC BY 4.0 · CC BY-NC 4.0Creative Commons · официальный перевод на русский · бесплатноЧто значит указать автора — имя, ссылка на лицензию, отметка об изменениях — и как лицензия определяет некоммерческое использование. Кратко — на странице-выжимке, полностью — в юридическом тексте по ссылке с неё; обе в официальном переводе на русский.