Лучшие наборы иконок для веб-разработчиков

Перевод статьи «Top icons packs and resources for web».

The Noun Project

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

Но рисовать их с нуля долго и дорого. Поэтому имеет смысл обратить внимание на готовые решения.

Вот несколько доводов в пользу использования иконок в вашем следующем проекте:

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

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

Для легкости восприятия продукты в подборке разделены на категории. Категорию вы сможете найти перед описанием продукта. Речь идет о следующих категориях:

  • Бесплатные наборы иконок.
  • Торговые площадки. Там содержатся иконки разных производителей, отличающиеся как по цене, так и по качеству.
  • Иконки в стиле Material design и Flat.
  • Наборы CSS-иконок. Эти иконки, как следует из названия, созданы на основе CSS. Для их использования нужно просто скопировать код себе на страницу.
  • Иконочные шрифты. В этих шрифтах вместо букв и цифр используются символы. Они популярны в среде веб-дизайнеров, поскольку их можно стилизовать при помощи CSS точно так же, как обычный текст. Браузеры тоже воспринимают иконочные шрифты как текст, так что вам нужно будет нормализовать иконки во избежание проблем со сглаживанием. Иконочные шрифты поддерживаются практически всеми браузерами.
  • SVG-иконки. Масштабируемая векторная графика (SVG) это основанный на XML формат векторной графики, который может масштабироваться до любого размера без потери четкости. Эти иконки могут отображаться при помощи CSS (с тегами объектов и изображений) или их можно вставить прямо в HTML.
  • Наборы символов и пиктограмм.

Наборы и источники

Flaticon

Flaticon
  • Формат файлов, тип ресурса: PNG, SVG, EPS, PSD и BASE 64, торговая площадка.
  • Лицензия и цена: бесплатный (с ограничениями) и премиальный (от 9,99 долларов/месяц) план.

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

Adobe Extension позволяет легко импортировать иконки в Photoshop, Illustrator и After Effects.

Если вы предпочитаете использовать не статичные файлы, а веб-шрифт, FlatIcon может сгенерировать его для вас путем конвертации иконок. Скачанные иконки также можно кастомизировать.

Основные особенности:

  • Adobe Extension для CC suite;
  • лицензия Linkshare для премиальных вариантов;
  • ежемесячное добавление новых наборов иконок.

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

Jam Icons

Jam Icons
  • Формат файлов, тип ресурса: SVG, CSS.
  • Лицензия и цена: бесплатно, MIT.

Jam icons это набор из 896 иконок, сделанных вручную. Их можно использовать в веб-проектах и приложениях в виде SVG-файлов, а можно и в виде шрифта с заданными CSS-стилями. Размер иконок — 6px, 24px и 32px. Они могут быть как с заливкой, так и полые.

Fontisto

Fontisto
  • Формат файлов, тип ресурса: CSS
  • Лицензия и цена: бесплатно, MIT

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

На сайте проекта можно найти полную документацию и различные руководства по началу работы и кастомизации продукта. Чтобы начать использовать иконки, можно просто вставить ссылку на сайте. Но Fontisto можно использовать и с менеджерами пакетов (npm, yarn, bower и т. д.).

Iconmonstr

Iconmonstr
  • Формат файлов, тип ресурса: SVG, EPS, PSD и PNG, торговая площадка.
  • Лицензия и цена: бесплатно.

В коллекции Iconmonstr вы найдете больше четырех тысяч иконок. Каждый набор представлен в двух версиях — с заливкой и без, что позволяет использовать эти иконки в самых разнообразных приложениях. Все иконки на сайте можно использовать бесплатно, в том числе в коммерческих целях. Иконки оптимизированы для использования в вебе.

Библиотека иконок Pixsellz

Pixsellz Material Icons Library
  • Формат файлов, тип ресурса: SVG, EPS, PSD, PNG, FIG, Material design.
  • Лицензия и цена: бесплатно, Apache License Version 2.0.

Огромный пакет, содержащий больше тысячи иконок, разделенных на 16 категорий. Иконки выдержаны в стиле Material design, в трех разных видах: с закруглениями, в виде контуров и двуцветные. Набор доступен в шести форматах файлов, подходящих для различных программ.

Entypo

Entypo
  • Формат файлов, тип ресурса: SVG.
  • Лицензия и цена: бесплатно, Creative Common License 4.0.

Entypo это набор svg-иконок, тщательно разработанных несколько лет назад Дэниелом Брюсом из Швеции. Иконки превосходны; если говорить о бесплатных, то они точно лучшие. Всего их в наборе 411, использовать можно бесплатно под лицензией Creative Commons.

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

Evil Icons

Evil Icons
  • Формат файлов, тип ресурса: SVG, Sketch.
  • Лицензия и цена: бесплатно, MIT.

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

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

Streamline icons

Streamline icons
  • Формат файлов, тип ресурса: ICONJAR, Sketch, FIG, XD, SVG, AI, PDF, PNG.
  • Лицензия и цена: от бесплатного использования до $411.

Streamline Icons это еще один бесплатный набор красивых иконок. Всего значков в наборе больше 30 тысяч (они разделены на 53 категории).

Это один из немногих наборов, оптимизированных для Sketch, благодаря чему можно изменять ширину линий и цвет значков. Каждая иконка в Streamline 3.0 представлена в трех вариантах: light, regular и bold.

Компания имеет собственное веб-приложение, позволяющее искать и скачивать иконки при помощи браузера.

Smashicons

Smashicons
  • Формат файлов, тип ресурса: JAR, SVG, AI, Sketch, торговая площадка.
  • Лицензия и цена: 5 долларов в месяц.

В коллекции Smashicons больше 219 тыс. иконок, совместимых со многими платформами. Есть простое в использовании веб-приложение для поиска значков.

Монетизируется Smashicons несколько иначе, чем другие библиотеки. Здесь есть платная подписка, цена — 5 долларов ежемесячно. За эту сумму вы получаете доступ ко всей уже существующей коллекции, а также ко всем иконкам, которые будут выпущены в дальнейшем.

Icons8

Icons8
  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: Good Boy License, от бесплатного использования до 19,9 долларов в месяц.

В коллекции Icons8 вы найдете больше 120 тысяч иконок разных категорий (бизнес, офис, люди, еда, социальные сети) в разных стилях (в виде контуров, с заливкой, полноцветные). Значки разработаны так, чтобы соответствовали стилю определенной операционной системы. Есть версии для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Перед скачиванием можно воспользоваться веб-редактором.

Icomoon

Icomoon
  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: от бесплатного использования до 139 долларов в месяц.

Icomoon поставляется в качестве инструмента иконографии и менеджмента иконок. Для этих целей продукт имеет очень качественное решение. Коллекция значков постоянно обновляется создателями.

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

Также возможно создание собственных иконочных шрифтов.

Glyphish

Glyphish
  • Формат файлов, тип ресурса: SVG, PNG, PDF, PSD, Glyph, иконочный шрифт.
  • Лицензия и цена: Creative Common Attribution, от $25 до $99.

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

Основные особенности:

  • иконки для нескольких платформ (iOS, Android, веб, Windows),
  • набор из 50 бесплатных иконок,
  • легкое перетаскивание в Xcode,
  • размер иконок специально подогнан для дисплеев Apple Retina.

Ionicons

Ionicons
  • Формат файлов, тип ресурса: SVG и веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

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

Основные особенности:

  • легкое использование путем копипаста ссылки,
  • поставляются в виде веб-шрифта,
  • подобранные размеры.

Angular Material Icons

Angular Material Icons
  • Формат файлов, тип ресурса: SVG, веб-шрифт, Material design.
  • Лицензия и цена: бесплатно, Apache License 2.0.

Material Icon это бесплатный набор иконок от Google. Для обеспечения читаемости и четкости эти иконки оптимизированы для всех платформ и дисплеев. Они совершенно бесплатны и доступны на GitHub. В наборе вы найдете больше тысячи значков для самых разных нужд интерфейса.

Все символы доступны в пяти разных темах. Лучший формат для веб-проектов — простой в использовании иконочный веб-шрифт.

Linearicons

Linearicons
  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: от бесплатного использования до $59, Common Creative License.

Набор иконок Linear Icon — один из самых популярных, как для личного, так и для коммерческого использования. Имеет бесплатную и премиальную версию. Бесплатная версия этого прекрасного набора поставляется под лицензией Creative Common.

Иконки разделены на разные пакеты (например, Desktop Package) — можно выбирать наиболее подходящий для своих нужд.

Feathericons

Feathericons
  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

Feather это один из самых популярных наборов иконок open-source. Значки доступны в SVG-формате, всего их больше 250.

Иконки легко редактировать; вне зависимости от размера, выглядят они очень четко. Эти значки изначально разрабатывались в качестве иконочного шрифта, так что с использованием в качестве веб-шрифта проблем не будет.

Iconfinder

Iconfinder
  • Format: SVG, PNG, ICO, торговая площадка.
  • Лицензия и цена: от $9 до $49 в месяц, есть предоплаченный тариф.

Iconfinder это один из самых популярных источников иконок в сети. Он предлагает больше 4 миллионов иконок, предоставляя пользователям широкие возможности для поиска (по формату, цене, размеру, фону и т. д.).

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

The Noun Project

The Noun Project
  • Формат файлов, тип ресурса: SVG, PNG, торговая площадка.
  • Лицензия и цена: Creative Commons License, от $39.99.

The Noun Project предлагает одну из самых обширных библиотек иконок в интернете. Большинство значков доступны в форматах SVG и PNG, в черном и белом стиле.

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

Поиск по библиотеке очень прост. Коллекция насчитывает больше 150 тысяч иконок и регулярно обновляется: ежедневно добавляются новые иконки и наборы.

Иконки Fontawesome

Fontawesome
  • Формат файлов, тип ресурса: SVG, PNG, иконочный шрифт, торговая площадка.
  • Лицензия и цена: SIL OFL 1.1.

Font Awesome это один из самых популярных и самых используемых наборов иконок. Это также дефолтный набор команды Bootstrap. Среди прочих форматов, иконки доступны в формате SVG. Лицензия открыта, иконки можно использовать бесплатно как в личных, так и в коммерческих целях.

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

Основные особенности:

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

Lineicons

Lineicons
  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно.

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

Иконки представлены как в виде веб-шрифта, так и в виде SVG-файлов, что позволяет выбирать наиболее подходящий вариант для вашего проекта.

Итоги

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

Надеюсь, эта статья поможет вам выбрать наиболее подходящее для вас решение.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх