9 бесплатных наборов иконок для веб-разработчиков

0
1763
views

Иконки для веб-разработчиков

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

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


Иконочные шрифты

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

Иконки SVG

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

Иконки CSS

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


Feather Icons

feather-icons

Тип: SVG

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

Лицензия: MIT

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


Linea

linea

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

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

Лицензия: CCBY

Linea предлагает огромный выбор красиво оформленных современных значков, которые имеют отчетливый контурный вид. Все значки удобно разделены по разным категориям, включая «Основные», «Музыку», «Ecommerce», «Программы» и многие другие.


Octicons

octicons

Тип: SVG

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

Лицензия: GitHub

Octicons это увеличивающийся набор сделанных вручную SVG-иконок GitHub. Он включает иконки, относящиеся к GitHub и программированию, такие как значки баз данных, git-операций и т. д.


Glyph

glyph

Тип: SVG

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

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

Набор прекрасных SVG-иконок в технике pixel-perfect, созданных для современного Интернета. В проекте GitHub вы можете скачать скрипт Node.js для кастомизации набора иконок путем включения в него только тех изображений, которые вам на самом деле нужны.


Font Awesome

fontawesome

Type: иконочный шрифт

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

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

Самый популярный иконочный шрифт в Интернет (у него больше 50 тысяч звезд на GitHub). Font Awesome предлагает большую коллекцию иконок, созданных для масштабирования, поддерживаемых всеми браузерами и отлично подходящих для пользователей со слабым зрением.


Ionicons

ionicons

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

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

Лицензия: MIT

Набор великолепно выглядящих иконок от команды Ionic Framework. Содержит больше 260 прекрасных значков, часть которых выполнена в широком плоском стиле, а часть – в современном тонколинейном.


Material Icons

material icons

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

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

Лицензия: Apache

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


Icono

icono

Тип: иконки CSS

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

Лицензия: MIT

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


CSS ICON

css icon

Тип: иконки CSS

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

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

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

***
Подписывайтесь на наш канал в Telegram!


ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here