Лучшие бесплатные коллекции векторных иконок / Хабр
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.
Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face
, SVG, EPS, AI, PSD, Sketch.
В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.
Responsive Icons (100 иконок, PSD, AI, EPS, SVG)
Icon-Works (130+ иконок, Webfont)
Feather (130 иконок, PSD, SVG, Webfont)
Linea (730+ иконок, SVG, Webfont)
Icony (100 иконок, SVG, PSD)
Free iOS Icons Pack (100 иконок, PSD, Webfont)
Touch Icons (340 иконок, PSD, AI, SVG)
Simple Line Icons (100 иконок, AI, EPS, SVG, PSD)
Themify Icons (320+ иконок, SVG и Webfont)
Elegant Line-Style Icons (100 иконок, AI, SVG)
Pixeden Icon Font Pack (170 иконок, Webfont)
Summer and Essentials Icon Set (50 иконок, EPS, AI, PNG)
Webicons (100 иконок, AI, EPS)
Stroke Icons (80 иконок, PSD, AI, Webfont)
Microns (231 иконок, SVG, Webfont)
Outlined Icons (150 иконок, PSD, SVG, AI, Webfont)
LineIconSet v1.0 (200 иконок, EPS)
Someicons (153 иконок, EPS, SVG)
Universal Icons (100 иконок, SVG)
Flat Color Icons (300+ иконок, SVG)
Iconia (100+ иконок, Webfont)
Typicons (336 иконок, SVG, Webfont)
Geoph (80 иконок, AI, PSD)
Evil Icons (70 иконок, SVG)
Stroke Gap Icons (200 иконок, AI, PSD, SVG, Webfont)
Unigrid (100 иконок, AI)
Amenities (100 иконок, EPS, PSD)
Elegant Icons (360 иконок, Webfont)
Lightwing (60 иконок, Webfont)
Tonicons (500 иконок, EPS, Sketch, Webfont)
Epic Icons (1000+ иконок, Webfont)
Lynny Icons (900+ иконок, EPS, AI)
Helium (100 иконок, AI, EPS, SVG, Webfont)
Essential Icons (77 иконок, EPS, PSD, AI, SVG)
Dripicons (95 иконок, Webfont)
Cinema (200 иконок, SVG)
Open Iconic (200+ иконок, SVG, Webfont)
Twig (100+ иконок, SVG, Webfont)
MFG Labs Iconset (160+ иконок, Webfont)
PrestaShop Icons (300+ иконок, EPS, Webfont)
Subway (300+ иконок, Webfont)
Entypo (400+ иконок, Webfont)
Fundation Icons (100+ иконок, Webfont)
Ionic Icons (~750 иконок, Webfont)
Material Icons (~1000 иконок, SVG, Webfontg)
Font Awesome (1000+ иконок, Webfont)
Squid
Solid, Flat and Line Icons (150 иконок, EPS, AI, PSD, SVG)Roundicons (60 иконок, PNG, SVG, EPS, PSD, AI)
Retinaicons (200 иконок, AI)
Swifticons (92*3 иконок, EPS, AI, PSD, Sketch SVG)
Ballicons 2 (36 иконок, PNG, SVG, PSD)
Больше спасибо всем за внимание.
Топ 50 бесплатных наборов иконок для веб-дизайна за 2017 год – Dobrovoimaster
Несмотря на то, что изменения тенденций дизайна пользовательского интерфейса, в этом году не были столь значимыми, как мы наблюдали в предыдущие годы, именно иконки, явно стали более совершенными, более специализированными, полностью охватив и смешав все лучшие стили от ранее популярных иконок.
Возможно, этот год выдался не особо «урожайным» для дизайна иконок, но тем не менее, несколько интересных наборов, которые заслуживают вашего внимания, всё же засветились на горизонте. В этом обзоре предлагаю на рассмотрение 50 лучших(сугубо на мой взгляд) бесплатных коллекций иконок, появившихся в открытом доступе в течении 2017 года. Все наборы абсолютно бесплатные и доступны для скачивания без каких бы то ни было ограничений. Под каждым изображением есть ссылки на ресурсы, перейдя по которым, вы сможете подробно ознакомится с понравившимся набором иконок и при желании скачать.
Контурные иконки
Контурные или линейные иконки очень популярны в мире веб-разработки, так как отличаются особой простотой форм и минимализмом, не жертвуя при этом информативностью. К тому же, в большинстве своём, представленные пиктограммы можно использовать не только для сайтов, они также отлично подходят для приложений на платформе Android и iOS.
Бесплатные иконки от Icons8
По-настоящему огромная коллекция качественных иконок на все случаи жизни. На сегодняшний день представлено около 60,000 иконок в любом формате, размере и цвете. Библиотека ежедневно обновляется и пополняется, от 3 до 20 иконок в день.
Количество: 60 000 +
Форматы: SVG, AI, EPS, PNG, PDF, Fonts
Скачать
1800 бесплатных минималистичных иконок
Пакет включает в себя 1800 иконок на белом и черном фоне в форматах: .sketch .psd .ai .svg .eps и .png.
Скачать
132 Контурные иконки
Небольшой набор качественных линейных иконок в формате .ai
Скачать
70 бесплатных иконок
Бесплатный пакет из 70 векторных иконок в форматах . sketch .ai
Скачать
Набор бесплатных цветных иконок
Векторные иконки в форматах Ai, EPS и SVG
Скачать
6. 90 Бесплатных иконок
Хороший набор из 90 бесплатных контурных иконок, а так же представлены иконки со сплошной фоновой заливкой, для Sketch и Illustrator.
Скачать
Bytesize
Отличный набор бесплатных иконок в формате SVG. Каждый значок кодируется вручную по сетке 32 x 32 и использует штрих SVG, что обеспечивает максимальную гибкость стиля; это означает, что вы сможете настроить вес, цвет, размер и, при необходимости, сделать края иконок округлыми или квадратными.
Скачать
Набор бесплатных иконок для дизайнеров
В наборе представлены 38 контурных иконок популярных инструментов редактора изображений, для свободного скачивания доступны иконки в форматах AI, EPS, SVG и прозрачного PNG (1024px).
Скачать
Набор бесплатных контурных иконок
Замечательный набор абсолютно бесплатных, контурных иконок в форматах .png .pdf .svg .sketch .ai
Скачать
40 Мини-иконок
Небольшой набор качественных мини-иконок.
Форматы: AI, EPS, PNG, SVG
Размеры: 16 x 16, 32 x 32
Скачать
Иконки на чистом CSS
В этом разделе обзора представлены ресурсы предоставляющие в свободный доступ пакеты иконок разработанные на чистом CSS. Отличная альтернатива использованию изображений в качестве иконок. Для подключения таких библиотек иконок достаточно одного файла .css
, также в большинстве своём, данные ресурсы предоставляют возможность подключения наборов иконок напрямую со своих серверов, что достаточно удобно.
CSS ICON
В комплекте 512 иконок, библиотека регулярно пополняется.
Просмотреть
Iconoo
Небольшая библиотека иконок на чистом CSS.
Просмотреть
Наборы красочных разноцветных иконок
Цветные контурные иконки
Набор из 30 цветных линейных иконок в свежих пастельных тонах. В комплект входят иконки в векторном формате (SVG) и PNG разных размеров.
Скачать
Красочные иконки Ficons
120+ Бесплатных красочных иконок в формате PSD
Скачать
Изометрические иконки
Коллекция из 30 плоских изометрических иконок. Все иконки, включенные в набор, полностью редактируются и настраиваются в Illustrator. В комплекте различные размеры PNG.
Форматы: AI, EPS, PNG
Размеры: 57px, 114px, 228px, 456px, 912px
Скачать
Иконки для водных видов спорта
Набор из 24 разноцветных иконок с водной спортивной тематикой. Иконки поставляются в формате SVG и разработаны с использованием лёгкой, летней цветовой схемы и оптимальной масштабируемости.
Скачать
Наборы иконок в материальном дизайне
Такие иконки призваны стать стандартными для приложений, выполненных в унифицированном стиле «материального» дизайна, который Google представила в версии Android 5.0. В то же время, они одинаково хорошо подходят и для Android-приложений, и для iOS, и для веб-приложений.
Набор иконок Mini Material
Скачать
Material Icons
Скачать
Иконки материального дизайна с границами
250 иконок в Sketch формате
Скачать
Google Material Иконки для Sketch
Это набор из 900+ иконок Google для приложения Sketch. Все они изначально из библиотеки Google, которая периодически обновляется и пополняется.
Скачать
Иконки символов и пиктограмм
Бесплатные наборы иконок различных символов и пиктограмм.
Universal Themes — Набор векторных иконок
В комплект входит 100 векторных иконок, которые разработаны с учетом современных требований веб-дизайна, иконки представлены в формате SVG, поэтому вы сможете редактировать, масштабировать и изменять цвет иконок до тех пор, пока не получите нужный вам результат.
Скачать
Многоцелевые иконки
Комплект из 90 симпатичных, многоцелевых иконок в форматах .sketch и .ai
Скачать
Dripicons v.2
Бесплатный набор иконок в форматах PSD, AI, EPS, PDF, SVG, Sketch, Webfont
ДемоСкачать
70 Базовых векторных иконок
Хорошо проработанный бесплатный набор из 70 базовых иконок в двух вариантах, для светлого и тёмного фона. Файлы AI и SKETCH в комплекте.
Скачать
Gonzocons 2.0
Бесплатная библиотека из 100 шрифт-иконок, также в архиве предоставлены все коды для демонстрационной страницы, форматы веб-шрифтов и .SVG-файлы.
Скачать
Набор иконок пользовательского интерфейса
В набор пользовательского интерфейса UI включены 100 векторных иконок, которые разработаны с учетом особенностей пользовательских интерфейсов, иконки в формате SVG, контурные и цветные версии. Вы можете свободно использовать эти иконки в своих личных и коммерческих проектах.
Скачать
Наборы графических и веб-дизайнерских иконок
Иконки с плоским графическим дизайном
Этот набор содержит 33 полностью масштабируемых векторных иконки в контурном стиле. Каждая иконка доступена в EPS, AI, PSD, PNG и SVG форматах.
Скачать
25 Иконок из категории дизайн фигур
Впечатляющий набор красивых иконок ручной работы, состоит из 25-ти легко редактируемых и готовых к использованию иконок, доступных абсолютно бесплатно. Поставляется в двух цветовых вариантах (mango & icicle) и всех удобных форматах: AI, EPS, SVG и PNG.
Скачать
40 Бесплатных иконок для дизайнеров
Вы можете использовать эти иконки для личных и коммерческих проектов.
Форматы: AI, EPS, SVG, PNG
Размеры: 16 x 16, 32 x 32
Скачать
Набор иконок художественных инструментов
Набор бесплатных иконок содержит векторные файлы в форматах Illustrator AI и . SVG, а также в формате PNG, доступны варианты, как в цветовом, так и в линейном стилях, в 5-ти размерах (32px, 64px, 128px, 256px и 512px)
Скачать
Набор иконок графического дизайна
Иконки представлены во всех удобных для работы форматах: EPS, AI, SVG и PNG.
Скачать
Комплекты плоских иконок
В этом разделе представлены бесплатные наборы иконок на самую различную тематику в лучших традициях плоского стиля. Использование плоских иконок в дизайне позволит сделать сайт или приложение стильным, современным и более понятным для пользователя.
Blobs
Бесплатный набор из 1000+ иконок в яркой цветовой гамме, представлены в форматах (AI, PSD & SVG)
Скачать
Flat Line — Набор иконок UX & eCommerce
83 иконки в плоском стиле для пользовательского интерфейса и электронной коммерции
Скачать
Iconshock flat icons
По-настоящему огромная библиотека иконок в различных стилях для личного и коммерческого использования, в том числе большой выбор иконок в плоском дизайне. Бесплатно доступны иконки в разных размерах до 72px и в формате PNG. Вы можете скачать как весь пакет, так и каждую понравившуюся иконку по-отдельности, предварительно выбрав нужный вам размер
Скачать
30 Иконок для рабочего пространства
Набор иконок для оформления рабочего пространства, представлен в свободный доступ в форматах AI & EPS.
Скачать
70 Плоских иконок веб-интерфейса
В наборе представлены 70 различных иконок пользовательского интерфейса, в форматах SVG и PNG.
Скачать
Наборы иконок для бизнеса и электронной коммерции
Иконки банка и денег
Набор из 36 бесплатных иконок для банков и денег, эти иконки с плоским стилем идеально подходят для приложений или веб-сайтов, связанных с банковой деятельностью. Иконки представлены в векторных формах(AI, PSD, EPS, PNG & SVG) и следовательно, легко редактируются и изменяются.
Скачать
Набор иконок электронной коммерции
Набор выполнен в плоском стиле, в комплекте 50 ярких иконок, охватывающих все основные области электронной коммерции, включая иконки состояния корзины, иконки способов оплаты, доставки, иконки торговых категорий и многое, многое другое. Представлены иконки в двух форматах SVG и PNG, вы можете свободно использовать их в своих личных и коммерческих проектах.
Скачать
Набор бизнес-иконок
50 красочных иконок в плоском стиле по бизнес тематике, представлены в форматах AI и SVG, поэтому их можно бесконечно масштабировать, не теряя при этом качества изображения, идеально подойдут для адаптивных веб-дизайнов. Вы можете свободно использовать их в своих личных и коммерческих проектах.
Скачать
40 Иконок электронной коммерции
Бесплатный набор из 40 векторных иконок по теме электронной коммерции. Бесплатная версия содержит файлы форматов Adobe Illustrator (.ai), PDF и Encapsulated PostScript (.eps).
Скачать
Наборы иконок на погодную тему
Пакет погодных иконок
Пакет иконок погодной тематики, содержащий 30 замечательно отрисованных иконок в форматах .png и .sketch. Отлично впишется в дизайн приложений и веб-сайтов о погоде.
Скачать
Шрифт-иконки погоды
Большой пакет шрифт-иконок CSS с 222 иконками погоды, готовыми к подключению в Bootstrap или любой другой проект, для которого нужны высококачественные метеорологические иконки. Набор регулярно обновляется и пополняется.
Скачать
Конечно, представленные в подборке ресурсы, это лишь малая часть всего многообразия дизайнерских разработок представленных ранее и появившихся в течении этого года. Популярные и давно хорошо себя зарекомендовавшие ресурсы, в большинстве своём не нуждаются в представлении, так что в данном обзоре попытался выделить сравнительно новые и качественные работы. Надеюсь кому-нибудь пригодится.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Лучший премиум и бесплатный для разработчиков и дизайнеров
Отзывы
- Плюсы использования иконок
- Лучшие пакеты иконок
- Бонус!
- Создание приложений с помощью Flatlogic
- Заключение
Об иконках
Значки играют важную роль в создании первого впечатления о сайте или интерфейсе приложения. Но на их разработку с нуля уходит много времени и денег. Использование их на вашем сайте позволяет вам эффективно общаться с посетителями: они повышают удобочитаемость, выделяют важный контент, усиливают функциональность или функции и улучшают дизайн. Поэтому стоит обратить внимание на готовые лучшие пакеты иконок.
Кроме того, когда дело доходит до дизайна иконок, это отличный способ продемонстрировать квалификацию дизайнера. Милый, приятный набор иконок — это идеальная демонстрация работы дизайнера и мощный инструмент для создания вашей репутации в Интернете.
Кроме того, значки являются одной из наиболее неотъемлемых частей веб-сайта или приложения. Они отвечают за навигацию и влияют на общее впечатление от приложения. В настоящее время, если вы небольшая компания, доступно множество бесплатных и платных пакетов значков. Процесс выбора значков очень важен, существует множество ресурсов значков, которые также можно разделить на значки Материалов или социальных сетей.
- Иконки помогают повысить читабельность сайта или приложения;
Хорошо сделанные значки помогают уменьшить объем текста. Их использование делает ваше сообщение понятным без текста;- Они придают индивидуальность вашему продукту;
- Они могут стать хорошей отправной точкой для знакомства с продуктом;
- И последнее, но не менее важное: одна из важнейших функций иконок — помочь пользователям интуитивно понять приложение как при первом знакомстве, так и при последующем использовании.
В этой статье вы найдете коллекцию некоторых из лучших премиальных и бесплатных пакетов значков, которые вы можете использовать на своем веб-сайте или в бизнесе, даже если вы не творческий художник. Наборы иконок, представленные в этой статье, могут использоваться не только на обычных сайтах и в простых случаях, но и в более сложных и специализированных.
Для вашего удобства мы разделили пакеты значков на несколько категорий. Перед описаниями вы увидите категорию, к которой относится этот товар.
- Бесплатные иконки ;
- Торговые площадки с наборами иконок. На торговой площадке представлены иконки разных авторов. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары;
- Материальный значок наборов и
- Наборы иконок CSS. Иконки CSS сделаны с использованием — угадайте, что — CSS. Чтобы их использовать, просто скопируйте код на свою страницу;
- Иконочные шрифты. Согласно Pluralsight, иконочные шрифты — это настоящие шрифты, содержащие символы и глифы вместо букв или цифр. Они популярны среди веб-дизайнеров, поскольку их можно стилизовать с помощью CSS так же, как и обычный текст. Иконочные шрифты обрабатываются браузерами как текст, поэтому их необходимо нормализовать, чтобы избежать проблем со сглаживанием текста, и они поддерживаются почти во всех браузерах;
- Значки SVG.
- Глифы и пиктограммы наборов иконок.
Флэтикон
Веб-сайт: https://www.flaticon.com/
Форматы и типы: PNG, SVG, EPS, PSD и BASE 64, Marketplace
Цена и лицензия: Ограниченный бесплатный план и премиум-планы от 7,50 долларов США в месяц
Flaticon содержит полностью редактируемые векторы и может использоваться как для личных, так и для коммерческих проектов. FlatIcon содержит более 8 миллионов векторных иконок, сгруппированных в 203 091 пакет.
Продукт имеет расширение Adobe, которое позволяет легко импортировать значки в Photoshop, Illustrator и After Effects. Если вы хотите использовать веб-шрифт вместо статических файлов, Flaticon позаботится о преобразовании формата и создаст веб-шрифт, готовый к использованию. Вы также можете настроить загруженные значки.
Ключевые факты:
- Более 8,8 миллионов иконок;
- Форматы SVG, EPS, PSD, CSS и PNG;
- Иконочные шрифты, значки интерфейса, анимированные значки и наклейки
- Adobe Extension for CC Suite;
- Лицензия Linkshare с премиальными опциями; и
- Новые пакеты значков добавляются каждый месяц.
Премиум-подписка с FlatIcon предоставит вам полные лицензионные права, доступ к эксклюзивному контенту, отсутствие рекламы, приложение MacOS и расширения Adobe, а также возможность создавать неограниченное количество коллекций.
Иконки для варенья Веб-сайт: https://jam-icons.com/
Формат и тип: SVG, CSS
Цена и лицензия:
Jam — это набор из 896 иконок ручной работы. Этот пакет значков поставляется как с версиями SVG, так и со шрифтами. Значки можно использовать в виде файлов SVG в веб-проектах, проектах печати или разработки приложений. Вы также можете использовать их в качестве шрифта с заданными таблицами стилей CSS. Есть размеры 16px, 24px и 32px. Вы также можете выбрать заливку или обводку значков.
Набор иконок Fontisto Веб-сайт: https://fontisto.com/
Формат и тип: CSS
Fontisto — это набор векторных иконок. Их можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS. Продукт не требует Javascript. Иконки Fontisto являются векторными, а это значит, что они будут хорошо смотреться на мониторах с высоким разрешением.
На веб-сайте вы можете найти полную документацию и различные руководства по запуску и настройке продукта. Вы можете начать пользоваться продуктом, просто разместив ссылку на своем веб-сайте. Кроме того, вы можете использовать Fontisto с менеджерами пакетов, которые вам подходят: npm, yarn, bower и т. д.
Веб-сайт: https://iconscout.com/icons
Формат и тип: SVG, PNG, ICO, ICNS, EPS, AI, PDF
Iconscout — это ресурс, содержащий более 2,9 миллионов векторных иконок. Их диапазон категорий невероятен, независимо от того, какой вид вы ищете, вы всегда найдете его на Iconscout. Они бывают самых разных стилей: контурные, сплошные, цветные контурные, нарисованные от руки и многие другие.
Они также предоставляют интегрированные инструменты, плагины и редакторы. Вы можете настроить и преобразовать свои значки, не выходя из Iconscout.
Ключевые факты:
- 2,9 млн. иконок, более 30 тыс. иллюстраций, более 3 тыс. 3D-ресурсов, 2,8 тыс. анимаций Lottie;
- 5000+ активов добавляются каждый день;
- Приложение Iconscout доступно для использования прямо с панели инструментов;
- Интегрированные плагины и инструменты, такие как редактор значков и конвертер значков.
Веб-сайт: https://iconmonstr.com/
Формат и тип: SVG, EPS, PSD и PNG, торговая площадка
Цена и лицензия: Бесплатно
Коллекция иконок Iconmonstr насчитывает более 4400 иконок. Каждый набор значков предлагает как контуры, так и заполненные версии графики, чтобы их можно было использовать для различных дизайнерских приложений. Каждая иконка на этом сайте доступна бесплатно, а файлы иконок доступны в таких форматах, как SVG, AI, PSD и PNG. Файлы можно использовать в бесплатных и коммерческих целях.
Iconmonstr упрощает поиск значков с помощью мощной функции поиска. Вы даже можете сохранить свои любимые значки в личной коллекции для использования в будущем.
Основные характеристики:
- бесплатное использование всех значков,
- четыре варианта загрузки формата и
- значки уменьшенного размера, оптимизированные для использования в Интернете.
Веб-сайт: https://icons.pixsellz.io/
Формат: SVG, EPS, PSD, PNG, FIG, Material design
Цена и лицензия: Бесплатно, Apache License Version 2.0
Огромный набор из более чем 1000 иконок, разделенных на 16 различных категорий. Бесплатный пакет значков вдохновлен дизайном материалов и представлен в трех различных визуальных стилях — округлый, контурный и двухцветный. Набор доступен в 6 различных форматах файлов, поэтому вы можете использовать значки в предпочитаемом вами программном обеспечении для дизайна.
Основные характеристики :
- 3 стиля,
- стилей Figma,
- 1000+ значков,
- 24×24 пикселей,
- стилей и символов эскиза,
- 16 категорий и
- 6 форматов файлов.
Веб-сайт: http://www. entypo.com/
Формат и тип: SVG
Цена и лицензия: Бесплатно, Creative Common License 4.0
Entypo — это семейство иконок SVG, тщательно созданное несколько лет назад Даниэлем Брюсом в Швеции. Эти значки превосходны: когда дело доходит до халявы, они на первом месте. Продукт поставляется в формате SVG с 411 иконками, бесплатно с лицензией Creative Commons.
Автор говорит, что создание шрифта занимает много времени, и лучше потратить время на разработку новых пиктограмм.
Злые значки Веб-сайт: https://evil-icons.io/
Формат и тип: SVG, Sketch
Цена и лицензия: Бесплатно, MIT
Этот пакет абсолютно огромен и включает в себя все, включая SVG и оригинальные исходные файлы. Это означает, что вы можете загружать SVG вместе с файлами для Illustrator и файлами .sketch для Sketch.
Каждая иконка выполнена в виде тонкой линии, и они идеально подходят для большинства веб-сайтов. Тот факт, что вы можете редактировать исходный код, делает их еще более ценными.
Значки Streamline Веб-сайт: https://streamlineicons.com/
Формат и тип: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Цена и лицензия: Бесплатно до $411
Streamline Icons — еще один приятный и адаптируемый бесплатный набор иконок на веб-рынке. Инструмент организован в 53 категории с более чем 30000 векторных иконок.
Это один из немногих пакетов значков, оптимизированных для Sketch, позволяющий легко управлять шириной и цветом обводки. Встроенные функции Sketch, такие как символы и общие стили, делают повторное использование элементов, таких как значки, быстрым и простым процессом.
У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать иконки прямо из браузера.
Основные характеристики:
- организовано более 30000 векторных иконок;
- Smart Strokes для изменения толщины контура;
- Форматы Sketch, AI, EPS, PDF, PNG, SVG;
- веб-приложение для поиска и редактирования значков;
- Каждый значок в Streamline 3. 0 имеет три уникальных веса: светлый, обычный и полужирный.
Веб-сайт: https://smashicons.com/
Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
Цена и лицензия: Бесплатно до $149
Smashicons предлагает обширную коллекцию с более чем 219000 иконок в своей библиотеке. Smashicons работает немного иначе, чем другие: их цена основана на месячном плане 5 долларов в месяц. Это означает, что за 5 долларов в месяц вы получаете доступ ко всей их коллекции, а также к любым будущим значкам, которые они выпустят.
Основные характеристики:
- очень большая коллекция значков,
- все значки совместимы с несколькими платформами,
- простое в использовании веб-приложение для поиска и поиска нужных значков,
- бизнес-модель на основе подписки,
- мультиплатформенная поддержка.
Веб-сайт: https://icons8. com/
Формат и тип: SVG, PNG, PDF
Лицензия и цены: Лицензия Good Boy, бесплатно до $24 в месяц
Набор иконок от Icons8 включает более 120000 иконок, которые охватывают несколько категорий; от бизнеса и офиса до людей, еды и социальных сетей. Они предназначены для имитации внешнего вида конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.
Значки работают с Sketch, Photoshop и Xcode. Вы можете использовать веб-редактор перед загрузкой значков в вашу систему.
Основные характеристики:
- Форматы SVG, PNG и HTML;
- значков, доступных в различных стилях, таких как значок линии, значок с заливкой и полноцветный;
- все можно скачать в формате .zip;
- редактировать перед загрузкой;
- как бесплатные, так и платные варианты подписки.
Веб-сайт: https://icomoon. io/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Бесплатно до $139 в месяц
Icomoon представляет собой полноценный инструмент для создания иконок и управления ими. Продукт имеет качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную на сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI. Набор иконок также постоянно обновляется его создателями.
Каждый пакет значков содержит подробные сведения о лицензировании, чтобы дизайнеры и разработчики точно знали, как можно использовать значки. Пользователи также могут создавать свои собственные шрифты для значков.
Основные характеристики :
- комплексные инструменты управления иконками,
- бесплатные и платные варианты загрузки,
- широкий выбор форматов загрузки,
- бесплатные и простые обновления.
Веб-сайт: http://www. glyphish.com/
Формат и тип: SVG, PNG, PDF, PSD, Glyph, Icon font
Лицензия и цена: Creative Common Attribution, $99 на весь срок службы
Glyphish предлагает множество различных пакетов значков. Каждый пакет поставляется в различных форматах, включая PNG, SVG, PSD и AI. Пакет значков доступен за 99 долларов. Бесплатная демоверсия включает 50 иконок. Все может быть легко отредактировано дизайнерами.
Основные характеристики:
- иконок для нескольких платформ: iOS, Android, Web, Windows;
- набор из 50 бесплатных иконок;
- простое перетаскивание в Xcode;
- значков, специально подобранных для дисплеев Apple Retina.
Веб-сайт: https://ionicons.com/
Формат и тип: SVG и веб-шрифт, шрифт Icon
Лицензия: MIT
Команда Ionic выпустила веб-шрифт под названием Ionicons. Естественно, они абсолютно бесплатны и доступны на GitHub. Вы даже можете добавить эти значки прямо на свой сайт, используя версию таблицы стилей CDN. Он полностью поддерживает SVG и веб-шрифты.
Основные характеристики:
- совершенно бесплатно,
- простая настройка путем копирования и вставки ссылки,
- поставляется в виде веб-шрифта,
- настраиваемых размеров,
- более 1100 элементов.
Веб-сайт: https://material.io/resources/icons/?style=baseline
Формат и тип: SVG, Webfont, Material design
Лицензия и цены: Бесплатно, Лицензия Apache 2.0
Material Icon — это бесплатный набор значков от Google. Чтобы обеспечить удобочитаемость и четкость, эти значки были оптимизированы, чтобы они отлично выглядели на всех платформах и дисплеях. Эти значки материалов абсолютно бесплатны и доступны на GitHub. Этот пакет значков абсолютно огромен и содержит более 1000 элементов, охватывающих широкий спектр функций интерфейса.
Все символы доступны в пяти темах. Вы получите ряд загружаемых размеров и плотностей. Лучший формат для веб-проектов — простой в использовании иконочный веб-шрифт.
Линеариконс Веб-сайт: https://linearicons.com/
Формат и тип: SVG, веб-шрифт, иконочный шрифт
Лицензия и цена: Бесплатно для 59 долларов, Common Creative License
Linear Icon Pack — один из самых популярных и лучших пакетов значков для личных или коммерческих целей. Пакет линейных значков поставляется как в бесплатной, так и в премиальной версиях. Бесплатная версия этого удивительного пакета значков распространяется под лицензией Creative Common. Существуют также различные пакеты, которые вы можете выбрать для своих нужд, например, Desktop Package.
Основные характеристики :
- CDN CloudFront;
- доступна бесплатная версия;
- поставляется в различных форматах: SVG, PDF, Webfont.
Веб-сайт: https://feathericons.com/
Формат и тип: SVG, Webfont, Iconfont
Лицензия и цены: Бесплатно, лицензия MIT
Feather — один из самых популярных наборов иконок с открытым исходным кодом. Это иконки с открытым исходным кодом, разработанные на сетке 24×24. Они доступны в формате SVG. Он находится под лицензией MIT, и в открытом исходном коде имеется около 250+ иконок.
Значки легко редактируются, они чистые и четкие — независимо от размера. Сначала они были разработаны как иконочный шрифт, поэтому он предназначен для встраивания в качестве веб-шрифта.
Иконфайндер Веб-сайт: https://www.iconfinder.com/
Формат: SVG, PNG, ICO, Marketplace
Лицензия и цены: От 9 до 49 долларов в месяц
Iconfinder — один из самых популярных ресурсов иконок в сети. Он предлагает более 4 миллионов значков, предоставляя пользователям различные параметры поиска, включая формат значков, цену, размер, фон и т. Д. Существует несколько планов ежемесячных платежей — от 9 долларов.до 49 долларов. Вы также можете выбрать систему «оплата по мере использования».
Файлы значковдоступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, а их размеры варьируются от 16×16 до 512×512. Вы также можете поработать с некоторыми из лучших дизайнеров сайта, если не можете найти что-то, что вам нравится, или просто хотите создать собственные значки, разработанные специально для вас и вашего бренда.
Основные характеристики:
- бесплатные и платные варианты использования,
- гибкие функции поиска,
- иконки доступны в различных форматах,
- множество категорий и стилей,
- редактор иконок.
Веб-сайт: https://thenounproject. com/
Формат и тип: SVG, PNG, Marketplace
Лицензия и цены: Creative Commons License, От $39,99
The Noun Project предлагает одну из самых больших библиотек иконок, доступных в Интернете. Большинство иконок этого сайта доступны в форматах SVG и PNG, а также в черно-белом стиле.
Библиотека сайта состоит из файлов значков, разработанных различными независимыми дизайнерами. Это место, где создатели и творческие профессионалы могут сотрудничать, продавать свои проекты и находить, казалось бы, бесконечную библиотеку премиальных значков.
Поиск в этой огромной и всеобъемлющей библиотеке значков очень прост. Дополнительные ключевые функции этой библиотеки значков включают бесплатные и платные варианты загрузки, множество больших наборов значков, приложение для Mac и многое другое. Эта библиотека иконок регулярно обновляется, и каждый день публикуются новые иконки и наборы.
Основные характеристики:
- более 150 000 иконок;
- Форматы SVG, PNG;
- средства поиска и обнаружения;
- Creative Common License с премиальными опциями;
- бесплатных и платных вариантов загрузки;
- новых иконок загружаются почти ежедневно.
Веб-сайт: https://fontawesome.com/icons
Формат и тип: SVG, PNG, Icon font, Marketplace
Лицензия и цены: SIL OFL 1.1
Font Awesome — самый используемый и самый популярный набор иконочных шрифтов. Это также набор значков по умолчанию для команды при начальной загрузке. Он также доступен в виде значков SVG среди других форматов. Лицензия открыта и бесплатна для чего угодно, коммерческого или личного.
Каждый значок полностью масштабируется и поддерживается непосредственно в CSS. Вы можете изменить цвета, тени, фоновые градиенты и многое другое, используя чистый CSS3. Еще одна причина использовать эту библиотеку заключается в том, что она полностью оптимизирована и не имеет проблем с совместимостью, поскольку вообще не требует JavaScript.
Основные характеристики:
- Векторный шрифт,
- каждый значок поставляется с классом CSS и Unicode,
- бесплатно,
- создан с учетом доступности (узнайте, как проводить тестирование доступности),
- позволяет легко обновляться на разных веб-сайтах,
- предлагает настольная шпаргалка по всей библиотеке иконок.
Веб-сайт: https://lineicons.com/
Формат и тип: SVG, Веб-шрифт, Иконочный шрифт
Лицензия и цены: Бесплатно
LineIcons также предоставляет бесплатный CDN с четкой документацией, которая упрощает начало работы.
Этот пакет значков абсолютно бесплатный и содержит более 450 значков линий. Он охватывает все основные значки, необходимые для проекта, из разных категорий. LineIcons также предоставляет бесплатный CDN и понятную документацию для легкого начала работы. Он поставляется с двумя различными масштабируемыми пакетами — файлами WebFonts и SVG, которые вы можете использовать в зависимости от потребностей вашего проекта.
Основные характеристики:
- 450+ бесплатных иконок,
- файлов SVG,
- Web Font Ready,
- бесплатный CDN.
Бонус!
Прошло чуть меньше года с момента публикации статьи. Мы продолжали проверять рынок на наличие новых значков и пакетов значков, и мы рады сообщить, что рейтинг остается в силе. Тем не менее, рынок динамичный и постоянно меняется, поэтому должны были быть какие-то сдвиги и обновления. Пакеты в нашем списке не отсортированы в каком-либо определенном порядке, поэтому нет необходимости их перестраивать. Тем не менее, мы нашли несколько новых записей в списке, и мы считаем, что по крайней мере одна из них заслуживает почетного места.
Иконки LineaВеб-сайт: https://linea.io/
Форматы: SVG, PNG
Linea — огромный центр иконок. У них есть множество категорий, таких как бесплатные базовые значки, линейные значки, бесплатные значки электронной коммерции и так далее. У них одна из самых богатых коллекций бесплатных иконок. Если бы нам пришлось выделить главный минус коллекции Linea, мы бы сказали, что это отсутствие разнообразия. Все значки здесь имеют одинаковый стиль, что может быть проблемой, если вы планируете запустить второй продукт с совершенно другим стилем. Однако, поскольку значки доступны в формате .png и других форматах, поддерживающих прозрачный фон, их внешний вид сильно меняется в зависимости от фона. Нам понравился характерный рисованный стиль иконок Linea. А учитывая, что большинство их пакетов бесплатны, вам обязательно стоит попробовать Linea.
Особенности:
- Бесплатный доступ
- Уютный рисованный вид
- Различные коллекции, такие как электронная коммерция, стрелки, музыка и т. д.
Создание приложения с помощью Flatlogic
Мы много рассказали о веб-значках и их использовании в веб-разработке. Если это все, что вам нужно из статьи, переходите к заключению. Если вам интересно создавать приложения самостоятельно без специальной подготовки и с минимальными затратами своего времени, продолжайте читать!
Большинство приложений можно воспроизвести, используя различные комбинации одних и тех же частей. Это то, что мы сделали с платформой Flatlogic. Мы сократили разработку приложений до нескольких вариантов. Далее мы увидим, что они из себя представляют.
#1: Выберите имяЭта часть говорит сама за себя
#2: Соберите стопкуВыберите базовые технологии для интерфейса, сервера и базы данных. Минимального исследования каждого варианта должно быть достаточно.
№3: выберите дизайнВы увидите несколько вариантов оформления. Выберите тот, который вам наиболее удобен. Вероятно, вы потратите много времени на его просмотр.
№ 4: выберите схему базы данныхОпределите поля, типы данных, параметры и отношения между ними. Схема — это то, как работает ваша база данных. Это то, какие данные он получает и как он обрабатывает эти данные. Наш редактор схем прост в использовании. Или вы можете использовать одну из готовых схем, которые вам предложат.
#5: просмотр и созданиеНа этом этапе вы сделаете именно это: проверьте, все ли параметры верны, и сгенерируйте приложение. Когда приложение будет готово, вы можете отправить его на GitHub или разместить в один клик.
Заключительные мысли о пакетах значков
Выбор правильного пакета значков для вашего проекта должен основываться не на том, что считается самым популярным, а на том, что лучше всего соответствует потребностям вашего проекта. При выборе набора иконок обратите внимание на то, насколько легко начать проект, какие форматы присутствуют в библиотеке и на цену.
Также важным фактором при выборе набора иконок будет соответствие стиля вашего приложения или сайта.
Мы надеемся, что эта статья поможет вам выбрать наиболее подходящий платный или бесплатный набор иконок для ваших нужд.
Вам также могут понравиться эти статьи:
- jQuery против JavaScript. Почему мы удалили jQuery из наших шаблонов?
- Лучшие API и библиотеки JavaScript Maps
- 20+ инструментов разработчика React для повышения продуктивности программирования
Дизайны Icon Pack, темы, шаблоны и загружаемые графические элементы на Dribbble
View Oppo Icon Branding Design: набор иконок с плоским вектором
Фирменный дизайн Oppo Icon: набор иконок в плоском векторе
Посмотреть халяву: Iconly V2.