Дизайн системы иконок: как построить иконографию, которая выдержит больше 50 символов

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

Эта статья рабочая версия решения. Сетка, толщина линии, оптическая коррекция, нейминг, управление и небольшой набор правил, которые удерживают систему иконок цельной после 50 символов. Никаких витрин «иконка недели», никаких шаблонов, притворяющихся системами. Только решения, благодаря которым настоящая библиотека переживает настоящую команду.

Что такое система иконок на самом деле

Система иконок это связный набор пиктограмм, подчинённых общим правилам. Размер сетки, толщина линии, радиус скругления, оптическое выравнивание, нейминг и процесс добавления новых иконок. Цель не в папке с SVG. Цель в системе, которую любой дизайнер или инженер может расширять, не ломая визуальный ритм продукта.

Куча иконок не система. Файл в Figma с 200 символами и без правил не система. У системы есть ограничения, именованные решения и письменный процесс на случай, когда кому-то нужна иконка, которой ещё нет.

Руководство по дизайн-системам описывает более широкую систему, внутри которой живут иконки. Эта статья глубоко копает именно слой иконографии.

Почему иконки важнее, чем кажутся

Иконки это самая плотная часть интерфейса любого продукта. Одна иконка 24x24 пикселя несёт больше смысла на квадратный дюйм, чем любой другой элемент экрана. Сделайте систему правильно, и продукт читается как единое целое. Ошибитесь, и каждый экран будет ощущаться странно так, что пользователи не смогут объяснить почему.

Иконки к тому же масштабируются причудливо. Дрейф шрифта между двумя экранами легко заметить. Дрейф иконок назвать сложнее, но чувствуется он громче. Мозг обрабатывает пиктограммы быстрее текста, а значит, несогласованность иконок он замечает быстрее, чем несогласованность текста.

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

---

Сетка и есть система

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

Базовая сетка

Выберите один размер базовой сетки и живите внутри него. Два варианта, которые работают в 2026 году:

• Сетка 24 пикселя для иконок продуктового интерфейса. Стандартный размер для большинства современных интерфейсов.
• Сетка 20 пикселей для плотных интерфейсов с данными, дашбордов и админок.

Сетка это не только размер холста. Это ещё и живая область внутри холста, где иконка действительно располагается. У сетки 24 пикселя живая область 20 пикселей, по 2 пикселя отступа с каждой стороны. Отступ даёт иконке воздух и не позволяет ей выглядеть зажатой рядом с соседними элементами.

Ключевые линии внутри сетки

У живой области есть внутренние ключевые линии (keylines), задающие форму. В живой области 20 пикселей есть четыре ключевые фигуры:

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

Толщина линии как токен

Выберите одну толщину линии и держитесь её. Большинство систем иконок использует линию 1,5 или 2 пикселя на сетке 24 пикселя. Выбирайте исходя из голоса бренда.

Линия 1,5 пикселя читается как лёгкая, техничная и современная. Линия 2 пикселя читается как уверенная, дружелюбная и доступная. Линия 3 пикселя читается как жирная, детская или принтовая. Выберите одну. Зафиксируйте как токен. Отклоняйте любой вклад с другой толщиной.

Глоссарий по дизайн-токенам объясняет, как толщина линии вписывается в общую архитектуру токенов.

---

Оптическая коррекция решает всё

Математическое выравнивание не равно визуальному. Иконки, идеально севшие на сетку, часто выглядят неправильно, потому что глаз не измеряет пиксели, он измеряет воспринимаемый вес и баланс.

Зачем нужна оптическая коррекция

Круг 20x20 пикселей и квадрат 20x20 пикселей не читаются как одинаковые по размеру. У квадрата больше визуальной массы, потому что он полностью заполняет свою ограничивающую рамку. У круга в углах пустое место, и глаз воспринимает его как объект поменьше.

Решение в том, чтобы рисовать круг чуть больше ограничивающей рамки, иногда на 1-2 пикселя. Математика говорит «неверно», глаз говорит «верно». Всегда доверяйте глазу.

Распространённые оптические поправки

Пять поправок покрывают большую часть работы с иконками:

• Круги выглядят больше квадратов. Увеличивайте ключевые линии кругов на 1-2 пикселя.
• Треугольники выглядят меньше квадратов. Увеличивайте ключевые линии треугольников на 2-3 пикселя.
• Диагонали выглядят тоньше горизонталей. Добавляйте диагоналям от 0,25 до 0,5 пикселя толщины.
• Центры асимметричных иконок уезжают. Центрируйте кнопки play, стрелки и шевроны оптически, на глаз, а не по ограничивающей рамке.
• Острые углы выглядят меньше. Слегка скругляйте внутренние углы, чтобы они совпадали по воспринимаемому весу с внешними.

Это не мнение. Проверьте любую иконку в двух версиях, математически точной и оптически скорректированной, рядом на малых размерах. Оптически скорректированная версия всегда побеждает. Всегда.

---

Стилевые решения, которые накапливаются

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

Радиус скругления

Выберите один радиус внешнего скругления и один радиус внутреннего. Они работают парой.

Внешний радиус 1 пиксель и внутренний 0,5 пикселя читаются как чёткие и современные. Внешний 2 пикселя и внутренний 1 пиксель читаются как дружелюбные и округлые. Набор с острыми краями без радиуса читается как архитектурный и серьёзный.

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

Окончания и соединения линий

У линий есть концы. Окончания (end caps) могут быть квадратными, круглыми или выступающими. Соединения (joins) между линиями могут быть острыми (miter), круглыми или срезанными (bevel). Выберите по одному варианту и применяйте во всей системе.

Круглые окончания и круглые соединения дают дружелюбный, располагающий набор иконок. Квадратные окончания и острые соединения дают точный, технический набор. Смешанные окончания в одной библиотеке дают набор, который выглядит недоделанным.

Заливка или контур

Большинство современных систем иконок поставляет два варианта каждой иконки: контурный для неактивных состояний и залитый для активных. Контурный вариант использует линию. Залитый использует ту же форму с закрашенной серединой.

Эти два варианта должны быть визуально сбалансированы. Залитая версия того же размера часто выглядит тяжелее и доминантнее контурной. Решение: слегка уменьшить площадь залитой версии на 1-2 пикселя, чтобы визуальный вес совпадал с контуром в том же масштабе.

Глоссарий по состоянию фокуса объясняет, как замена контурной иконки на залитую вписывается в общий дизайн состояний взаимодействия.

---

Нейминг иконок это половина системы

Библиотека из 200 отлично нарисованных иконок, которые никто не может найти, это библиотека, которой никто не пользуется. Нейминг это слой обнаруживаемости, и плохие названия убивают внедрение быстрее плохого рисунка.

Паттерны нейминга, которые масштабируются

Используйте нейминг от объекта, а не от метафоры. Иконка лупы называется search или magnifier, но никогда не find или look. Объект стабилен. Метафора меняется от контекста.

Используйте kebab-case для иконок из нескольких слов: arrow-left, chevron-down, cloud-upload. Единый регистр позволяет инженерам искать по библиотеке через grep, автодополнять её в IDE и не делать опечаток.

Направленные суффиксы используйте только при необходимости. Просто arrow недостаточно. arrow-left, arrow-right, arrow-up, arrow-down это минимальный набор. То же для шевронов, кареток и любых других направленных пиктограмм.

Именование вариантов

Когда у иконки несколько вариантов (контурный, залитый, двухтоновый), добавляйте вариант как суффикс:

• search (контур по умолчанию)
• search-filled
• search-duotone

Такой паттерн позволяет инженеру подтянуть search-filled в кнопку, не копаясь в отдельной папке. Предсказуемые названия быстрее идеальной организации.

Карты синонимов

Главный провал нейминга это иконка, которую дизайнер не нашёл, потому что искал не то слово. Стройте карту синонимов рядом с библиотекой. cart находится и по bag, shopping. home и по house, dashboard. delete и по trash, remove, bin.

Большинство современных инструментов поиска иконок (Iconify, Lucide, Phosphor) встраивают карты синонимов в интерфейс поиска. Сделайте то же во внутренней библиотеке или смиритесь с тем, что дизайнеры будут добавлять дубликаты, потому что не нашли существующую иконку.

---

Управление держит систему живой

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

Единый источник правды

Выберите одно место, где живут иконки. Либо библиотека Figma, либо репозиторий с SVG, либо хостинговый сервис вроде Iconify. Выберите одно. Библиотека живёт там. Каждый дизайнер берёт оттуда. Каждый инженер берёт оттуда.

Система с двумя источниками правды имеет ноль источников правды. Библиотека в Figma и библиотека в коде разойдутся к третьей неделе, и с этого момента каждый экран будет выходить с иконками, не совпадающими с системой.

Процесс вклада

Задокументируйте процесс добавления новой иконки. Он должен включать:

1. Сначала поиск. Убедитесь, что иконки ещё нет под другим названием.
2. Обоснуйте добавление. Одним предложением напишите, что иконка означает и где будет использоваться.
3. Рисуйте по спецификации. Совпадайте с сеткой, толщиной линии, радиусом скругления, окончаниями и соединениями существующей библиотеки.
4. Оптическое ревью. Второй дизайнер проверяет иконку на размерах 16, 20 и 24 пикселя на визуальный баланс.
5. Назвать и выпустить. Название следует паттерну нейминга. Выпуск в Figma и в код в одном PR.

Систему без процесса вклада обходят. В первый раз, когда дизайнеру срочно понадобится иконка, он скачает её из бесплатного пака и выпустит, не спрашивая. С этого момента у библиотеки появляется форк.

Процесс депрекации

Иконки устаревают. Редизайн хоронит старый стиль, фичу вырезают, обновление бренда меняет визуальный язык. Задокументируйте, как иконки покидают библиотеку, а не только как входят.

Помечайте устаревшие иконки в библиотеке заметной меткой. Держите их доступными 90 дней, чтобы существующие экраны успели мигрировать. Потом удаляйте. Библиотека, которая никогда ничего не удаляет, превращается в музей, а музеи игнорируют.

---

Как иконки попадают в код

Передача между дизайном и кодом это место, где ломается большинство систем иконок. Библиотека в Figma безупречна, библиотека в коде кладбище несогласованных SVG, и инженеры перестают доверять и той и другой.

SVG это формат

Отдавайте иконки в SVG. Не в PNG, не в иконочных шрифтах. SVG векторный, масштабируется до любого размера без потерь, поддерживает наследование текущего цвета для простой темизации и достаточно мал, чтобы встраиваться в компоненты.

У каждого SVG viewBox совпадает с сеткой (24x24 или 20x20), для линии и заливки используется currentColor, а лишние трансформации и стили исключены. Чистый SVG весит меньше 1 КБ. Большинство библиотек иконок отдаёт иконки по 3-5 КБ, потому что их экспортировали с настройками по умолчанию, которые вшивают метаданные, трансформации и инлайн-стили, никому не нужные.

Оптимизация не обсуждается

Пропускайте каждый SVG через SVGO, прежде чем он попадёт в репозиторий с кодом. SVGO вычищает метаданные, упрощает пути, убирает лишние атрибуты и в среднем сокращает размер файла на 60-80%.

Для библиотеки из 200 иконок разница между неоптимизированной и оптимизированной обычно составляет 400 КБ на каждой загрузке страницы. Это удар по Lighthouse, регресс по core web vitals и более медленный мобильный опыт без всякой причины.

Обёртки-компоненты

Оберните каждый SVG в типизированный компонент (React, Vue, Svelte). Компонент принимает размер, цвет и пропсы доступности. Инженер никогда не импортирует голый SVG. Он импортирует <Icon name="search" size={20} />, а остальное делает система.

Этот паттерн означает, что библиотека иконок может сменить внутренний формат экспорта (SVG, спрайт, иконочный шрифт), не трогая клиентский код. Компонент это API, SVG это реализация.

Глоссарий по передаче дизайна в разработку описывает более широкую дисциплину хендоффа. Иконки один из немногих случаев, когда дизайнеры и инженеры действительно делят ответственность.

---

Типичные провалы систем иконок

Каждый аудит иконок находит одни и те же провалы. Если система выходит хотя бы с одним из них, библиотека в одном редизайне от полной переписки.

Три толщины линии в одной библиотеке. Почти всегда означает, что библиотеку собрали из нескольких бесплатных паков. Решение: принудительно перерисовать весь набор в одной толщине.

Залитые и контурные варианты в разных масштабах. Залитая версия выглядит больше контурной, потому что никто не скомпенсировал воспринимаемый вес. Решение: уменьшать залитую версию на 1-2 пикселя, пока обе не станут читаться одинакового размера.

Несогласованный радиус скругления. У половины иконок скруглённые углы, у половины острые. Почти всегда потому, что два разных дизайнера вносили вклад без письменного правила. Решение: определить один радиус и отрефакторить.

Нейминг по метафоре. Иконки с названиями find, look, discover вместо объекта, который они изображают. Дизайнеры их не находят. Решение: переименовать по правилам «сначала объект».

Нет процесса депрекации. В библиотеке 350 иконок, 80 из которых не используются или заменены. Раздутость замедляет поиск и путает новых дизайнеров. Решение: ежеквартальный аудит и 90-дневный цикл депрекации.

---

Системы иконок в реалиях 2026 года

Три сдвига изменили то, как строятся системы иконок. Система должна их пережить.

Вариативные иконочные шрифты стали реальностью. Новые форматы позволяют одному файлу иконки нести несколько толщин, заливок и оптических размеров, плавно интерполирующихся. Техническое преимущество огромно, а дизайнерский риск в том, что команды выпускают каждый вариант на каждом экране, потому что могут. Выберите варианты, которые выходят. Остальные режьте.

ИИ-инструменты генерируют иконки за секунды. Midjourney, DALL-E и ChatGPT выдают сносную иконку по одному промпту. Риск в том, что дизайнеры перестают рисовать иконки и начинают их промптить, а это убивает целостность системы, потому что каждый промпт даёт чуть другой стиль. Используйте ИИ для первых черновиков. Каждый результат приводите к системе.

Lucide, Phosphor и Heroicons задают базовую планку. Эти открытые библиотеки поставляют 1500+ иконок с единой сеткой, толщиной и неймингом. Для большинства продуктов начать с одной из них и кастомизировать быстрее и лучше, чем строить с нуля. Кастомные иконки рисуются только для продуктовых понятий, которых нет в открытых библиотеках.

Глоссарий по wcag описывает базовые требования доступности, регулирующие контраст и подписи иконок. Иконкам в интерактивных элементах нужны доступные имена, а не только визуальные подписи.

---

FAQ

Какой размер сетки использовать в системе иконок?

Сетка 24 пикселя для общего продуктового интерфейса, 20 пикселей для плотных интерфейсов с данными. У сетки отступ 2 пикселя с каждой стороны, остаётся живая область 20 или 16 пикселей, где иконка действительно располагается. Выберите один размер и живите внутри него во всей библиотеке.

Какой толщины должны быть линии иконок?

От 1,5 до 2 пикселей на сетке 24 пикселя. 1,5 пикселя читается как лёгкая и техничная, 2 пикселя как уверенная и дружелюбная. Выберите одну толщину, зафиксируйте как токен и отклоняйте любой вклад с другой толщиной.

Что такое оптическая коррекция в дизайне иконок?

Практика настройки иконок так, чтобы они выглядели сбалансированно, даже когда математика говорит, что они выровнены. Круги выглядят больше квадратов, треугольники меньше, диагонали тоньше горизонталей. Оптическая коррекция компенсирует эти особенности восприятия. Всегда доверяйте глазу, а не ограничивающей рамке.

Иконки должны быть залитыми или контурными?

Большинство современных систем поставляет оба варианта. Контурные для неактивных состояний, залитые для активных. Два варианта должны быть визуально сбалансированы, что обычно означает залитую версию на 1-2 пикселя меньше контурной, чтобы воспринимаемый вес совпадал.

Как называть иконки в дизайн-системе?

Сначала объект, kebab-case, с направленными суффиксами при необходимости. Search, а не find. Arrow-left, а не back. Используйте карты синонимов, чтобы дизайнеры могли искать по альтернативным словам. Добавляйте суффиксы вариантов (filled, duotone), чтобы инженеры могли взять нужный вариант одним импортом.

Когда строить кастомные иконки, а когда брать открытую библиотеку?

Берите открытую библиотеку (Lucide, Phosphor, Heroicons) за основу. Рисуйте вручную только продуктовые понятия, которых в них нет. Строить набор из 300 иконок с нуля в 2026 году почти всегда пустая трата сил. Кастомизируйте открытую базу, документируйте добавления, выпускайте.

Система окупается

Цельная библиотека иконок самый дешёвый способ сделать продукт отполированным. Дрейфующая библиотека иконок самый быстрый способ сделать продукт дешёвым. Построить систему стоит одну-две недели дисциплинированной работы. Не построить её значит платить постоянный визуальный налог на каждом экране продукта, навсегда.

Выберите сетку. Выберите толщину. Выберите радиус скругления. Выберите паттерн нейминга. Напишите процессы вклада и депрекации. Оптимизируйте SVG. Оберните их в типизированный компонент. А потом следите за всем этим на код-ревью.

Колонка иконок на каждом экране один из самых плотных сигналов качества продукта. Сделайте её правильно один раз, и она вытянет остальной дизайн.

Если вам нужна команда, которая строит системы иконок как часть более широкой передачи дизайн-системы, наймите Brainy. Сетка, управление и код в одном проекте, а не прикрученные в конце.

Читайте также

• Руководство по дизайн-системам
• Дизайн визуальной иерархии
• Передача дизайна из Figma в разработку
• Чек-лист веб-доступности