Как подружить иконки

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

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

Бывает так, что дизайнер использует в одном наборе иконки разных стилей, например объёмные иконки вместе с плоскими иконками, иконки с заливкой рядом с контурными иконками, иконки с высокой детализацией вместе с иконками в минималистичном стиле. Это портит визуал и возникает ощущение неряшливости проекта. Помимо этого иконки могут различаться по стилю линий — сплошные, прерывистые и рисованные (неравномерные) линии; по характеру — строгие с острыми углами, мягкие с закруглёнными углами; по динамике — динамичные и статичные; по степени реализма — реалистичные или абстрактные и т п.

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

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

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

Цветовое оформление иконок должно быть продуманно и обоснованно. Самый простой и ходовой вариант — это чёрные иконки на светлом фоне или белые — на тёмном. Правила подбора цветовой гаммы те же, что и при подборе цветовой гаммы в принципе для любой дизайнерской работы. Если иконки при этом смотрятся гармонично, читаемо, сочетаясь с основной цветовой гаммой интерфейса, то можно считать такое оформление успешным. Если же в одном наборе оказались иконки с градиентной заливкой и без неё (не считая того случая, если, например, используются реальные цвета иконок приложений) или иконки разные и по оттенку и по светлоте, то такой набор не будет выглядеть единым и гармоничным.

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

Ниже приведены удачные наборы иконок

А для тех, кто дочитал до конца — бонус! Мои любимые сервисы для поиска иконок в векторе:

Сайт iconer — https://iconer.app/

Сайт freepik (Для поиска бесплатных иконок нужно в фильтрах выбрать вектор, а также free, а затем ввести то что интересует в поле поиска) - https://www.freepik.com/

Плагин в Figma — iconify