Содержание

15 лучших и крупнейших библиотек иконок / Хабр

В этой статье ознакомимся с 15 лучшими и крупнейшими доступными библиотеками иконок для веб-сайтов. Многие из них предлагают тысячи, а то и миллионы пиктограмм, так что обязательно найдётся именно то, что нужно.

Сразу уточняем: это не 15 самых лучших библиотек, а 15 из лучших. Разумеется, есть и другие, не менее замечательные, о которых я не упомянул или не знаю.
И, нет, это не рейтинг — список маркированный, а не нумерованный.


Перевод сделан при поддержке компании EDISON.

Мы занимаемся доработкой и сопровождением сайтов на 1С-Битрикс, а также делали сайты и приложения для Московского ювелирного завода.

Мы очень любим создавать и поддерживать сайты! 😉





The Noun Project — это громадная библиотека иконок, количество коих, по слухам, перевалило за 2 миллиона. Всё это создано самими участниками — у проекта огромное активное сообщество, к которому можно присоединиться.




iconmonstr — это библиотека значков, предлагающая более 4-х тысяч иконок, распределённых в три с лишним сотни различных коллекций. Библиотека поддерживается одним человеком. Очень круто, что SVG-версии можно получить в виде HTML-кода прямо на сайте, так что скачивание необязательно.




Good Stuff No Nonsense — и это библиотека, также созданная кем-то единолично. Всё отрисовано вручную.




Унифицированные иконки на Orion предлагаются в 4-х стилях:

Line, Solid, Color и Flat.
Адаптируется к любому типу проекта посредством изменяемой толщины линий, контролем цветности и отличной читаемости.




Доступный и как веб-сайт и как приложение, IcoMoon предлагает более 4 тысяч бесплатных иконок и автономное хранилище для них. Каждый пакет имеет подробное лицензирование, так что дизайнерам и разработчикам сразу ясно, на каких условиях возможно использование. Пользователи также могут создавать свои собственные шрифты из значков.




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




Когда дело касается разнообразия в выборе — Icons8 трудно превзойти с его ежедневно пополняемым легионом из более чем 85-ти тысячи значков. Чтобы найти нужную графику, можно поискать по тегам или же полистать какие-либо из 50+ имеющихся тематических коллекций.




Под два миллиона бесплатных векторных пиктограмм в форматах SVG, PSD, PNG, EPS или ICON FONT.

Тысячи тысяч бесплатных значков в крупнейшей базе векторных иконок по свободной лицензии от Flaticon!

Примечание: для загрузки и просмотра регистрация на сайте не нужна, а вот для настройки значков нужно авторизовываться.




Ну и куда уж без Font Awesome, возможно, самой известной библиотеки иконок.




iconscout — это миллионы различных иконок на всевозможные темы, которые только возможно придумать. Здесь пользователи могут создавать собственные значки и делиться ими, а также составлять коллекции, которые потом могут просматривать другие посетители.




Iconfinder в настоящее время — одна из крупнейших библиотек с более чем 3-мя миллионами бесплатных и платных иконок, объединённых в более чем 25 тысяч наборов.



PixelLove — это более 5 тысяч иконок для платформ iOS и Android, предназначенных для дизайнеров, создающих мобильные сайты и приложения.

Все иконки доступны в различных размерах пикселей.




Streamline Icons — это 10+ тысяч пиктограмм с тремя разными значениями толщины линий (Light, Regular, Bold).

53 категории, 720 подкатегорий и более 30 тысяч иконок.




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




Smashicons предлагает чрезвычайно насыщенную коллекцию с 175+ тысячами иконок. Однако, в отличие от некоторых библиотек, упомянутых выше, не все значки соответствуют одному и тому же стилю. Поэтому, если нужно чтобы веб-сайт/приложение имели единообразное оформление, стоит убедиться, что все требуемые пиктограммы содержатся в определенном наборе значков.

Великолепная десятка библиотек SVG иконок — Разработка на vc.ru

4336 просмотров

Перед началом статьи хотелось бы сказать, что переводчик не несёт ответственности за содержание статьи, а также еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution

Перевёл: Лебедев Даниил

Оригинал:Zoltan Szogyenyi: 10 open source SVG icon libraries that you can use for your next project

Как-то раз я провел опрос на Reddit и обратился к коллегам-разработчикам с простой просьбой: поделиться названиями любимых библиотек иконок. Идея нашла живой отклик у сообщества, и вскоре я открыл для себя много отличных библиотек с открытым исходным кодом, о которых раньше и понятия не имел. И вот я решил написать статью о 10 лучших из них на основе результатов проведенного опроса.

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

Стоит также отметить, что перечисленные ниже библиотеки должны иметь современный и актуальный дизайн. Итак, наша великолепная 10-ка:

Font Awesome

Более чем уверен, что большинство из вас хотя бы раз использовали иконки Font Awesome, одной из самых первых популярных библиотек с открытым кодом. В настоящее время ее галерея содержит в целом 1588 бесплатных и 7 842 платных иконок.

Font Awesome предлагает огромную коллекцию разнообразных иконок, что является одной из главных причин большой востребованности этой библиотеки. На нашем веб-сайте используются двухцветные иконки Font Awesome Pro, и мы уверены, что благодаря им он выгодно выделяется на фоне аналогичных сайтов.

Font Awesome предлагает еще одну интересную возможность — создание персональной ссылки на CDN при наличии аккаунта (на соответствующем сервисе). Это позволит вам задать условие для исключения обычных иконок и использования только двухцветных.

Конечно, вы также можете включить только пару иконок, напрямую скопировав код SVG.

Я бы настоятельно посоветовал это делать при условии, что вы не используете больше 20–30 значков на сайте.

Существует много способов использования возможностей Font Awesome: копирование источника SVG одной иконки, загрузка библиотеки или использование общего или их персонального CDN. У них есть прекрасная страница, которая поможет начать работу с Font Awesome.

2. Репозиторий на Github.

Ionicons

Ionicons.io — еще одна библиотека SVG с открытым кодом, содержащая 457 иконок в трех разных стилях: контурные, заливные и заостренные. Здесь мне особенно нравится простой и понятный дизайн контуров и форм. Почему бы не использовать их в своем будущем проекте?

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

<script src=»https://unpkg.com/[email protected]/dist/ionicons.js»> </script>

После этого просто добавьте следующий элемент в HTML-шаблон и измените атрибут name в соответствии с иконкой, которую хотите показать, вот таким образом:

<ion-icon name=»heart»></ion-icon>

На официальном сайте содержится более подробная информация об основных правилах использования.

2. Репозиторий на Github.

CSS.gg

Если вы активно участвуете в жизни сообщества разработчиков на Reddit, то, конечно, не оставили без внимания факт появления новой библиотеки иконок, использующей для стиля только CSS. На данный момент она насчитывает свыше 704 отдельных иконок, распределенных по таким категориям, как уведомления, указатели (стрелки), код, дизайн и многое другое.

В свое время возникало много споров по поводу того, что лучше использовать с точки зрения производительности: CSS или SVG. Но позднее создатель библиотеки @astritmalsija запустил форматы SVG, SVG Sprite, Figma и Adobe XD для второй версии, предложив таким образом более широкий выбор реализаций.

Начать работу с CSS.gg очень просто: надо лишь выполнить команду npm -i css.gg и затем включить следующую таблицу стилей в тег head:

<link href=’https://css.gg/css’ rel=’stylesheet’>

Также существуют альтернативы CDN, а именно UNPKG или JSDelivr:

<!— UNPKG —> <link href=’https://unpkg. com/css.gg/icons/all.css’ rel=’stylesheet’> <!— JSDelivr —> <link href=’https://cdn.jsdelivr.net/npm/css.gg/icons/all.css’ rel=’stylesheet’>

Более подробная информация о том, как начать использование CSS.gg, содержится в инструкциях официального репозитория на Github.

2. Репозиторий на Github.

Feathericons

Представляю вам Feathericons, внешне привлекательную и понятно устроенную библиотеку с 282 SVG иконками. По умолчанию ее основным форматом является SVG, так как на данный момент он является самым быстрым способом работы со значками.

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

Для начала работы с Feathericons необходимо загрузить файл SVG и включить его в вашу разметку либо с помощью src, либо используя его в качестве встроенного объекта SVG.

2. Репозиторий на Github.

Eva Icons ❤

Eva Icons — это набор из 480 искусно выполненных иконок с открытым кодом в форматах SVG и PNG. Для создания значков используются два основных стиля: контурный и заливной. Радует тот факт, что изначально можно выбирать анимационные эффекты при наведении курсора мыши на значки, например изменение масштаба, пульсацию или вибрацию.

Работа с Eva Icons начинается с загрузки файла SVG/PNG после выбора иконки или загрузки целого набора. Вы можете также добавить Eva Icons, установив пакет npm следующим образом:

npm i eva-icons

2. Репозиторий на Github.

Heroicon

Heroicons, очередная библиотека с открытым кодом, является итогом работы создателей Tailwind CSS. Она содержит 165 отдельных иконок, включая контурные и заливные, и предлагает темную и светлую версии каждого элемента. Внешний вид значков качественно и искусно проработан.

Использование иконок начинается с нажатия на одну из них и копирования встроенного кода SVG, который сразу можно использовать в проектах. Примечательно еще и то, что библиотека предлагается в Figma. Если вам нужно включить все иконки, необходимо загрузить все файлы SVG с общедоступного репозитория.

  1. Демо.
  2. Репозиторий на Github.

Bootstrap icons

Данная библиотека включает свыше 600 пользовательских иконок с поддержкой SVG. На мой взгляд, она выгодно отличается от всех других с точки зрения дизайна. Если вам нравится использовать Bootstrap как CSS-фреймворк, то советую обратить внимание на Bootstrap 5 Icons и включить его в свой следующий проект.

Для работы с Bootstrap 5 Icons необходимо скопировать код SVG, а затем применить его по своему усмотрению: либо используя как встроенный код, либо включая в качестве источника для образа, либо создавая классы псевдокода в CSS. Какой бы способ вы не выбрали, на сайте есть информация по реализации каждого из них.

  1. Демо.
  2. Репозиторий на Github.

Remix Icon

Remix Icon — это большая коллекция из 2149 красивых иконок с открытым кодом под лицензией Apache. Они распределены по таким категориям, как бизнес, общение, финансы, карта и многие другие. Эта библиотека определенно заслуживает вашего внимания.

Начинаем работу с Remix Icon либо с загрузки версий SVG или PNG, либо с копирования встроенного кода SVG в буфер обмена. В качестве альтернативы можно также загрузить весь пакет как один файл .svg или SVG-спрайт.

  1. Демо.
  2. Репозиторий на Github.

Octicons

Octicons — набор из более 100 иконок с открытым кодом, которые Github использует на своем главном сайте. Насколько мне известно, они уже работают над второй версией библиотеки, улучшают дизайн и добиваются разнообразия иконок.

Огромное преимущество Octicons состоит в том, что его можно использовать как уже готовый пакет в React, Ruby, Rails, Jekyll и JavaScript. Здесь вы найдете список всех пакетов, необходимых для работы с Octicons.

  1. Демо.
  2. Репозиторий на Github.

Ikonate

Завершает наш список не менее интересная библиотека Ikonate, содержащая около 100 качественных иконок в плоском дизайне. Она находится под весьма лояльной и разрешительной лицензией MIT.

Вы можете легко настраивать размер, толщину и закругления границ, а также цвет иконок перед их экспортом. В экспортируемом файле ZIP вы получите HTML-файл со всеми выбранными встроенными значками, папку с отдельными файлами SVG и спрайт-листом.

  1. Демо.
  2. Репозиторий на Github.

В заключении прошу вас поддержать эти библиотеки, присудив им звезду на Github и тем самым отметив ту неоценимую работу, которую они выполняют. Поделитесь этим списком с вашими друзьями или коллегами, если вы сами еще не выбрали конкретную библиотеку иконок для вашего следующего проекта.

10 прекрасных библиотек c SVG-иконками

Мы проверили все условия лицензирования, так что можете не сомневаться – библиотеки из этой подборки общедоступны. И, что немаловажно, каждая обладает привлекательным дизайном.

Даже не сомневаюсь, что многим из вас уже приходилось использовать иконки из Font Awesome, потому что среди первых открытых библиотек она стала одной из самых популярных. Сейчас в галерее Font Awesome содержится больше 1500 бесплатных и почти 7850 платных иконок.

Библиотека предлагает обширную и многообразную коллекцию иконок, что и сделало ее такой востребованной. Кроме того, у пользователей есть возможность создать персональную CDN-ссылку (необходимо наличие аккаунта на данном сервисе). Благодаря этому можно с помощью задания условий исключать обычные иконки и пользоваться только двухцветными. Естественно, можно включить несколько иконок, просто скопировав SVG-код напрямую. Рекомендуем делать так в тех случаях, когда вам для сайта нужно не больше 2-3 десятков значков.

Ссылки:

  • Страница для начала работы. 
  • Demo.
  • Github.

Эта библиотека SVG тоже открытая, содержит больше 450 иконок, разделенных на 3 разных стиля. Особенно привлекательным на наш взгляд является простой контурный дизайн.

Работа с Ionicons включает хорошую документацию. Когда вам требуется вся библиотека, а не отдельная иконка, включите в футер (нижний элемент страницы) такой скрипт:

Дальше вам останется просто вписать нужный элемент в код HTML, указав в атрибуте “name” иконку, которую нужно показать, например:
Ссылки:
  • Официальный сайт;
  • Demo;
  • Github.
Активные пользователи Reddit наверняка знают о появлении новой библиотеки CSS.gg, в которой для стиля используется только CSS. Сейчас в ней больше 700 иконок, рассортированных по разным категориям: стрелки, кнопки, значки, код, музыка и др. 
Первое время было много споров вокруг производительности: с данной точки зрения лучше использовать CSS или все-таки SVG? Однако позднее во II версию создатель библиотеки включил не только SVG, но и другие форматы: Adobe XD, SVG Sprite и Figma, предоставив пользователям еще больший выбор.
Приступить к работе с библиотекой иконок совсем не сложно. После выполнения команды «npm -i css.gg» добавьте в тег head такую таблицу стилей:
Кроме того, есть альтернативы CDN: UNPKG и JSDelivr:
Ссылки:
  • Demo.
  • Github.
Эта библиотека содержит всего 282 SVG-иконки, зато внешне она очень привлекательна и будет понятна даже новичкам. Основным форматом по умолчанию стоит SVG, потому что сейчас это самый скоростной способ использования значков.
Есть возможность настраивать параметры иконок до загрузки (размер, цвет и пр.), и включать либо темный, либо светлый режим с помощью кнопки с изображением луны, расположенной с правой стороны вверху сайта.
Чтобы начать работать с Feathericons, нужно загрузить SVG-файл и добавить его в свою разметку.
  • Demo.
  • Github.
В набор Eva Icons входит 480 качественных SVG- и PNG-иконок с открытым доступом. Выполнены они преимущественно в одном из двух стилей: заливной или контурный. Нельзя не отметить отличную возможность добавить любой анимационный эффект значку, просто наведя на него курсор мыши: к примеру, пульсацию, изменение размера, вибрацию и др.
Чтобы приступить к работе с библиотекой, загрузите SVG или PNG файл после выбора значка или загрузки набора иконок целиком. Кроме того, можно установить пакет npm: npm i eva-icons.
Ссылки:
  • Demo.
  • Github.
Open source библиотека от авторов Tailwind CSS. Состоит из 165 иконок разных стилей с возможностью выбрать темную или светлую версию любого элемента. Дизайн значков проработан очень искусно.
Для использования иконок в своих проектах нажимайте на них, чтобы скопировать встроенный SVG-код. Обратите внимание, что  библиотека доступна в Figma. При необходимости включить весь набор иконок, нужно загрузить с репозитория SVG-файлы.
Ссылки:
  • Демо.
  • Github.
Эта библиотека предлагает вам больше шести сотен пользовательских иконок и, к тому же, по нашему мнению, выгодно выделяется среди аналогов благодаря отличному дизайну. При желании использовать Bootstrap в качестве CSS-фреймворка, рекомендуем добавить в свой проект библиотеку Bootstrap 5 Icons.
Чтобы начать работу, скопируйте SVG-код, а затем используйте его любым удобным способом (инструкцию можно посмотреть на сайте). 
Ссылки:
  • Demo.
  • Github.
Довольно большая коллекция, включающая больше 2 тысяч красивых иконок. Они сгруппированы по категориям: дизайн, бизнес, документы, общение, девайсы и др. Эта открытая библиотека определенно заслуживает внимания.
Если решили использовать Remix Icon, можете или загрузить версии SVG/PNG, или копировать в клипборд встроенный SVG-код. А еще некоторые предпочитают скачивать пакет целиком в виде одного файла с расширением .svg либо спрайта.
Ссылки:
  • Demo.
  • Github.
Здесь есть больше сотни иконок, которые используются на основном сайте Github. Есть информация, что уже идет работа над следующей, второй версией Octicons, с улучшенным дизайном и большим разнообразием иконок.
Большим преимуществом библиотеки является то, что ею можно пользоваться как полноценным пакетом в таких языках, как React, JS, Ruby и Rails. 
Ссылки:
  • Перечень всех пакетов, которые нужны для начала работы с библиотекой.
  • Demo.
  • Github.
В завершение списка идет не менее интересная, чем предыдущие, библиотека Ikonate, в которой есть около сотни качественных иконок, выполненных в лаконичном плоском дизайне. Ее лицензия MIT достаточно лояльна.
Перед экспортом пользователь может без труда настраивать размер, параметры границ и цвет иконок. Результирующий ZIP-файл будет содержать HTML-документ со всеми значками, которые вы выберете, папку отдельных SVG-файлов, а также спрайт-лист.
Ссылки:
  • Demo.
  • Github.
Перевод статьи Zoltan Szogyenyi: 10 open source SVG icon libraries that you can use for your next project
Все иконки Font Awesome
Полная сборка из 675 иконок Font Awesome 4. 7.0
 Как вы и просили, Font Awesome включает в себя 41 новую иконку в версии 4.7.
 Как запросить новые иконки? Да вот так. 
 Нужна версия в векторе или хотите использовать Font Awesome у себя на компьютере? Посмотрите шпаргалку.