Иконки для сайта: где взять бесплатно и как использовать без вреда дизайну

Зачем сайту иконки

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

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

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

Где взять иконки для сайта бесплатно

Вот библиотеки, которыми мы пользуемся сами или которые часто видим в проектах. Условия лицензий — на октябрь 2026 года; перед использованием проверьте страницу лицензии на сайте библиотеки.

Лицензии MIT, ISC и Apache 2.0 разрешают бесплатно использовать иконки в коммерческих проектах и изменять их. Формально они требуют сохранять текст лицензии вместе с кодом библиотеки, но на практике, если вы просто вставили SVG-файлы в сайт, указывать автора на странице не нужно.

С агрегаторами вроде Flaticon и Icons8 правило другое: бесплатное использование обычно требует ссылки на автора или сервис на сайте. Если ссылку не поставили, вы нарушаете условия. На разборах мы находим такие иконки регулярно: дизайнер скачал набор, ссылку не поставил, а владелец сайта даже не знает об условии.

Иконки из поиска картинок

Иконка — такой же объект авторского права, как фото или иллюстрация (часть четвёртая ГК РФ). То, что её легко найти в поиске картинок, не значит, что её можно использовать. Если происхождение иконки неизвестно, замените её на аналог из открытой библиотеки. Это проще, чем разбираться с претензией. Те же правила для фото разобраны в статье фото для сайта.

SVG или PNG: какой формат иконок выбрать

Вывод простой: для иконок на сайте — SVG. PNG оставьте для случаев, когда платформа не принимает SVG, или для сложных объёмных иллюстраций.

Отдельный случай — фавикон, иконка сайта во вкладке браузера и в поисковой выдаче. У неё свои требования к размерам и форматам, мы разобрали их в статье фавикон для сайта.

Как использовать иконки и сохранить единый стиль

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

Правила, которые держат стиль:

1. Один набор на весь сайт. Если нужной иконки нет в наборе, ищите похожую по смыслу в том же наборе или попросите дизайнера дорисовать в той же стилистике.
2. Одна толщина линии. Если в Tabler выставили 1,5, то везде 1,5.
3. Один размер в одном блоке. Иконки в списке преимуществ — одинаковые по размеру, выровненные по одной линии.
4. Один-два цвета. Обычно цвет текста или фирменный акцент. Радуга иконок разных цветов отвлекает от текста.
5. Иконка рядом с подписью. Пиктограмма без текста понятна только для универсальных знаков: телефон, поиск, корзина, закрыть. Всё остальное подписывайте.

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

Когда иконки помогают, а когда лучше показать фото

На сайтах малого бизнеса мы часто видим блок «Почему мы» из шести иконок: щит, медаль, часы, рукопожатие, рубль, звезда. Под ними — «Надёжность», «Качество», «Опыт», «Сроки», «Цены», «Сервис». Такой блок есть у всех конкурентов, и он ничего не доказывает.

Сравните:

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

Особенно это касается первого экрана. Иконки там — поддержка: телефон, мессенджер, рейтинг. Главное место занимает оффер и фото того, что вы продаёте. Как собрать первый экран, — в статье первый экран сайта.

Если вы смотрите на свой сайт и видите «иконки как у всех», можно начать с одного экрана и показать, как он выглядит с фактами вместо пиктограмм.

Как вставить иконку на сайт

Способ зависит от платформы.

Конструктор. В Тильде и похожих конструкторах иконки загружают как изображения в блоки или в Zero Block. Многие стандартные блоки уже содержат встроенный набор иконок. Если вы загружаете свои, используйте SVG и проверьте, что цвет совпадает с остальными элементами.

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

HTML-сайт. Три способа:

1. Встроенный SVG. Код иконки вставляется прямо в HTML. Цвет и размер меняются через CSS, иконка загружается вместе со страницей без лишних запросов.
2. SVG-файл через <img>. Проще, но перекрасить иконку через CSS уже не получится.
3. Иконочный шрифт или скрипт библиотеки. Удобно для разработки, но подключает весь набор ради нескольких иконок. Для сайта с десятком иконок встроенный SVG легче.

Не забудьте о доступности. Если иконка — единственное содержание кнопки (например, «закрыть» или «поиск»), у кнопки должна быть текстовая подпись для программ чтения с экрана: атрибут aria-label. Декоративные иконки скрывают от них атрибутом aria-hidden="true".

Условный пример: блок преимуществ до и после

Пример условный, не кейс студии. Сайт компании по установке кондиционеров в Краснодаре. Блок «Почему мы» — шесть цветных объёмных иконок из разных наборов и подписи «Профессионализм», «Гарантия», «Быстро», «Недорого», «Опыт», «Качество».

Что меняем:

Цифры в примере условные. Суть в том, что после замены каждая строка отвечает на вопрос клиента: когда, сколько, что если сломается, кто придёт. Иконки остались, но теперь они помогают глазу пробежать по списку, а не делают вид, что это аргументы.

Частые ошибки с иконками на сайте

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

Чек-лист: иконки на сайте

1. Все иконки из одной библиотеки или нарисованы в одном стиле.
2. Одна толщина линии и один-два цвета.
3. Формат SVG.
4. Лицензия разрешает коммерческое использование, условия об авторстве соблюдены.
5. У каждой неочевидной иконки есть подпись.
6. У иконок-кнопок есть aria-label.
7. В блоке преимуществ рядом с иконками — цифры и факты, а не общие слова.
8. На телефоне иконки не меньше 20–24 пикселей и не налезают на текст.

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