Значки иконки для сайта: 167,400 бесплатных иконок — скачивайте в SVG и PNG

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

Fontisto

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

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

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

Iconmonstr

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

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

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

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

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

Entypo

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

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

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

Evil Icons

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

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

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

Streamline icons

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

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

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

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

Smashicons

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

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

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

Icons8

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

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

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

Icomoon

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

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

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

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

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

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

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

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

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

Angular Material Icons

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

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

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

Linearicons

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

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

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

Feathericons

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

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

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

Iconfinder

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

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

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

The Noun Project

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

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

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

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

Иконки Fontawesome

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

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

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

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

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

Lineicons

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

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

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

Итоги

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

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

Где искать иконки для сайта: 20 лучших ресурсов

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

The Noun Project

The Noun Project — это огромная библиотека иконок, в которой их более 2 миллионов штук. Все эти иконки сделаны участниками.

icomonstr

iconmonstr — это библиотека значков, предлагающая более 4000 иконок, отсортированных в 300+ различных коллекций. Эта библиотека поддерживается всего одним человеком.

Good Stuff No Nonsense 

Good Stuff No Nonsense — это библиотека значков, которые нарисованы от руки.

Orion

Значки Line, Solid, Color & Flat с точным и унифицированным стилем. Приспосабливается к любому типу проекта с различным размером, цветом и разнообразием.

IcoMoon

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

Pictonic

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

icons8

100 000 значков и ежедневные обновления коллекции Icons8 трудно превзойти. Пользователи могут искать значки по тегам или просматривать более 50 различных тематических коллекций, чтобы найти графику, соответствующую их потребностям.

Flaticon

2 000 000+ бесплатных векторных иконок в формате SVG, PSD, PNG, EPS или в виде ICON FONT. Тысячи бесплатных иконок в крупнейшей базе бесплатных векторных иконок!

Font Awesome

Font Awesome, наверное, самая известная библиотека значков. 

iconscout

iconscout — это коллекция миллионов иконок в каждой возможной категории. Пользователи имеют возможность создавать и делиться своими собственными значками и создавать коллекции.

IconFinder

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

PixelLove

PixelLove с более чем 15 000 значков для платформ iOS и Android представляет собой коллекцию для дизайнеров, создающих мобильные сайты и приложения. Все значки доступны в различных размерах.

Streamline Icons

Более 10 500 иконок в трех разных размерах. 53 категории, 720 подкатегорий.

Grabhic Burger

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

Smashicons

Smashicons предлагает коллекцию с более чем 175 000 иконок в своей библиотеке. Однако, в отличие от некоторых других упомянутых библиотек значков, не все эти значки соответствуют одному и тому же стилю. 

pngtree

Всего за 3 коротких года Pngtree удалось накопить миллионы уникальных ресурсов графического дизайна. Среди них: иллюстрации, векторы, шаблоны, фоны и, самое главное, иконки.

Найдя значок, вы можете загрузить его в формате PNG или SVG с максимальным размером 512 × 512.

Iconshock

Профессиональная библиотека значков с более чем 400 наборами иконок в более чем 30 стилях. Помимо библиотеки из 2 миллионов иконок, Iconshock также специализируется на пользовательских стилях. 

Material Design Icons

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

Material Icons

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

freeicons

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

Иконки для сайта: какие бывают, зачем нужны и где их брать?

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

Содержание

  1. Какие бывают иконки?
  2. Зачем нужны иконки на сайте?
  3. Где взять иконки для сайта?

Какие бывают иконки?

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

В зависимости от типа графики иконки делятся на:

  • Векторные (формат SVG).

    Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.

  • Растровые (формат PNG).

    Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.

  • Символьные (форматы шрифтов).

    В веб-дизайне нередко применяются иконочные шрифты (например: FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.

Существуют основные следующие стили оформления иконок:

  • плоские (flat),
  • контурные (outline),
  • объемные (3D).

Иконка с одинаковым значением в разных стилях:

Контурная

Плоская

Объемная

Зачем нужны иконки на сайте?

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

Иконкам можно найти применение на любом сайте:

  1. В дополнение к пунктам навигации.

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

    Иконки в меню админки Joomla 4

    Иконки при скрытии текста пунктов меню

  2. Для функциональных кнопок.

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

    Иконки в кнопках админки Joomla 3

    Иконки на странице интернет-магазина

  3. Для обозначения любого элемента контента.

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

    Иконки преимуществ на лендинге

  4. Для обозначения мета-информации.

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

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

Где взять иконки для сайта?

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

Существуют следующие популярные иконочные шрифты, ознакомиться с которыми и скачать вы можете на соответствующих сайтах:

  • Font Awesome.

    Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.

    Иконки из Font Awesome

  • IcoMoon.

    Иконки из этого шрифта применяются в админке Joomla 3.x.

    Иконки из IcoMoon

  • Themify Icons.

    Этот бесплатный шрифт включает более 320 контурных иконок.

    Иконки из Themify Icons

  • Fontello.

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

    Сервис Fontello

Иконки в формате изображений

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

Iconfinder отличается:

  • более 2 750 000 бесплатных и платных иконок и их наборов в самых разных форматах;
  • удобной системой поиска и фильтрации иконок по стоимости, формату и стилю;
  • сервисом создания и изменения иконок под заказ;
  • браузерным онлайн-редактором выбранных иконок;
  • возможностью выбора размера и формата иконки для скачивания.

Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:

  1. Переходим на www.iconfinder.com.

  2. В строку поиска вводим запрос Joomla и ищем.

  3. Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.

  4. Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.

  5. Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.

  6. Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.

пп. 1, 2

п. 3

пп. 4, 5

п. 6

Ознакомиться с наборами иконок можно на странице Icon sets:

Страница с наборами иконок

Комментарии для сайта Cackle

Иконки в формате шрифта для сайта

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

Что такое иконки в формате шрифта

Иконки в формате шрифта представляет собой просто шрифт. Но в отличие от обычных шрифтов они содержат не буквы и цифры, а значки (иконки).

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

  • Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
  • Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
  • Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
  • Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
  • Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
  • Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

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

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

  1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

  2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

    
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
  3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
  4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:
  • с помощью указания соответствующих классов в атрибуте class элемента i или span.
    
    <!-- Отображение иконки в Font Awesome -->
    <span></span>
    <i></i>
    
  • с помощью указания номера значка в атрибуте data:
    
    <!--Шрифт Elegant Icon Font -->
    <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
    <span data-icon="&#x3f;"></span>
    
  • При необходимости можно настроить отображения иконки с помощью стилей CSS.
    
    <!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
    <i></i>
    <!-- Например, с помощью указания собственных правил CSS -->
    <!-- Установим размер иконки и её цвет -->
    <i></i>
    

    Но стили для иконок обычно не задают с помощью атрибута style, для этого используют классы:

    
    CSS:
    . large-green {
      font-size: 50px;
      color: green;
    }
    HTML:
    <i></i>
    
  • Примеры использования иконок в формате шрифта

    Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

    • Иконки можно использовать в кнопках:

      
      <button><i></i> Кнопка1</button>
      <button><i></i> Кнопка2</button>
      <button><i></i> Кнопка3</button>
      <button><i></i> Кнопка4</button>
      

      Кнопка1 Кнопка2 Кнопка3 Кнопка4

    • Иконки можно использовать в меню:

    • Иконки можно использовать в различных информационных виджетах:

    • Иконки можно использовать для создания социальных кнопок:

    • Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

    Популярные пакеты иконок в формате шрифта

    Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

    Glyphicons

    Font Awesome

    Foundation Icon Fonts

    Brandico

    Elegant Icon Font

    Themify Icons

    Ionicons

    Octicons

    Open Iconic

    Typicons

    Stroke 7

    Ligature symbols

    Различные коллекции иконок


    Где найти иконки социальных сетей для сайта

    Хотите разместить иконки ВКонтакте, Одноклассников, Фейсбука, Инстаграма и других соцсетей на сайте? На 1С-UMI это не составит труда. Во все сайты на этом сервисе уже встроены стандартные иконки ― достаточно включить этот блок, и кнопки появятся на вашем сайте. Но если хочется чего-то более оригинального, то всегда можно заменить эти иконки на любые другие.

    В интернете есть множество ресурсов, откуда можно скачать уже готовые иконки. Вот некоторые из них:

     

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

    Рисуем иконки при помощи Photoshop 2018

    В первую очередь, скачиваем и устанавливаем сам графический редактор. Если нет желания приобретать лицензию на Photoshop ― воспользуйтесь его бесплатными аналогами, например, онлайн-сервисом pixlr.com. Мы рассмотрим этот процесс на примере Photoshop, но аналогичные действия можно сделать и в других программах.

    Создаем файл нажатием кнопок Ctrl N или через меню «Файл-Создать».

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

     

    Все остальные значения оставляем по умолчанию, если они такие, как на скриншоте.

    Теперь жмем на кнопку «Создать».

    Открывается белый прямоугольник, в котором мы и будем рисовать нашу иконку.

    Переходим на сайт flaticon.com и вбиваем в поисковую строку название той соцсети, иконку которой мы хотим создать. Допустим, Facebook. Кликаем по иконке без всяких рамок, квадратов и окружностей. Затем скачиваем бесплатно и сохраняем себе на компьютер в PSD-формате.

     

    Открываем файл с помощью Photoshop сочетанием клавиш Ctrl O и выбором нужного документа или через меню “Файл – Открыть.

     

    Рядом с созданными нами ранее файлом открывается другой – с иконкой Facebook. Выбираем инструмент «Перо» в боковой панели редактора, наводим его на иконку, зажимаем клавишу Ctrl и кликаем по изображению.

    Теперь жмем на правую кнопку мыши и выбираем пункт «Определить произвольную фигуру».

     

    Можем дать ей любое название. Например, Facebook.

     

    Не забываем кликнуть по кнопке «ОК» после этого.

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

    Наводим мышку на белый квадрат внутри нашего документа и кликаем правой кнопкой. Среди появившихся фигур выбираем ту, которую мы определили ранее – Facebook.

     

    Жмем на Shift и левую кнопку в пустой области белого квадрата и растягиваем фигуру иконки до нужного нам масштаба (определяется на глаз).

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

     

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

     

    Для изменения цвета заливки кликните по соответствующему значку и затем по прямоугольнику с палитрой.

     

    Появится окно, где можно указать нужный нам цвет. Если речь о фирменных цветах Facebook, то используйте значение 4065ae.

    Вписываем его в поле «#» и жмем кнопку «ОК». Иконка меняет заливку на цвет, который хорошо знаком пользователям социальной сети Цукерберга.

     

    Следующий шаг – это создание рамки в виде окружности или квадрата.

    Меняем инструмент «Произвольная фигура» на «Эллипс» или «Прямоугольник».

     

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

    Если мы не отключили заливку, то вторая фигура полностью перекроет первую. В этом случае просто убираем заливку и оставляем только обводку круга/квадрата.

     

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

    Результат получается примерно такой, как на изображении ниже.

     

    Для использования градиента в заливке нужно выбрать третий значок слева.

    Чтобы поменять цвета в градиенте, кликните поочередно на каждый из нижних «карандашиков» и выберите нужный оттенок.

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

     

    Можно также наложить внешнюю или внутреннюю тень на нашу букву F. Для этой цели следует выделить мышкой слой с данной фигурой, кликнуть по нему правой кнопкой и выбрать пункт «Параметры наложения…».

     

    В появившемся окне надо пометить галочками пункты «Внутренняя тень» и «Тень». Конечно, это делать не обязательно, либо можно активировать только один пункт. Настройки тени можно также регулировать. Попробуйте это сделать самостоятельно.

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

     

    Если первую фигуру, обозначающую Facebook, нужно пропорционально уменьшить, нажмите сочетание клавиш Ctrl T, затем зажмите Shift и Alt и левой кнопкой мышки стяните букву до нужного размера.

    Если белый фон нам не нужен, а требуется прозрачный, берем инструмент «Волшебный ластик», выбираем фоновый слой и кликаем по белому пространству.

     

    Белый цвет фона исчезает.

     

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

    Теперь необходимо сохранить нарисованную нами иконку. Кликаем по кнопке «Файл» в меню и выбираем пункт «Экспортировать», затем «Экспортировать как».

    Для сохранения прозрачности нужно указать PNG-формат, а для белого фона JPEG. После этого жмем на кнопку «Экспортировать все», выбираем путь для хранения и «Сохранить».

     

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

    Свой значок для сайта

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

    Итак, что такое значок веб-сайта и для чего он нужен? Для этого нам придется вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар. Но, каждый владелей сайта хочет использовать свой собственный значок, чтобы визуально отличаться от остальных сайтов в интернете. И такая возможность появилась в современных браузерах. Более того, для каждой страницы можно назначить отдельный значок. Однако, до сих пор, некоторые веб-мастера не пользуются этой возможностью.

    Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:

    <link rel="shortcut icon" href="адрес значка" type="image/x-icon">
    

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

    В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.

    Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.

    Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов «Favorites Icon» , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем favicon.ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.

    На самом деле они совершили опрометчивый поступок, поскольку использование тега link даёт следующие преимущества:

    • файл со значком можно назвать как угодно, а не только favicon.ico
    • можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
    • если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)

    Примечание: Кстати, исходя из вышесказанного, рекомендация размещать файл с именем favicon. ico в корне веб-сайта с последующим указанием на него в теге link выглядит опрометчивой, поскольку, если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий link будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon.ico в корне сайта. В этом случае придется переименовывать файл favicon.ico и изменять код во всех остальных страниц веб-сайта, а не только той одной, для которой захочется отменить указание значка.

    Поэтому, свои значки желательно не называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.

    Теперь поговорим о формате значков ICO. ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Данные значков хранятся в несжатом виде, то есть цвет каждой точки значка кодируется независимо, и объём файла поэтому получается довольно-таки большим.

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

    Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).

    Размер 16×16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16×16 является обязательным: если IE5 не обнаружит в файле значок 16×16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16×16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16×16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16×16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16×16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете — и не работает для локальных страниц.

    Подобное поведение Internet Explorer, кстати, позволяет веб-мастеру сайта отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на веб-сервер.

    Остальные браузеры отображают значок 16×16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.

    Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.

    Отсюда следует вывод, что при создании значка для сайта или страницы главным является размер 16×16, и именно его следует прежде всего помещать в ICO-файл.

    Если стоит выбор между сохранением значка 16×16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.

    Наряду с основным размером значка 16×16, существует ещё пара стандартных размеров — 32×32 и 48×48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».

    К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован — 32×32 или 48×48? Это зависит от настроек свойств экрана — вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48×48, иначе 32×32. Использование значков размером 48×48 популярно на дисплеях улучшенной разрешающей способности, где значки 32×32 уже слишком мелки.

    Если в файле значка отсутствует изображение, соответствующее необходимому системе размеру, то будет выбрано наиболее подходящее из них, а потом растянуто (или сжато). Такие значки выглядят размазанными, что довольно-таки некрасиво (тем более это верно для тех значков, некоторая часть изображения которых прозрачна, и сквозь неё просвечивает фон рабочего стола).

    Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16×16, один 32×32, и один 48×48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.

    Дополнительные возможности

    Может ли значок быть не в формате ICO, а в каком-нибудь другом формате — например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:

    <link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />
    

    Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.

    Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:

    <link rel="shortcut icon" href="адрес значка.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />
    

    Браузер всегда берёт последний из указанных значков — при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.

    Этот трюк работает и со значками нестандартных форматов — таких, как MNG. Такие значки надо всегда указывать последними — а перед ними приводить, как минимум, ICO-версию.

    ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.

    Значки для iPhone, iPad

    В связи с популярностью устройств от компании Apple стала актуальной создания значков для iPad и iPhone. Когда пользователь в Safari выбирает команду Добавить в «Домой» на рабочем столе устройства появляется значок. Для этой цели необходимо создать картинку в формате PNG с размерами 72×72 пикселей для iPad и 114×114 пикселей для iPhone 4. После этого необходимо прописать:

    <link rel="apple-touch-icon" href="/icon.png" />
    

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

    Если вы не хотите подобных эффектов для своего значка, то используйте другую запись:

    <link rel="apple-touch-icon-precomposed" href="/icon-precomposed.png" />
    

    HTML5

    С появлением HTML5 стало возможным использовать новый атрибут sizes. И теперь можно встретить такую запись.

    
    <link rel="icon" type="image/png" href="/favicon-32x32.png">
    

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

    Программы для создания ICO-файлов

    Многие графические редакторы и специализированные редакторы значков позволяют создавать или конвертировать картинки в значки.

    Не забывайте о том, что фиксированная палитра не обязана состоять из системных цветов. Поэтому значки 32×32 и 48×48 следует сохранять, по крайней мере, в 256-цветной палитре, поскольку в True Color они будут занимать слишком много места, а грамотный подбор палитры способен сделать ограниченность количества цветов практически незаметной.

    Также вы можете воспользоваться различными онлайн-сервисами, которые позволяют загрузить на сайт нужный значок или PNG-файл и получить готовый значок для вашего веб-сайта:
    www.favicon.cc/
    www.favico.com
    FavIcon Generator
    Genfavicon

    Дополнительная информация

    Добавляем favicon в WordPress
    Какие нужны фавиконки

    Реклама

    Бесплатные иконки для соцсетей: 30+ наборов

    Иконки соцсетей – это графические элементы с логотипами популярных платформ. Они представляют собой прямые ссылки на аккаунты компаний в социальных сетях. При добавлении их на сайт всегда необходимо проверять условия их использования.

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

    Vecteezy – это большая библиотека, где все иконки собраны в папках по типам файлов. Среди доступных форматов – SVG, EPS, & PNG и не только.

    Набор из 12 иконок, оформленных в виде круглых кнопок.

    Эти изображения будут отлично смотреться на любом фоне благодаря круглой белой рамке.

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

    Этот набор будет отлично смотреться на любом фоне – как на светлом, так и на темном. Доступно в общей сложности 168 иконок.

    Набор из 23 изображений в формате PNG, ICO и BMP.

    Эти иконки оформлены в виде стикеров. В набор входит 12 изображений.

    8 круглых иконок в форматах PNG и PSD.

    Еще один большой набор изображений. Всего 110 иконок.

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

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

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

    Иконки в данном наборе представлены в нескольких стилях: круглые, многоугольные, прямоугольные, с закругленными углами, в форме капли и не только. Доступны форматы AI, EPS, SVG и PNG.

    Данные иконки выглядят так, как будто были нарисованы от руки. В набор входит около 20 изображений.

    Это набор иконок с длинной тенью, которая призвана сделать их плоский дизайн объемнее.

    Круглые значки соцсетей отлично подойдут для блога или информационного сайта. Иконки из данного набора разработаны профессиональными дизайнерами и не требуют изменений.

    Треугольные иконки – отличный выбор, если вы хотите немного освежить дизайн сайта. В набор входит 20 изображений.

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

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

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

    Плоского дизайна много не бывает. Данный набор иконок включает в себя 20 изображений в соответствующем стиле.

    Набор из более чем 270 иконок круглой формы. Коллекция постоянно пополняется.

    Еще один набор плоских иконок с удлиненными тенями. Всего доступно 14 изображений.

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

    Довольно лаконичный набор – все иконки выполнены в одном цвете с черными рамками. Всего доступно 12 значков.

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

    Набор из 15 стильных иконок, оформленных в виде марок. Доступны в форматах PNG и PSD.

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

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

    Еще один набор иконок-скетчей. Отлично будут смотреться в блогах и везде, где вы сочтете их уместными.

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

    Заключение

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

    Источник: vandelaydesign.com

    иконок веб-сайтов — скачать бесплатно, PNG и SVG

    Иконки веб-сайтов — бесплатно, PNG и SVG

    Иконки

    Фото

    Музыка

    Иллюстрации

    Поиск

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    Коллекция

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт

    +

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция me Веб-сайт

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    Веб-сайт резюме

    + Коллекция

    + Коллекция

    Аналитика веб-сайта

    + Коллекция

    Любимый веб-сайт

    + Коллекция

    Любимый веб-сайт

    + Коллекция

    Интеллектуальный веб-сайт

    + Коллекция

    Статистика веб-сайта

    + Коллекция

    + Коллекция

    + Коллекция

    Аналитика веб-сайта

    + Коллекция

    Статистика веб-сайта

    + Коллекция

    Интеллектуальный веб-сайт

    + Коллекция

    Веб-сайт заблокирован

    + Коллекция

    Конструктор веб-сайтов

    + Коллекция

    Веб-сайты Ite Builder

    + Коллекция

    20 мест, где можно получить бесплатные значки веб-сайтов

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

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

    Загрузите Justinmind для культового, идеального веб-дизайна

    Скачать бесплатно

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

    Тогда у вас есть множество доступных форматов файлов. Большой вопрос здесь в том, что вам подходит? Наиболее распространенными предлагаемыми форматами являются PNG и SVG. Многие из них также доступны в виде фрагментов HTML-кода. PNG — это в основном растеризованные изображения, и если они не подходят по размеру для текущего проекта, вы потеряете качество при их изменении. SVG имеют тенденцию попадать в золотую середину, поскольку они полностью масштабируемы, что дает вам возможность изменять размер по мере необходимости в вашем любимом инструменте прототипирования.

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

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

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

    Вы можете загружать значки с этого сайта в пакетах в формате SVG, PNG или PSD, и существует не менее 10 500 разновидностей значков трех разных весов, разделенных на 53 категории.Вы обязательно найдете здесь то, что вам нужно!

    Загружаемый формат: SVG, PNG и PSD

    Flat Icon, как следует из названия, — отличное место, где можно остановиться за бесконечными списками бесплатных плоских иконок. Предлагается около 60 категорий и тысячи бесплатных значков веб-сайтов для загрузки в каждой, поэтому мы говорим, что вы не ошибетесь.

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

    Если вы ищете идеальный набор плоских иконок для своего веб-сайта, даже если он ориентирован на нишевый рынок, Flat Icon поможет вам.

    Загружаемый формат: SVG и PNG

    Iconfinder имеет более 17 200 бесплатных иконок для веб-сайтов, которые ждут вас для загрузки. Лучшая часть? Все они векторные, а это значит, что вам просто нужно скачать и масштабировать их в соответствии с дизайном интерфейса вашего веб-сайта.

    Еще одна интересная особенность этого веб-сайта — бесплатный редактор изображений, который позволяет изменять размер, перекрашивать и даже перерисовывать каждое изображение по своему вкусу перед загрузкой в ​​формате SVG — приятное прикосновение!

    Загружаемый формат: SVG

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

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

    Загружаемый формат: SVG

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

    Среди доступных категорий: веб-приложение, бренд, направленная (для навигации), социальная, медицинская, погода, спорт, путешествия, образование и многие другие. Вы можете загрузить каждый значок как отдельный файл SVG или как код разметки.

    Загружаемый формат: SVG и HTML

    Вы можете рассматривать Iconstore как источник бесплатных иконок для веб-сайтов. На этом веб-сайте собрана коллекция лучших бесплатных веб-иконок.

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

    Однако вы обнаружите, что не все бесплатные значки веб-сайтов на этом сайте можно загрузить в одном и том же формате. Некоторые из них доступны в виде наборов SVG, а другие можно загрузить только в формате JPG или PNG, которые вы можете изменять в Photoshop.

    Загружаемый формат: SVG, PNG и PNG

    Boxicons дает вам доступ к 1066 бесплатным значкам веб-сайтов в формате SVG, которые можно загрузить за секунду в виде полного пакета или по отдельности. Эти простые плоские значки и глифы содержат как функциональные, так и забавные элементы, каждый из которых имеет обычный геометрический рисунок или жирный шрифт в формате глифов.

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

    Загружаемый формат: SVG

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

    В дополнение к пакету SVG они также делают доступным для вас соответствующий HTML-код, просто щелкая каждый бесплатный веб-значок.

    Загружаемый формат: SVG и HTML

    Иконки, которые вы можете найти на Тильде, просты, минималистичны и идеально подходят для любого типа веб-сайта и практически любой ситуации. Без заливки и геометрический дизайн, большинство этих значков представлены в 2D, а некоторые в 3D, в зависимости от категории, что подводит нас к одному из самых привлекательных аспектов этого веб-сайта — предлагается 43 поразительные категории!

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

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

    Загружаемый формат: SVG

    Fontello предоставляет интересный список бесплатных значков веб-сайтов для использования в качестве шрифтов значков в любом месте вашего веб-сайта или мобильного веб-приложения.Фактически, у вас есть доступ к целому ряду различных наборов иконок от разных авторов, таких как Fontelico, Font Awesome, Modern Pictograms, Typicons и многих других.

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

    Загружаемый формат: SVG

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

    Эти бесплатные фирменные значки веб-сайтов отлично подходят, если вы хотите иметь возможность связывать своих пользователей с внешним веб-сайтом или приложением, иметь возможность делиться своим контентом через социальные сети или если вы просто хотите, чтобы значки отображали определенное программное обеспечение на вашей веб-странице. К таким значкам относятся все, от Hubspot, Microsoft PowerPoint и Slack до Tinder, Instagram и Tesla.Вы обязательно найдете то, что вам нужно!

    Загружаемый формат: SVG

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

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

    Загружаемый формат: SVG

    Если вы ищете разнообразия, то 365psd — идеальный веб-сайт. Благодаря широкому выбору наборов, варьирующихся от сплошных глифов и простых монохромных значков до трехмерных мультипликационных глифов, это один из сайтов с самым разнообразным выбором бесплатных значков для веб-сайтов.

    Различные доступные наборы также разнообразны по форматам, в которых они могут быть загружены, от SVG и PSD до EPS. Лучше всего то, что эти бесплатные значки веб-сайтов доступны для коммерческого и личного использования.

    Загружаемый формат: SVG, PSD и EPS

    Если вы ищете что-то немного необычное и красочное, чтобы привлечь внимание пользователя, почему бы не попробовать коллекцию Ballicon из 36 круглых плоских значков с легким градиентом?

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

    Загружаемый формат: SVG, PNG и PSD

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

    Основная привлекательность этих значков — их минималистичный упрощенный дизайн, который полностью открыт для редактирования.

    Загружаемый формат: SVG

    Если вы ищете разнообразия, Interfacer поставляется с различными пакетами загружаемых значков SVG. Эти пакеты бесплатных иконок для веб-сайтов созданы разными авторами и размещаются на этом сайте бесплатно для коммерческого использования.Вы можете думать об этом как о чем-то вроде Dribbble для иконок.

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

    Загружаемый формат: SVG

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

    Они также доступны для загрузки в различных форматах, включая SVG и PNG, в дополнение к коду CSS. Они также предоставляют несколько полезных советов в виде руководств на своем веб-сайте о том, как редактировать свои значки с помощью Divi Builder. Нам нравятся эти парни. Они полезны.

    Загружаемый формат: SVG, PNG и CSS

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

    Paulolyslager.com позволяет бесплатно загрузить большой набор этих бесплатных значков веб-сайтов в форматах SVG и PNG.

    Загружаемый формат: SVG и PNG

    На Speckyboy вы можете загрузить 100 иконок SVG, специально разработанных Freekpik для использования в ваших проектах веб-дизайна. Вы можете масштабировать их, редактировать и раскрашивать в соответствии с вашими целями.

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

    Загружаемый формат: SVG

    И последнее, но не менее важное: если вы хотите привнести немного черного юмора на свой веб-сайт, почему бы не попробовать набор Nasty Icons?

    Вы можете найти 45 бесплатных иконок веб-сайтов для загрузки в виде файлов AI и EPS, которые передают забавные геометрические мультфильмы или приклеивают рисунки людей, которых кипятят заживо, теряют голову или падают с лестничных пролетов.На всякий случай, если вам понадобится что-то в этом роде!

    Загружаемый формат: AI и EPS

    Создавайте отличные веб-сайты с Justinmind

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

    Если вы ищете больше, чем бесплатные веб-иконки, почему бы не попробовать некоторые из наборов пользовательского интерфейса Justinmind? На нашей странице наборов пользовательского интерфейса вы найдете нашу веб-библиотеку каркасов, в которой есть значки и компоненты, специально предназначенные для веб-дизайна, а также полный набор компонентов и значков пользовательского интерфейса Font Awesome.

    Использование наших бесплатных наборов пользовательского интерфейса сделает ваш опыт веб-прототипирования увлекательным, приятным и свободным от стресса, поскольку они были специально разработаны для использования в Justinmind.

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

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

    15 лучших сайтов для поиска бесплатных и современных иконок — StylemixThemes

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

    Представьте, что вам нужно постоянно создавать новый значок каждый раз, когда вы создаете новый дизайн и / или проект? Звучит мучительно много времени.Но это также причина, по которой в последние годы появилось так много отличных веб-сайтов с иконками.

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

    Сказав это, вы также можете выбрать подписку на членство Premium — многие сайты в этом списке предлагают модели ценообразования премиум-класса.А членство означает, что вы также получаете доступ к дополнительным значкам и контенту.

    Для начала я бы не стал беспокоиться об оплате. Мы специально создали этот пост, чтобы выделить сайты, которые предлагают бесплатные иконки и платные опции в качестве альтернативы.

    Кроме того, мы уделяли много внимания современным иконкам, построенным с использованием модных элементов дизайна. Итак, если мы пропустили известный вам сайт, скорее всего, он не соответствовал нашим критериям.

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

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

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

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

    Честно говоря, это стоит каждого доллара (10 долларов в месяц) за их премиальные услуги. Вы можете редактировать значки, чтобы изменять цвета, шрифты и другие элементы. И вы можете загружать значки во многих различных форматах файлов. Включая SVG, PNG, BASE64, EPS и PSD.

    Кроме того, если вы пользователь Mac, вы можете загрузить приложение Flaticon OS X и просматривать значки без использования веб-браузера!

    А есть вообще бесплатные иконки? Iconfinder пытается доказать, что есть, и с десятками тысяч бесплатных иконок, доступных для скачивания; мы знаем, что эти парни что-то делают правильно.Как и на предыдущей платформе, Iconfinder запускает большинство своих бесплатных иконок под лицензией CC 3.0.

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

    Помимо всего прочего, Iconfinder имеет огромную базу данных, содержащую в общей сложности более 3 миллионов иконок, тем не менее, в формате SVG.И вы можете получить доступ к уникальным значкам, зарегистрировавшись в качестве премиум-члена всего за 9 долларов в месяц. Этот план позволит вам загружать до 10 иконок в месяц. А за 49 долларов в месяц вы можете получить неограниченное количество загрузок.

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

    Итак, одна из областей, в которой Icons8 выделяется, — это разнообразие стилей значков.Например, вы можете выбрать значок «Принтер», а затем выбрать один из более чем 30 отдельных стилей для этого значка. Кроме того, вы можете редактировать каждый значок прямо из браузера. И когда мы говорим «редактировать», мы действительно имеем в виду именно это.

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

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

    И последнее, но не менее важное: если вы пользователь Windows и не хотите платить за Sketch: попробуйте Lunacy — бесплатную альтернативу Sketch для пользователей Windows.

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

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

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

    Iconshock находится в ведении Unusual Minds, организации, специализирующейся на современном графическом дизайне, но также занимающейся разработкой программного обеспечения. Эти ребята работали графическими дизайнерами более десяти лет и сумели собрать более 2 миллионов оригинальных иконок для своей платформы Iconshock.

    Их работы представлены не только среди ведущих журналов планеты, но и в некоторых из самых популярных программ в мире. Если бы когда-либо были настоящие пионеры дизайна иконок, эти ребята заняли бы довольно высокое место в списке.

    Помимо библиотеки из 2 миллионов иконок, Iconshock также специализируется на пользовательских стилях. В частности, такие фавориты, как Material, iOS, Flat, Modern и многие другие.

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

    Всего за 3 года компании Pngtree удалось накопить миллионы уникальных ресурсов графического дизайна. Среди них: иллюстрации, векторы, шаблоны, фоны и, самое главное, значки.

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

    Найдя значок, вы можете загрузить его как файл PNG или SVG с максимальным размером 512 × 512. Кроме того, каждая отдельная страница значков также включает «связанные значки».

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

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

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

    В результате вы получаете более 230+ уникальных пакетов великолепно разработанных креативных иконок. Вы можете сузить результаты поиска на основе таких фильтров, как «Цветной», «Глиф» или «Контур».

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

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

    У материального дизайна был большой потенциал, но не все были непреклонны использовать его в своих повседневных проектах. И нас не удивит, если в конечном итоге Google останется единственной платформой, которая все еще использует Material Design в своих проектах.

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

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

    Подобно одному из сайтов, которые мы уже просматривали, FreeIcons посвящен выделению только самых известных из Icon Packs.

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

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

    И вы можете выбрать один из стилей, таких как 3D, Cartoon, Hand Drawn, Badges, Smooth и многих других.

    Streamline существует уже несколько лет. И их 3.0 отмечает более 30 000 уникальных иконок. Мы говорим не только о каких-то среднестатистических иконках.

    Большинство популярных продуктов, связанных с веб-сайтами, используют Streamline в качестве основного выбора для предоставления значков своим клиентам. Например. Если вы когда-либо использовали плагин WPBakery Page Builder, вам обычно рекомендуется использовать библиотеку значков Streamline.

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

    Исключительные значки с исключительными сторонними дополнениями для упрощения рабочего процесса.

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

    С момента выпуска в 2012 году Font Awesome вырос до более чем 4000 уникальных иконок.И удалось привлечь десятки миллионов пользователей по всему миру.

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

    Вы также можете использовать редактор иконок Font Awesome. Этот редактор позволяет быстро изменять цвета значков, добавлять собственный стиль или настраивать такие параметры, как поворот.

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

    Нельзя говорить ни о чем, связанном с дизайном, без Dribbble. Эта великолепная площадка изменила жизни десятков миллионов людей. И будет продолжать влиять на жизнь людей в ближайшие десятилетия.

    И хотя Dribbble наиболее широко известна как платформа, на которой дизайнеры могут «продемонстрировать» свои работы, вы найдете множество бесплатного контента на этой платформе, если вы его поищете.

    Просто выполнив поиск «бесплатные иконки», вы получите тысячи результатов, 90% из которых содержат ссылки для скачивания, так что вы можете загрузить полный набор.

    Лично Dribbble занимает первое место в списке сайтов, когда я захожу туда всякий раз, когда мне нужны бесплатные иконки для проекта. Я обнаружил, что разнообразие (и качество!) Иконок намного выше, чем что-либо еще на рынке.

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

    Craft Loop — это стильный, но простой проект иконок от Луки Берджио. Это коллекция из более чем 450 иконок, которые были разработаны с учетом принципа ручной работы.

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

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

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

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

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

    Неужели мы оставили лучшее напоследок? Я определенно считаю, что Iconfactory обладает уникальным подходом к дизайну иконок. Но в то же время я чувствую, что каждая платформа, упомянутая в этой статье, претендует на звание лучшей.

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

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

    Тем не менее, это отличный ресурс, который вы можете время от времени просматривать и, возможно, найти подходящий для любого дизайн-проекта, над которым вы работаете. Я бы сразу порекомендовал эти значки всем!

    Заключительные слова

    Всего здесь, вероятно, более 5-6 миллионов уникальных иконок, которые вы можете найти. Но дело не только в количестве.

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

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

    Бесплатные сайты и тому подобное особенно приветствуются.

    Кроме этого, наслаждайтесь сайтами, которые мы обсуждали, и с нетерпением ждем встречи с вами в следующем обзоре!

    Бесплатные иконки веб-сайтов: как их найти и использовать

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

    Что такое значки веб-сайтов и почему они важны?

    Значок веб-сайта — это изображение или символ, которые вы можете разместить на своем веб-сайте. Он действует как кнопка или ссылка, на которую вы нажимаете, или может быть просто декоративным.

    Эти значки, доступные бесплатно на iconmonstr, единообразны, и их легко разместить на вашем веб-сайте.
    • Иконки могут быть частью вашего бизнес-бренда. Значки веб-сайтов могут помочь подчеркнуть цвета, стиль, голос и логотип вашего бренда. Другими словами, они являются частью набора, который делает ваши визуальные эффекты особенными и узнаваемыми.

    Создайте логотип, который выделит ваш бизнес.

    • Значки упрощают навигацию по сайту. Они узнаваемы и помогают людям ориентироваться на вашем веб-сайте, как уличные указатели. Увеличительное стекло сообщает вам, где находится строка поиска, телефон сообщает вам, где будет номер телефона, тележка для покупок показывает вам, какие товары вы хотите приобрести и т. Д.Эти общие символы упрощают использование незнакомого веб-сайта.
    • Иконки помогают в общем дизайне вашего сайта. Значки веб-сайтов — удобный способ добавить пустое пространство на ваши страницы. Это визуальная передышка, которая делает веб-сайт более читабельным, но при этом не загроможденным и не перегруженным текстом.
    • Иконки понятны всем. Создать многоязычный веб-сайт легко, но значки также являются отличным способом передать ваше сообщение понятным для всех способом, независимо от языка или страны.

    Примечание: Возможно, вы также слышали термин favicon . Это маленький персонализированный значок, который появляется рядом с адресом вашего веб-сайта на вкладках браузера. Обычно это мини-версия вашего логотипа. Подробнее о том, как добавить значок на свой сайт Jimdo.

    Узнайте, как запустить собственный сайт-резюме сегодня!

    Где найти бесплатные значки веб-сайтов

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

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

    1. iconmonstr

    Iconmonstr базируется в Германии и предлагает тысячи значков на выбор. Они довольно простые, но бесплатные для коммерческого использования, вы также можете изменить размер и цвет.

    2. Flaticon.com

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

    Это лишь некоторые из наборов иконок, доступных во Flaticon.

    3. Flaticons.net

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

    На многих сайтах с бесплатными значками вы можете настроить размер, цвет и стиль значка перед его загрузкой. Этот пример взят с сайта Flaticons.net

    Примечание : Вы можете точно продублировать цвет, найдя его «цветовой код» — это числовое значение, которое идентифицирует цвет и гарантирует, что вы получите идеальное совпадение. Чтобы найти цветовой код, используйте плагин, например ColorZilla или EyeDropper .Эти инструменты могут соответствовать цветам на любом веб-сайте, включая ваш собственный.

    4. GraphicBurger

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

    5. Iconfinder

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

    6. Хорошие вещи, без излишеств

    Если вы хотите, чтобы значки рисовались от руки, а не как общие, посмотрите «Хорошие вещи без излишеств». Они предоставляют значки с более индивидуальным ощущением ручной работы, что лучше подходит для некоторых предприятий. На сайте представлены как бесплатные, так и платные наборы иконок.

    Бесплатные иконки на Good Stuff No Nonsense выглядят более нарисованными от руки.

    Как вы используете профессиональные иконки на своем сайте?

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

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

    Не забывайте обращать внимание на разрешения и правила использования

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

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

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

    После того, как вы скачали значок, как добавить его на свой веб-сайт?

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

    Примечание. Если вы используете Jimdo Creator, вы обычно устанавливаете значки рядом с текстом с помощью элемента «Фотографии» и элемента «Столбцы».

    Советы по правильному использованию значков веб-сайтов

    Придерживайтесь общих символов. Это одна из тех немногих сфер, где уникальность не помогает. Выбирайте довольно очевидные и хорошо известные значки, особенно если значок направленный, то есть кто-то должен его понять или щелкнуть по нему. Если это просто декоративный элемент, у вас будет больше свободы действий, но это не должно сильно беспокоить. Смешивание значков или путаница со случайными значками — это распространенная ошибка пользовательского опыта (UX), которую люди допускают при разработке собственных веб-сайтов.

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

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

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

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

    Можете ли вы создать свои собственные иконки для веб-сайтов?

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

    Готовы попробовать иконки веб-сайтов?

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

    Разведите свой бизнес в сети с Jimdo.

    20+ лучших премиум и бесплатных пакетов значков для веб-разработчиков и дизайнеров

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

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

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

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

    В Flatlogic мы создаем шаблоны веб-приложений и мобильных приложений, созданные с помощью React, Vue, Angular и React Native, чтобы помочь вам быстрее разрабатывать веб-приложения и мобильные приложения.Пойдите и проверьте себя!
    Смотрите наши темы!

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

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

    • Бесплатные иконки ;
    • Торговые площадки с наборами иконок. На торговой площадке представлены иконки разных авторов. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары;
    • Значок материала набора и Плоский значок набора;
    • Наборы иконок CSS. CSS-иконки созданы с использованием — угадайте, что — CSS. Чтобы использовать их, просто скопируйте код на свою страницу;
    • Иконки шрифтов. Согласно Pluralsight, шрифты значков — это фактические шрифты, которые содержат символы и глифы вместо букв или цифр.Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Иконочные шрифты обрабатываются браузерами как текст, поэтому вам необходимо нормализовать их, чтобы избежать проблем со сглаживанием текста, и поддерживаются почти во всех браузерах;
    • SVG-иконки. Масштабируемая векторная графика (SVG) — это формат векторной графики на основе XML, который можно масштабировать до любого размера без потери четкости. Они могут отображаться с помощью CSS, тегов объектов, тегов изображений или встроены непосредственно в ваш HTML;
    • Глифы и пиктограммы наборов значков.

    Список лучших пакетов значков

    Флатикон

    Веб-сайт: https://www.flaticon.com/packs
    Форматы и тип: PNG, SVG, EPS, PSD и BASE 64, Marketplace
    Цена и лицензия: Ограниченный бесплатный план и премиум планы от 7,50 $ / месяц

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

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

    Основные факты:

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

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

    Джем Иконки

    Веб-сайт: https://jam-icons.com/
    Формат и тип: SVG, CSS
    Цена и лицензия: Free, MIT

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

    Fontisto Icon Pack

    Веб-сайт: https://fontisto.com/
    Формат и тип: CSS
    Цена и лицензия: Free, MIT

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

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

    Iconmonstr

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

    Коллекция иконок

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

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

    Основные характеристики:

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

    Библиотека значков материалов Pixsellz

    Web-сайт: 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 форматов файлов.

    Entypo

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

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

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

    Злые иконы

    Веб-сайт: https://evil-icons.io/
    Формат и тип: SVG, Sketch
    Цена и лицензия: Free, 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 для изменения толщины контура;
    • Эскиз, форматы AI, EPS, PDF, PNG, SVG;
    • веб-приложение для поиска и редактирования значков;
    • каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и жирный.

    Smashicons

    Веб-сайт: https://smashicons.com/
    Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
    Цена и лицензия: Бесплатно до $ 149

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

    Основные характеристики:

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

    Иконки8

    Веб-сайт: https: // icons8.com /
    Формат и тип: SVG, PNG, PDF
    Лицензия и цена: Good Boy License, бесплатно до 24 долларов США в месяц

    Набор значков от Icons8 включает более 1 20000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей. Иконки созданы, чтобы имитировать внешний вид конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.

    Иконки работают в Sketch, Photoshop и Xcode.Вы можете использовать веб-редактор перед загрузкой значков в свою систему.

    Основные характеристики:

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

    Icomoon

    Веб-сайт: https: // icomoon.io /
    Формат и тип: SVG, PNG, PDF
    Лицензия и цена: Бесплатно до 139 долларов США в месяц

    Icomoon представляет собой полноценный инструмент для иконографии и управления иконками. В продукте есть качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную в сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI. Набор иконок также постоянно обновляется его создателями.

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

    Основные характеристики :

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

    Glyphish Icon Pack

    Веб-сайт: 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.

    Иониконы

    Web-сайт: https: // ionicons.com /
    Формат и тип: SVG и Webfont, шрифт Icon
    Лицензия: MIT

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

    Основные характеристики:

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

    Значки угловых материалов

    Веб-сайт: https://material.io/resources/icons/?style=baseline
    Формат и тип: SVG, Webfont, Material design
    Лицензия и цены: бесплатно, Apache License 2.0

    Material Icon — это бесплатный набор значков от Google. Чтобы обеспечить удобочитаемость и ясность, эти значки были оптимизированы, чтобы отлично смотреться на всех платформах и дисплеях. Эти значки материалов абсолютно бесплатны и доступны на GitHub.Этот набор значков огромен и включает более 1000 значков, охватывающих широкий спектр функций интерфейса.

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

    Линейные значки

    Веб-сайт: https://linearicons.com/
    Формат и тип: SVG, Webfont, Icon font
    Лицензия и цена: Бесплатно до 59 долларов США, Common Creative License

    Linear Icon pack — один из самых популярных и лучших наборов значков для личных или коммерческих целей.Пакет линейных значков доступен как в бесплатной, так и в премиальной версиях. Бесплатная версия этого замечательного набора значков распространяется под лицензией Creative Common. Существуют также различные пакеты, которые вы можете выбрать в соответствии с вашими потребностями, например, Desktop Package.

    Основные характеристики :

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

    Перья

    Web-сайт: https: // fedicons.com /
    Формат и тип: SVG, Webfont, Iconfont
    Лицензия и цена: бесплатно, лицензия MIT

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

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

    Iconfinder

    Веб-сайт: https://www.iconfinder.com/
    Формат: SVG, PNG, ICO, Marketplace
    Лицензия и цена: От 9 до 49 долларов в месяц

    Iconfinder — один из самых популярных ресурсов иконок в сети. Он предлагает более 4 миллионов значков, предоставляя пользователям множество вариантов поиска, включая формат значков, цену, размер, фон и т. Д. Существует несколько ежемесячных планов оплаты — от 9 до 49 долларов.Вы также можете выбрать систему «оплата по мере использования».

    Файлы значков

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

    Основные характеристики:

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

    The Noun Project

    Веб-сайт: https://thenounproject.com/
    Формат и тип: SVG, PNG, Marketplace
    Лицензия и цена: Creative Commons License, От $ 39,99

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

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

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

    Основные характеристики:

    • более 150 000 иконок;
    • форматы SVG, PNG;
    • средства поиска и обнаружения;
    • Creative Common License с дополнительными опциями;
    • бесплатные и платные варианты загрузки;
    • новых иконок загружаются почти ежедневно.

    Иконки Fontawesome

    Веб-сайт: https://fontawesome.com/icons
    Формат и тип: SVG, PNG, шрифт Icon, Marketplace
    Лицензия и цена: SIL OFL 1.1

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

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

    Основные характеристики:

    • Векторный шрифт,
    • Каждый значок поставляется с классом CSS и Unicode,
    • бесплатно,
    • создан с учетом специальных возможностей,
    • обеспечивает простое обновление на веб-сайтах,
    • предлагает шпаргалку для всей библиотеки значков на рабочем столе.

    Линейные значки

    Веб-сайт: https://lineicons.com/
    Формат и тип: SVG, веб-шрифт, шрифт Icon
    Лицензия и цена: Бесплатно

    LineIcons также предоставляет бесплатный CDN с понятной документацией, что упрощает начало работы.

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

    Основные характеристики:

    • 450+ бесплатных иконок,
    • файлов SVG,
    • готовых веб-шрифтов,
    • бесплатный CDN.

    Последние мысли о Icon Packs

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

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

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

    Возможно, вам понравятся эти статьи:

    Получите потрясающие иконки для своего веб-сайта

    Иконки — это графический дизайн или символ, который представляет собой какую-то фантастику, реальное действие или действие.

    Это полезный и наглядный способ помочь людям легко понять ваш контент. Они делают скучный проект привлекательным и привлекательным для аудитории.

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

    Флатикон

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

    Его библиотека иконок содержит более 3 миллионов векторных иконок. Вы также можете настроить и отредактировать эти значки.

    Не только бесплатно, Flaticon также предлагает широкий выбор значков премиум-класса. И, если вы дизайнер, вы также можете вносить значки и зарабатывать.

    Элементы Envato

    Решение премиум-класса для серьезных брендов.

    Envato Elements — это онлайн-библиотека с миллионом графических ресурсов, включая шрифты, фотографии, шаблоны, аудиоклипы, видеоматериалы, изображения и, конечно же, шрифты.

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

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

    Iconfinder

    Iconfinder очень популярен, у него более 2 миллионов пользователей. Это похоже на поисковик, но для иконок. Вы можете скачать их в форматах SVG, PNG, AI, ICO и ICNS.

    Кроме того, он позволяет загружать значки различных размеров от 16 до 512 пикселей.

    Если вы создаете дизайнерское приложение и хотите получить значки программным способом, то вам повезло — вы можете использовать их API, чтобы запустить его за считанные минуты.

    Freepik

    Freepik получил много графики.

    • Иконки
    • Векторы
    • Стоковые фото
    • Абстрактный фон
    • Мокап

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

    Иконки8

    Вы хотели отредактировать значки перед их загрузкой?

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

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

    Vecteezy

    Vecteezy упрощает поиск бесплатных иконок. Этот сайт отлично подходит, если вам не нравится кривая обучения Illustrator. Он имеет широкий спектр значков во всех категориях. Лучшее в этом сайте — это то, что не только иконки.Но он также предоставляет бесплатные стоковые изображения.

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

    GraphicBurger

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

    Существуют партии значков, которые можно загрузить без регистрации. Кроме того, есть платные значки, которые можно загружать в форматах PNG, SVG и EPS.

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

    Iconshock

    Iconshock имеет более 2 миллионов профессиональных библиотек значков и более 400 наборов значков в более чем 30 стилях.Большинство из них имеют формат SVG и настраиваются. Это большое разнообразие стилей и дизайнов включает значки iPhone, плоские значки, значки реальных перспектив и многое другое.

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

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

    Магазин иконок

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

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

    Самое лучшее на этом сайте — отсутствие премиальных планов; следовательно, все бесплатно для пользователей.

    UXWing

    UXWing предлагает решения для всех проблем, связанных с поиском значков. Это один из самых популярных сайтов бесплатных иконок. Он предоставляет высококачественные иконки, разработанные профессионалами.

    Значки доступны в сжатых форматах SVG и PNG. Что касается разнообразия, то существует более 50+ категорий.

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

    Pngtree

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

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

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

    Обтекаемый

    Streamline Icons — одно из лучших мест для поиска значков премиум-класса. Вы получите широкий выбор значков, которые сгруппированы в 53 категории и 720 подкатегорий. Все доступные значки можно настроить, так как все они представлены в нескольких форматах файлов. Они также предоставляют векторные иконки, размер которых можно изменять без потери качества.

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

    Заключение

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

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

    Бесплатные иконки скачать для коммерческого использования

    Бесплатные иконки скачать для коммерческого использования | Бесплатные иконки SVG, PNG

    Эксклюзивная коллекция тщательно созданных векторных иконок для дизайна пользовательского интерфейса, разработки веб-приложений и приложений.

    Все значки хорошо сжаты почти на 60% без ущерба для качества значков SVG и PNG.

    Разработано Expert Artiest

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

    Настройка и создание значков

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

    Все иконки бесплатные

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

    Значок сжатого SVG и PNG

    PNG хорошо сжимается без потери качества, а SVG хорошо оптимизирован с удалением ненужных данных для экономии полосы пропускания.

    Хорошо категоризировано

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

    Часто задаваемые вопросы (FAQ)

    Могу ли я использовать иконки даже в коммерческих проектах?

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

    Какие форматы доступны?

    Все значки доступны в масштабируемом векторном формате SVG, PNG с прозрачным фоном и значках веб-шрифтов.

    Какой формат значков следует использовать для веб-сайтов и мобильных приложений?

    Если у вас есть большой проект, которому нужно много значков, мы рекомендуем вам использовать значки SVG, потому что файлы PNG увеличивают общий размер файла. SVG — это векторный формат, который хорошо работает на сетчатке с высоким разрешением. даже размер файла SVG мал по сравнению с PNG.

    Добавить комментарий

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