Наборы иконок для сайта, - 9 лучших коллекций иконок для вашего сайта

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

В этой статье, мы подобрали 9 проверенных наборов иконок, - это лучшие предложения на сегодня. Мы сгруппировали их в 3 категории: иконки шрифты, SVG иконки и CSS иконки. Перед рассматриванием коллекций, давайте разберемся в плюсах и минусах каждой группы иконок.

 

Иконки шрифты для сайта

Иконки шрифты идеально подойдут, если вы собираетесь использовать большое количество иконок с одним стилем. Они монохромные и как правило исполнены простыми формами. Иконки шрифты воспринимаются браузерами как обычный текст, поэтому нужно убедиться чтобы алиасы иконок не перекрывали стандартные символы текста. Также, важно, чтобы шрифты поддерживались различными браузерами.

 

SVG иконки

Scalable Vector Graphics (Масштабируемая Векторная Графика) — это семейство XML формата, такая графика может быть увеличена до любых размеров без потери качества. Такие иконки могут контроллироваться CSS правилами, тегами object и img, или прямо быть вписанными в контекст HTML страницы. SVG поддерживается большинством популярных браузеров, но могут быть исключения для устаревших IE и Android до 2.3 версии.

 

CSS иконки

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

 

 

Feather Icons

 

Тип: SVG

Количество иконок: 240

Лицензия: MIT

 

Feather один из наиболее популярных наборов иконок, которые доступны в свободном доступе. Все иконки разработаны в сетке 24x24 и имеют аналоги со скругленными углами. Имеется интеграция с популярными фреймворками Angular, Vue, React.

 

 

Linea

 

Тип: SVG, PNG, иконки шрифты

Количество иконок: 730+

Лицензия: CCBY

 

Linea предоставляет большую подборку красивых, трендовых иконок. Все иконки контурные, но выглядят стильно. Иконки удобно расположены в соответствующих категориях среди которых Оснонвые, Музыка, Коммерция, Софт и многие другие.

 

 

Octicons

 

Тип: SVG

Количество иконок: 170+

Лицензия: GitHub

 

Octicons – это разработка GitHub, все иконки рисованные вручную. Как правило все иконки тематики программирования. Будут интересны для проектов связанных с кодом и разработкой.

 

 

Glyph

 

Тип: SVG

Количество иконок: 800

Лицензия: CC BY-SA 4.0

 

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

 

 

Font Awesome

 

Тип: Иконки шрифты

Количество иконок: 675

Лицензия: SIL OFL 1.1

 

Топ за популярностью среди веб разработчиков. Более 50 000 звезд набрала коллекция Font Awesome на GitHub. Большое количество иконок, все они масштабируемы и поддерживаются различными браузерами.

 

 

Ionicons

 

Тип: Иконки шрифты

Количество иконок: 260+

Лицензия: MIT

 

Отличная подборка иконок, собрана командой Ionic Framework. Предлагается больше 260 иконок, некоторые в изящном стиле, другие в тонком контурном стиле.

 

 

Material Icons

 

Тип: Иконки шрифты

Количество иконок: 900+

Лицензия: Apache

 

Оффициальный набор иконок для Google Material Design языка. Все иконки в привычном стиле Android. Содержит более 900 иконок, которые соблюдают простой стиль Material Design. Коллекция популярна, так как иконки привычно выглядят для большинства пользователей.

 

 

Icono

 

Тип: CSS иконки

Количество иконок: 130

Лицензия: MIT

 

Коллекция иконок на чистом CSS коде. Чтобы использовать их, все что нужно это скачать файл .css стилей, создать любой HTML тег и добавить необходимый класс. Все иконки созданы таким образом, что нужно использовать всего лишь один HTML элемент для их отрисовки на веб странице.

 

 

CSS ICON

 

Тип: CSS иконки

Количество иконок: 190

Лицензия: CCO v1.0 Universal

 

Еще одна подборка иконок созданных на чистом CSS коде. Проект имеет красивый веб сайт, шде можно посмотреть все иконки. Если вам надо всего лишь 1-2 иконки, можно просто скопировать необходимые участки кода и вставить в свой проект.

Источник материала ...

Дальше: Создаем сайт для малого бизнеса в uKit: пошаговая инструкция