Набор иконок выглядит собранным, если все значки совпадают по пяти параметрам: контур или заливка, толщина линии, скругления, детализация и цвет. Проще всего этого добиться, взяв все иконки из одного открытого набора вроде Tabler или Lucide, а не из разных источников по одной штуке. На сборку такого набора для лендинга уходит около получаса.
Почему разнобой заметен даже тому, кто не дизайнер
Иконки для сайта обычно подбирают в последний момент. Блок преимуществ свёрстан, нужны шесть значков, и их берут из первых результатов поиска по картинкам. Одна иконка контурная, вторая с заливкой, третья объёмная, с тенью и градиентом. По отдельности каждая выглядит нормально. Рядом они превращаются в случайный набор.
Посетитель не скажет "у вас значки из разных комплектов". Он скажет "что-то тут дешёвое" и не сможет объяснить, почему. Ощущение аккуратности складывается из мелочей, и разнобой в иконках рушит его быстрее, чем опечатка в тексте. Хорошая новость: единый комплект собирается бесплатно и примерно за полчаса. Создавать иконки с нуля не придётся, хватит одного открытого набора и трёх настроек.
Ниже по шагам: какие параметры делают набор единым, где скачать иконки бесплатно, какой размер ставить и в каких случаях всё-таки нужна ручная доработка.
Пять параметров, по которым иконки должны совпадать
Единство стиля держится не на вкусе, а на конкретных вещах. Их можно проверить по списку.
Контур или заливка
Контурные иконки нарисованы линией, залитые - сплошным цветом. Смешивать их на одной странице нельзя: залитая всегда выглядит тяжелее и перетягивает взгляд на себя. Выберите один тип. Для светлых лендингов с большим объёмом текста контур обычно смотрится спокойнее.
Толщина линии
У контурных иконок есть толщина обводки: 1, 1.5 или 2 пикселя при базовом размере. Значок с обводкой 1 пиксель рядом со значком в 2 пикселя выглядит чужим, даже если оба похожи по манере. Внутри хорошего набора толщина у всех иконок одинаковая, а в некоторых наборах её можно поменять одним ползунком сразу для всего комплекта.
Скругления и детализация
Углы либо острые, либо скруглённые, у каждого набора своя геометрия. С детализацией так же: иконка с пятью внутренними элементами рядом с иконкой из двух линий смотрится инородно. Пятый параметр, цвет, разберу отдельно ниже. Правило короткое: один цвет на все значки страницы.
Самый надёжный способ: один набор на весь лендинг
Все пять параметров закрываются одним решением: берите значки из одного набора. Дизайнер набора уже выровнял толщину, углы и уровень детализации, вам остаётся выбирать подходящие по смыслу.
Одинаковость важнее красоты. Шесть простых иконок из одного набора выглядят дороже, чем шесть эффектных из шести разных.
Открытых наборов с бесплатной лицензией хватает с запасом. В каждом из перечисленных ниже сотни и тысячи иконок, тема для блока преимуществ найдётся почти наверняка.
| Набор | Иконок | Стиль | Лицензия |
|---|---|---|---|
| Tabler Icons | больше 5000 | контур, часть с заливкой | MIT |
| Lucide | около 1500 | контур | ISC |
| Phosphor | больше 1200 тем, у каждой 6 начертаний | от тонкого контура до заливки | MIT |
| Bootstrap Icons | около 2000 | контур и заливка | MIT |
| Heroicons | около 300 | контур и заливка | MIT |
Мой выбор по умолчанию - Tabler или Lucide: спокойные контурные значки с настраиваемой толщиной линии. Phosphor удобен тем, что весь набор переключается между начертаниями целиком: решили перейти с контура на заливку, и все иконки поменялись согласованно.
Лицензия: одна строка, которую нужно прочитать
У наборов из таблицы лицензии MIT и ISC. Это значит: можно использовать в коммерческом проекте, без оплаты и без ссылки на автора. Осторожность нужна на сайтах-агрегаторах, где вперемешку лежат бесплатные и условно бесплатные значки. У части иконок с таких площадок бесплатный вариант требует указать источник, и это условие обычно никто не читает.
Проверка занимает минуту: на странице набора найдите слово license и посмотрите, что разрешено. Иконка, скачанная просто из поиска по картинкам, лицензии не имеет вовсе, а автор у неё есть. Для бизнес-страницы это лишний риск на ровном месте.
Какой размер иконки ставить на лендинге?
Стандартная сетка контурных иконок - 24 на 24 пикселя. В блоке преимуществ лендинга их обычно увеличивают до 32-48 пикселей, и это нормально: вектор тянется без потери резкости. Больше 64 пикселей контурный значок ставить не стоит, линии становятся неестественно толстыми, а пустота внутри - заметной. Если нужен крупный графический элемент, это уже задача для иллюстрации, а не для иконки.
Главное правило размера: во всех однотипных местах он одинаковый. Шесть карточек преимуществ - шесть значков ровно по 40 пикселей, а не 38, 40 и 44, как выходит при вставке на глаз. Работает тот же принцип, что и в статье про сетку и отступы на лендинге: повторяющиеся значения создают порядок, произвольные его ломают. Разный размер иконки без явно заданной высоты - частая причина сдвигов вёрстки при загрузке, которые описывает метрика CLS в документации web.dev.
Цвет: один на все иконки
Радужный блок преимуществ, где каждый значок своего цвета, выглядит пёстро и отвлекает от текста. Рабочая схема простая: все иконки либо в акцентном цвете сайта, либо в цвете заголовков. Второй акцентный цвет допустим, если он есть в палитре страницы и используется системно, а не случайно.
Со светлым акцентным цветом проверьте контраст: тонкие линии теряются на фоне первыми. Как быстро проверить сочетания без специальных знаний, я показывал в статье про проверку цветов лендинга за пять минут.
Формат: SVG, а не PNG
SVG описывает иконку линиями и кривыми, а не точками. Такой значок остаётся резким на любом экране, весит меньше килобайта и перекрашивается одной строкой в коде или через CSS. PNG на экране с высокой плотностью пикселей мылится, весит больше и требует отдельного файла под каждый размер и цвет. Вес графики на странице напрямую влияет на скорость загрузки - общие принципы разобраны в материале MDN о производительности.
PNG оправдан в одном случае: конструктор или CMS не принимает SVG. Тогда экспортируйте картинку в двойном размере от того, что будет на странице, иначе на телефонах она поплывёт.
Когда иконку придётся создавать или дорабатывать?
Бывает, что нужной темы в наборе нет: узкая услуга, специфичный инструмент, локальная реалия. Создать иконку для сайта в стиле уже выбранного набора - задача на 20-30 минут для дизайнера в Figma. Он берёт соседние значки как образец толщины и скруглений и дорисовывает недостающий. Это дешевле, чем кажется, и точно лучше, чем вставить чужеродный значок из другого комплекта.
Второй путь проще: взять из того же набора иконку, близкую по смыслу. Гаечный ключ вместо редкого инструмента считывается нормально, потому что посетитель читает подпись, а значок только помогает глазу зацепиться. Если же задача выросла из значков в полноценную графику, посмотрите разбор про иконки и иллюстрации: там про то, когда сток допустим, а когда нужен кастом.
Частые ошибки
- Иконки из поиска по картинкам. Разные стили, разное качество и непонятные права. Худший источник из возможных.
- Эмодзи вместо иконок. На разных устройствах они отрисовываются по-разному, и страница на Android выглядит иначе, чем у вас на макете.
- Значок ради значка. Если иконка ничего не добавляет к подписи, блок чище без неё.
- Разный размер в однотипных карточках. Разница в 4-6 пикселей не осознаётся, но чувствуется как неряшливость.
- Детальная иконка в маленьком размере. При 20 пикселях внутренние элементы слипаются в кашу. Чем меньше размер, тем проще должен быть рисунок.
Как проверить результат за минуту
Откройте готовую страницу и посмотрите на все значки разом, не вчитываясь в текст. Удобно уменьшить масштаб до 50 процентов: стилевые выбросы на уменьшенной странице видны сразу. Любая иконка, которая выделяется толщиной, цветом или манерой рисунка, кандидат на замену.
Вторая проверка - телефон. Значки, которые нормально смотрелись на мониторе, на экране в 6 дюймов могут оказаться мелкими или, наоборот, громоздкими рядом с текстом.
Частые вопросы
Можно ли смешивать иконки из разных наборов на одном лендинге?
Лучше не смешивать. Даже похожие по стилю наборы отличаются толщиной линии и углами скруглений, и разница видна, даже если посетитель не может её объяснить словами.
Какой формат иконок использовать для сайта: SVG или PNG?
SVG. Он резкий на любом экране, весит меньше и перекрашивается через CSS. PNG оправдан только если конструктор сайта не принимает SVG.
Нужно ли платить за иконки для коммерческого лендинга?
Нет, если набор распространяется по лицензии MIT или ISC - таких большинство среди популярных открытых наборов. Иконки, скачанные напрямую из поиска по картинкам, лицензии не имеют вовсе, и это риск для бизнес-страницы.
Что делать, если в наборе нет нужной иконки?
Взять из того же набора значок, близкий по смыслу: посетитель читает подпись, иконка только помогает зацепиться взглядом. Если тема узкая, дорисовка в стиле набора у дизайнера занимает 20-30 минут.
Коротко
Возьмите один открытый набор: Tabler, Lucide или Phosphor. Скачайте из него все нужные значки в SVG, поставьте один размер и один цвет. Если нужной темы нет, возьмите ближайшую по смыслу или закажите дорисовку в стиле набора.
Итоговая проверка простая: все иконки страницы должны выглядеть так, будто их рисовал один человек в один день. Если ни одна не выбивается, набор собран правильно, и посетитель этого блока просто не заметит. Что и требовалось: иконки должны помогать читать страницу, а не привлекать внимание к себе.
