Как выбрать набор иконок для проекта

Единый набор иконок делает интерфейс продуманным, а смесь из трёх наборов — собранным наспех. Бесплатных наборов сотни, поэтому задача не в том, чтобы найти иконки, а в том, чтобы найти один набор, который покрывает ваши потребности, подходит по стилю и имеет приемлемую лицензию. Вот быстрый способ решить.

1. Сначала проверьте охват

Составьте список из 15–20 иконок, которые нужнее всего вашему продукту (главная, поиск, настройки, пользователь, загрузка, корзина, редактирование, закрытие, шевроны, оповещения…), и добавьте несколько специфичных для вашей области — например, счёт, стетоскоп или ветка git. Затем поищите каждую в наборе-кандидате. Если в наборе нет двух ключевых иконок, позже придётся подмешивать другой, а несочетающиеся иконки — самая частая визуальная несогласованность в интерфейсах.

Размер набора важен, но это не всё: в Material Design Icons 7 447 иконок, в Fluent UI System Icons — 19 850, а в Heroicons — 1 288 тщательно отобранных. Для маркетингового сайта может хватить небольшого набора, а в сложной панели управления вы оцените глубину.

2. Выберите стиль: контурный, залитый или двухцветный

• Контурные иконки выглядят лёгкими и современными и подходят большинству интерфейсов. Примеры: Lucide, Tabler Icons.
• Залитые иконки лучше читаются в маленьком размере и в активных состояниях. Примеры: Material Design Icons, Bootstrap Icons (где есть и контурные версии).
• Наборы с несколькими начертаниями позволяют использовать контур в обычном состоянии и заливку в выбранном, не меняя семейство. У Phosphor шесть начертаний — от тонкого до двухцветного. Material Symbols предлагает контурный, скруглённый и острый стили. Heroicons и Fluent сочетают контур и заливку.
• Многоцветные иконки добавляют характера иллюстрациям, онбордингу и пустым состояниям, но их сложнее адаптировать под тему. Посмотрите многоцветные иконки интерфейса.

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

3. Подберите сетку и толщину линий

Иконки рисуются по сетке — чаще всего 24×24 пикселя. Они выглядят чётче всего в размере своей сетки или кратном ему, поэтому выбирайте набор, рассчитанный на размер, который вы действительно используете:

• Наборы UI 24px подходят для кнопок, меню и навигации — это самый частый случай.
• Наборы 16 и 32 px подходят соответственно для плотных инструментов и крупных сенсорных элементов.

На странице каждого набора указан размер сетки. Если вы сочетаете иконки с текстом, проверьте и толщину линий: линия 1,5 px гармонирует с обычным текстом, а 2 px — со средним или жирным.

4. Проверьте лицензию

Большинство наборов разрешают коммерческое использование, но условия различаются. MIT, ISC и Apache 2.0 требуют лишь приложить текст лицензии, а CC BY — видимо указать автора. Немногие наборы полностью запрещают коммерческое использование. На странице каждой категории есть таблица лицензий, а руководство по лицензиям иконок объясняет каждую из них.

5. Выбирайте поддерживаемые наборы

Активно поддерживаемый набор пополняется новыми иконками по мере появления потребностей (новые бренды, новые паттерны интерфейса) и исправлениями существующих. Наборы из категории архив без поддержки по-прежнему работают, но когда понадобится новая иконка, вы останетесь с этим один на один. Посмотрите и на экосистему: у популярных наборов есть официальные пакеты для React, Vue и других фреймворков, а также файлы для Figma.

Рекомендации по задачам

Всё ещё сомневаетесь? Откройте два кандидата рядом, найдите в обоих десять самых важных для вас иконок и поставьте их на реальный экран своего продукта. Обычно лучший вариант становится очевиден за несколько минут. Когда определитесь, в руководстве по использованию SVG-иконок описано, как добавить их в HTML, React или Vue.