Что такое иконки и зачем они нужны?

Иконки различаются по формату, бывают:

  • векторные (формат SVG),
  • растровые (формат PNG),
  • символьные (иконочные, например: FontAwesome, IcoMoon).

На текущий момент преимущественно используются векторные или символьные, потому что при растеризации их на странице качество не теряется.

форматы иконок

В примере №1 иконка в векторном формате SVG с чёткими краями и возможностью менять цвета прямо на сайте без участия дизайнера. По №2 растровая иконка в PNG, края у неё размыты, так случается при увеличении масштаба иконки и в любом случае заметно на дисплеях retina. Под №3 символьная иконка.

Иконки также различаются по стилям:

  • контурные или линейные (outline),
  • плоские (flat),
  • объемные (3D).

стили иконок

В примере №1 - линейная иконка, под №2 плоская с заливкой одним цветом, №3 - объёмная 3D-иконка.

Для чего нужны иконки на сайте?

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

Активно применяются:

  • в навигации (например, в пунктах меню или в сортировке фильтров в каталоге);
  • в полях поиска;
  • в кнопках иногда показывается движение стрелочкой “перейти в раздел” или “скачать pdf”;
  • для обозначений в элементах контента, например в блоке “этапы заказа” каждый текст, описывающий этапы, можно сопроводить иконкой;
  • в мета-информации: дата создания, количество просмотров, дата редактирования статьи;
  • как самостоятельные графические элементы (это касательно сложных иконок - иллюстраций, где более одного объекта).

иконки пример

Где искать иконки?

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

  • https://thenounproject.com/ (бесплатный ресурс, можно найти как набор иконок, так и что-то по отдельности).

  • https://www.flaticon.com/ (условно бесплатный ресурс, можно скачать иконки в PNG бесплатно, однако SVG по платной подписке; в целом на портале очень много вариантов стикеров иконок и наборов).
  • https://fontawesome.com/ (условно бесплатный, самые популярные - символьные иконки).
  • https://icomoon.io/ (бесплатные символьные иконки).
  • https://themify.me/themify-icons (бесплатные символьные линейные иконки).<
  • https://fontello.com/ (бесплатный сервис, где можно выбрать иконки из предложенных и скачать паком).
  • https://www.iconfinder.com/ (платный ресурс).
Другие термины интернет-маркетинга