20+ лучших библиотек ICON для разработки интерфейса и дизайна пользовательского интерфейса

Автор: Евгений Степнов

Переводчик: Front-end Xiaozhi

Источник: Flatlogic

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

Список лучших библиотек иконок

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

Flaticon

URL-адрес:www.flaticon.com/packsФорматы и типы: PNG, SVG, EPS, PSD и BASE 64, Marketplace Цены и лицензии: ограниченные бесплатные и премиальные уровни, начиная с 9,99 долларов США в месяц.

FlaticonСодержит полностью редактируемые векторы, которые можно использовать для личных и коммерческих проектов. FlatIcon имеет более23010 000 векторных иконок, сгруппированных в51202в упаковке

Этот продукт имеет расширение Adobe, которое позволяет нам легко импортироватьPhotoshop, Illustratorа такжеAfter Effectsзначок в . Если вы хотите использовать веб-шрифт вместо статического файла для отображения значка, FlatIcon позаботится о преобразовании формата и создаст пригодный для использования веб-шрифт. Мы также можем настроить загруженный значок.

Основные моменты:

• Превосходить90,000иконки;
• Форматы SVG, EPS, PSD и PNG;
• иконочный шрифт;
• расширение Adobe для CC Suite;
• Лицензия Linkshare с премиальными опциями;
• Каждый месяц добавляются новые пакеты значков;

Jam Icons

URL-адрес:jam-icons.com/Форматы и типы: SVG, CSS Цена и лицензия: Бесплатно, MIT

Иконки Jam представляют собой набор896иконы ручной работы. Этот пакет значков предоставляетSVGи версия шрифта. Эти значки можно использовать в виде файлов SVG в веб-проектах, проектах печати или разработки приложений. Эти значки также можно использовать в качестве шрифтов для данной таблицы стилей CSS. имеют16px,24pxа также32pх три размера. Мы также можем выбрать заполнение или обводку значков.

Fontisto Icon Pack

URL-адрес:fontisto.com/Формат и тип: CSS Цена и лицензия: ree, MIT

Fontistoпредставляет собой набор векторных значков. Иконки можно настроить мгновенно: размер, цвет, тень и все, что может сделать CSS. Этот продукт не требует Javascript.FontistoИконки векторные, а это значит, что они будут отлично смотреться на мониторах с высоким разрешением.

На этом веб-сайте мы можем найти полную документацию и различные руководства по запуску и настройке продукта. Нам просто нужно вставить ссылку на веб-сайт, чтобы начать использовать продукт. Кроме того, используйте Fontisto с подходящим менеджером пакетов:npm，yarn，bowerЖдать.

Iconmonstr

URL-адрес:iconmonstr.com/Форматы и типы: SVG, EPS, PSD и PNG, Marketplace Цена и лицензия: бесплатно

Iconmonstrколлекция иконок4400Несколько значков. Каждый набор значков доступен в контурной и заполненной версиях графики, чтобы их можно было использовать в различных дизайнерских приложениях. Каждая иконка на этом сайте предоставляется бесплатно, а файлы иконок находятся вSVG，AI，PSDа такжеPNGи другие форматы, эти файлы можно использовать в бесплатных и коммерческих целях.

IconmonstrУпрощает поиск значков благодаря мощной функции поиска. Мы также можем сохранить наши любимые значки в наших личных избранных для использования в будущем.

Основные моменты:

• Бесплатное использование всех иконок
• Варианты загрузки в четырех форматах и ​​уменьшенные значки, оптимизированные для использования в Интернете.

Pixsellz Material Icons Library

URL-адрес:icons.pixsellz.io/Форматы и типы: SVG, EPS, PSD, PNG, FIG, Material design Цена и лицензия: бесплатно, лицензия Apache версии 2.0

Много1000Несколько значков разделены на16разные категории. Бесплатный пакет значков вдохновлен дизайном Material и представлен в трех различных визуальных стилях — круглом, контурном и двухцветном. В комплекте есть请输入代码6 различных форматов файлов, поэтому мы можем использовать значки из нашего предпочтительного программного обеспечения для дизайна.

Основные моменты:

• 3 стиля
• Фигма стиль
• 1000+ иконок
• 24×24 пикселей
• стиль эскиза
• 16 категорий и 6 форматов файлов

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Entypo

URL-адрес:www.entypo.com/Формат и тип: SVG Цена и лицензия: бесплатно, Creative Common License 4.0

Entypo— это продукт из серии значков svg, созданный несколько лет назад Даниэлем Брюсом из Швеции. Эти значки потрясающие: когда дело доходит до подарков, они самые важные. Этот продукт предоставляется в формате SVG с411значок, свободно доступный по лицензии Creative Commons.

Evil Icons

URL-адрес:evil-icons.io/格式和类型： SVG, Sketch Цена и лицензия: Бесплатно, MIT

Эта библиотека огромна и включает в себя все, включая SVG и оригинальные исходные файлы. Это означает, что мы можем скачатьSVGтак же какIllustratorдокументы иSketchиз.sketchдокумент.

#### Оптимизация значков

URL-адрес:streamlineicons.com/Форматы и типы: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG Цена и лицензия: бесплатно до   411 долларов США.

Streamline Iconsэто бесплатный набор иконок с высокой совместимостью. Библиотека организована по категориям «53» с30000Несколько векторных значков.

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

У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать иконки прямо из браузера.

Основные моменты:

• Превосходить30000векторные иконки
• Умные штрихи изменяют толщину контура
• Поддержка форматов Sketch, AI, EPS, PDF, PNG, SVG.
• Каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и полужирный.

Smashicons

URL-адрес:smashicons.com/Форматы и типы: JAR, SVG, AI, SKETCH, Marketplace. Цена и лицензия: бесплатно до   149 долларов США.

Smashiconsв своей библиотеке предоставляет более219000+Полная коллекция иконок.SmashiconsРаботает немного иначе, чем другие: его цена основана на месячном тарифном плане 5 долларов в месяц. Это означает, что вы можете получить доступ ко всей их коллекции существующих значков, а также к любым будущим значкам, которые они публикуют, всего за 5 долларов в месяц.

Основные моменты:

• Очень большая коллекция икон
• Иконки совместимы с несколькими платформами
• Простое в использовании веб-приложение для поиска нужных значков.
• Бизнес-модель на основе подписки
• Мультиплатформенная поддержка

Icons8

URL-адрес:icons8.com/Форматы и типы: SVG, PNG, PDF Цена и лицензия: лицензия Good Boy, бесплатно до   19,90 долларов США.

Icons8набор иконок с более чем120000значки, охватывающие несколько категорий. От корпоративных и офисных настроек до людей, еды и значков социальных сетей. Эти значки предназначены для имитации внешнего вида конкретной операционной системы. Мы можем скачать их в версиях для Windows, iOS и Android.

Основные моменты:

• Форматы SVG, PNG и HTML
• Значки доступны в различных стилях, таких как линейные значки, сплошные значки и полноцветные.
• Все значки можно загрузить в виде файла .zip.
• Редактируется перед загрузкой
• Бесплатные и платные варианты подписки

Icomoon

URL-адрес:icomoon.io/Форматы и типы: SVG, PNG, PDF Цена и лицензия: бесплатно до   139,90 долларов США.

Icomoonэто полный инструмент для управления изображениями и значками. Этот продукт имеет качественное решение для редактирования и управления иконками. Значок Icomoon находится в16X16изготовлен вручную на сетке и предоставленSVG，EPS，PSD，PDFа такжеAIФормат. Наборы иконок также постоянно обновляются их создателями.

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

Основные моменты:

• Комплексный инструмент управления иконками

• Бесплатные и платные варианты загрузки

• Несколько форматов загрузки

Glyphish Icon Pack

URL-адрес:www.glyphish.com/Форматы и типы: SVG, PNG, PDF, PSD, Glyph, Icon font Цена и лицензия: Creative Common Attribution, от 25 до 99 долларов.

GlyphishПредоставляется множество различных библиотек значков. Каждая библиотека поставляется в различных форматах, включаяPNG,SVG,PSDа такжеAI. Базовые значки стоят 25 долларов, а окончательный набор значков обычно стоит 99 долларов. Бесплатная демоверсия включает50иконки. Дизайнеры могут легко редактировать все иконки.

Основные моменты:

• Иконки для разных платформ: iOS, Android, Web, Window
• Набор из 50 бесплатных иконок
• Легко перетаскивайте в Xcode
• Иконки для дисплеев Apple Retina

Ionicons

URL-адрес:ionicons.com/Форматы и типы: SVG и Webfont, Icon font Цена и лицензия: MIT

Команда Ionic решилаIoniconsПубликуйте свои иконки в виде веб-шрифтов. Естественно, они совершенно бесплатны и доступны наGitHubиспользовать на. Мы можем даже использоватьCDNВерсия таблицы стилей добавляет эти значки прямо на сайт, а также поддерживает SVG и веб-шрифты.

Основные моменты:

• совершенно бесплатно

• Простая настройка путем копирования и вставки ссылок

• в виде веб-шрифтов

• Обычный размер

• Более 1100 позиций

Angular Material Icons

URL-адрес:material.IO/resources/i…Форматы и типы: SVG, веб-шрифт, материальный дизайн Цена и лицензия: бесплатно, лицензия Apache 2.0

Material IconдаGoogleПредоставляется бесплатная библиотека иконок. Чтобы обеспечить удобочитаемость и ясность, значки были оптимизированы, чтобы хорошо выглядеть на всех платформах и дисплеях. Иконки полностью бесплатны и доступны на GitHub. Эта библиотека иконок огромна, в ней более1,000Каждая иконка охватывает широкий спектр функций интерфейса.

Linearicons

URL-адрес:linearicons.com/Форматы и типы: SVG, веб-шрифт, иконочный шрифт Цена и лицензия: бесплатно до 59 долларов США, обычная творческая лицензия

Lineariconsявляется одним из самых популярных и лучших пакетов значков для личных или коммерческих целей. Linearicons доступен в бесплатной и премиальной версиях, бесплатная версия этого удивительного пакета значков распространяется под лицензией Creative Commons. Мы также можем выбрать другие пакеты, такие как «Пакет рабочего стола», по мере необходимости.

Основные моменты:

• CloudFront CDN
• Доступна бесплатная версия
• Поставляется с различными форматами: SVG, PDF, Webfont.

Feathericons

URL-адрес:feathericons.com/Форматы и типы: SVG, Webfont, Iconfont Цена и лицензия: бесплатно, лицензия MIT

Feather— один из самых популярных наборов иконок с открытым исходным кодом. это в24X24Иконки с открытым исходным кодом, разработанные на сетке. Эти значки представлены в формате SVG. Он лицензирован MIT и в открытом исходном коде имеет ок.250Несколько значков.

Значки легко редактировать и очищать независимо от размера. Сначала они были разработаны как иконочный шрифт, поэтому он был встроен как веб-шрифт.

Iconfinder

URL https://www.iconfinder.com/ Форматы и типы: SVG, PNG, ICO, Marketplace Цена и лицензия: от 9 до 49 долларов в месяц.

Iconfinderявляется одним из самых популярных ресурсов иконок в Интернете. это обеспечивает более чем400Тысячи значков, предоставляющих пользователям различные параметры поиска, включая формат значка, цену, размер, фон и т. д. Есть также несколько планов ежемесячных платежей - от$9прибыть$49. Мы также можем выбрать систему «оплата по мере использования».

предоставленный файл значкаSVG，PNG，ICO，ICNSа такжеAdobe Illustratorформат, размерный ряд16×16прибыть512×512. Если вы не можете найти то, что вам нравится, или вам просто нужна собственная иконка, разработанная специально для нашего бренда, вы также можете поработать с одними из лучших дизайнеров на сайте.

Основные моменты:

• Бесплатные и платные варианты использования
• Гибкая функция поиска
• Предоставляет значки в нескольких форматах
• Множество категорий и стилей
• Редактор логотипов

The Noun Project

URL-адрес:thenounproject.com/Форматы и типы: SVG, PNG, Marketplace Цена и лицензия: Лицензия Creative Commons

Noun ProjectПредлагает одну из крупнейших библиотек иконок в Интернете. Большинство иконок на этом сайте начинаются сSVGа такжеPNGформат, а также черно-белые стили доступны.

Библиотека сайта состоит из файлов иконок, разработанных различными независимыми дизайнерами. Здесь создатели и творческие профессионалы могут сотрудничать, чтобы продавать свои проекты и находить, казалось бы, бесконечную библиотеку премиальных значков.

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

Основные моменты:

• Превосходить150,000иконки
• Формат SVG, PNG
• Инструменты поиска и обнаружения
• Бесплатные и платные варианты загрузки
• Новые иконки загружаются почти каждый день

Fontawesome Icons

URL-адрес:fontawesome.com/iconsФорматы и типы: SVG, PNG, Иконочный шрифт, Marketplace Цена и лицензия: SIL OFL 1.1

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

Каждая иконка полностью масштабируема и поддерживается непосредственно в CSS. Мы можем использовать чистыйCSS3Меняйте цвета, тени, фоновые градиенты и многое другое. Еще одна причина использовать эту библиотеку заключается в том, что она полностью оптимизирована и вообще не требует JavaScript, поэтому проблем с совместимостью не возникает.

Основные моменты:

• векторный шрифт
• Каждый значок поставляется с классами CSS и Unicode
• бесплатно
• Создан с учетом доступности
• Простота обновления на разных сайтах
• Шпаргалка для рабочего стола, содержащая всю библиотеку значков.

Lineicons

URL-адрес:lineicons.com/Форматы и типы: SVG, веб-шрифт, иконочный шрифт Цена и лицензия: бесплатно

LineIconsТакже доступна бесплатная CDN с четкой документацией, что позволяет легко начать.

Этот пакет значков абсолютно бесплатен и поставляется с450Иконки с несколькими линиями. Он охватывает все основные значки, необходимые для проектов из разных категорий.LineIconsСуществует также бесплатный CDN и понятная документация, чтобы легко начать работу. Он поставляется с 2 различными масштабируемыми пакетами, которые можно использовать в соответствии с потребностями проекта.WebFontsа такжеSVGдокумент.

Основные моменты:

• 450+ бесплатных иконок
• SVG-файл
• Бесплатный CDN

Суммировать

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

Надеемся, что эта статья помогла выбрать решение, которое наилучшим образом соответствует вашим потребностям.

---

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

источник:https://blog/top-icons-packs-and-resources-for-web/

---

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.