Сайты с иконками: 4 сайта с бесплатными иконками. За все в мире нужно платить, а иногда… | by Школа веб-дизайна WDI | W.D.i дизайн-журнал

alexxlab
Разное |

Содержание

10 сайтов с качественными и бесплатными иконками — Дизайн на vc.ru

{«id»:150691,»url»:»https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»title»:»10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&title=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.

com\/intent\/tweet?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&text=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&text=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.
ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438&body=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

11 018 просмотров

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

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

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

И, нет, это не рейтинг — список маркированный, а не нумерованный.


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

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

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





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




iconmonstr

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




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




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

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




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




Все значки в

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




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




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

Flaticon!

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




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




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




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



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




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

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




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




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

Лучшие ресурсы с бесплатными иконками в формате SVG

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

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

Спасибо большое http://www.noupe.com и рекомендую:

Этот сайт с иконками в стиле Flat включает в себя более 60 000 бесплатных векторных иконок, которые можно загрузить в разнообразных форматах, таких как EPS, PSD, SVG или же PNG. Чтобы Вы смогли быстро найти нужную Вам иконку обязательно пользуйтесь очень удобным поиском, который встроен в сайт.

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

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

Простые но бесплатные иконки, которые доступны для скачивания в нескольких форматах, а именно EPS, PNG, SVG и в векторе. И конечно же есть очень удобный поиск по иконкам.

Это подборка бесплатных SVG иконок социальных сетей, которые к тому же можно с лёгкостью разместить горизонтально на любом сайте. Так же Вы можете посмотреть иконки в действии.

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

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

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

Кто сделал огромную работу собрав бесплатные SVG иконки в одном месте из Dribbble. Под каждой иконкой есть ссылка на оригинал.

Где искать иконки для сайта: 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 иконок, и большинство из них невероятно хорошо продуманы. Вы можете найти значки по таким темам, как путешествия, еда, женщины, страны и многое другое.

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

Перевод статьи «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-файлов, что позволяет выбирать наиболее подходящий вариант для вашего проекта.

Итоги

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

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

бесплатные иконки для сайта. Инструменты веб-дизайнера #1

Автор Илья Чигарев На чтение 5 мин. Просмотров 5.4k. Обновлено

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

Но сейчас хочу посвятить ему отдельную статью. Что это за сервис? Как им пользоваться?

Если Вы занимаетесь веб-дизайном, создаете сайты, например, как я лендинги, то этот сервис Вас будет очень сильно выручать. Как выручает и меня. Сайт FlatIcon.com — лучший сервис с иконками во flat-стиле в интернете.

Здесь можно скачать иконки бесплатно и использовать где угодно. Как мы видим из заголовка, здесь 173 тыс. иконок и 2700 паков, то есть наборов иконок. Это очень много. Здесь Вы найдете абсолютно все иконки, любой тематики, которая Вам нужна.

Видеоверсия статьи:

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

Как пользоваться сервисом FlatIcon?

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

Пишем в строке поиска Money и здесь появляется подсказка. То есть можно выбрать, например, money bags, то есть сумка, мешок с деньгами, или money card – это пластиковая карта и т.д.

Видим много вариантов иконок. С недавнего времени добавили еще цветные иконки . Это очень круто!

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

Вот мы видим, есть классные иконки в таком стиле, очень интересно. Я бы использовал такие на своем сайте. Так же здесь есть фильтр поиска. Он несложный. Первым идет выборка по цвету (color) — одноцветный (monocolor) или многоцветный (multicolor)

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

Следующий пункт – stroke. Жирность, насыщенность. То есть либо иконки с заливкой, либо линейные, с использованием тонких линий. Пользуйтесь поиском, чтобы уменьшить время на поиски.

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

Что такое коллекция? Если мы нажимаем добавить в коллекцию. Cверху справа видим квадратики – это и есть наша коллекция. То есть, если нужно несколько иконок, а зачастую это так, чтобы не открывать кучу вкладок с иконками мы просто создаем коллекцию.

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

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

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

Чтобы скачать, нажимаем на download collection, выбираем нужный формат, я выбираю png, и нужный размер, например 64. В новом окне нажимаем free download и идет скачивание архива. Final

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

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

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

Какое преимущество, если мы залогинимся? Здесь сохраняются наши коллекции, которые мы когда-то собирали.

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

Так же можно создавать множество коллекций, сейчас вроде только до пяти. Но это тоже не так критично.

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

Вот такой сервис FlatIcon.

Надеюсь я ответил на вопрос Где скачать бесплатные иконки.

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

20 сайтов с бесплатными иконками

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

 

ICONFINDER

На сайте iconfinder.com собрана впечатляющая коллекция иконок – здесь их почти 500 тысяч. Всего представлено более 6000 коллекций, так что будет достаточно просто найти нужный набор. Также на сайте имеются сеты премиум-класса, но доступ к ним платный – за $9 доступны для скачивания 25 коллекций в месяц, а за $29 вы получите неограниченное количество загрузок. Иконки очень удобно рассортированы по категориям, также есть строка поиска.

 

FIND ICONS

 

 

На сайте findicons.com есть очень удобная функция – коллекции и отдельные иконки можно сохранять в личных наборах – таким образом дизайнер всегда имеет доступ к выбранным им сетам. Всего на сайте представлено более 400 тысяч иконок. Главная страница сайта сделана крайне лаконичной – пользователь видит лишь логотип и поисковую строку. Если же хочется посмотреть, что нового появилось за последнее время, то нужно кликнуть по ссылке «Обзор» и перейти к просмотру.

 

ICONARCHIVE

 

 

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

 

FREEBIESBUG

 

 

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

 

ICONSPEDIA

 

 

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

 

EASYICON

 

 

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

 

ICONDEPOSIT

 

 

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

 

SOFTICONS

 

 

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

 

365ICON

 

 

ICONFEVER

 

 

FLATICON

 

 

ICONMONSTR

 

 

FREEICONWEB

 

 

PIXEDEN

 

 

GRAPHICBURGER

 

 

ICONSEEKER

 

 

DEVIANTART

 

 

AGILEDESIGNERS

 

 

MR. ICONS

 

 

ICONPOT

 

11 лучших сайтов для получения бесплатных иконок — Gist

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

1. ICONMNSTR

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

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

2. FLATICON

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

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

3. DRYICONS

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

Лицензирование: Не забудьте проверить, подпадают ли значки под бесплатное, обычное или расширенное лицензионное соглашение.

4. MR.ICONS

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

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

5. ГРАФИЧЕСКИЙ БУРГЕР

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

Лицензирование: Бесплатные векторные иконки для любого количества личных и коммерческих проектов.

6. PIXEDEN

Pixeden Premium продается по цене 6 долларов в месяц, но у них есть страница, полная загружаемых иконок без лицензионных отчислений.Каждый бесплатный набор значков поставляется в формате PNG размером до 512 × 512 пикселей.

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

7. ICONFINDER

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

Лицензирование: Бесплатные векторные иконки для коммерческого или личного использования (при правильной фильтрации), но всегда не забывайте проверять каждый значок или набор значков.

8. ИКОНКА КАПИТАНА

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

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

9. ХОРОШИЕ МАТЕРИАЛЫ, БЕЗ БУМАГИ

22+ бесплатных набора иконок, организованных в полезные темы без указания авторства.

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

10. БЕСПЛАТНАЯ ОШИБКА

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

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

11. DESIGNBEEP

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

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

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

Чтобы узнать больше, узнайте, как сайты бесплатных стоковых фотографий могут улучшить ваш контент-маркетинг:

THAT SOCIAL AGENCY

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

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

Свяжитесь с [email protected], если хотите поболтать!

Первоначально опубликовано на www.thatsocialagency.com .

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

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

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

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

Эти значки, доступные бесплатно на 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. Они предоставляют значки с более индивидуальным ощущением ручной работы, что лучше подходит для некоторых предприятий. На сайте представлены как бесплатные, так и платные наборы иконок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 сайтов для поиска бесплатных иконок

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

Взгляните на пример того, как мы использовали значки на нашем веб-сайте:

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

Iconmonstr

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

Iconfinder

Iconfinder содержит более 600 000 значков. Итак, вы обязательно найдете здесь то, что ищете. Однако, чтобы получить доступ к полной библиотеке, вам нужно будет оформить премиум-членство. Вы также можете скачать премиум-иконки по меню.

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

DryIcons

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

FlatIcon

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

Icon8

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

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

Получите отличные иконки для своего веб-сайта

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

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

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

Флатикон

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.

11 отличных мест для загрузки бесплатных иконок

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

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

Без лишних слов, давайте прямо сейчас!

1. Пакет значков Elegant Themes

Во-первых, мы хотели упомянуть наш собственный набор иконок Elegant Themes. Он включает 74 иконки в формате PNG, каждая из которых имеет размер 48 х 48 пикселей.

Эти значки имеют двойную лицензию под Стандартной общественной лицензией (GPL) и лицензией MIT. Они на 100% бесплатны для использования, распространения, перепродажи или иного включения в ваш следующий проект. Нет ограничений!

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

2. ThemeIsle

ThemeIsle — это разработчик тем и плагинов WordPress, у которого также есть набор из более чем 100 бесплатных иконок, которые вы можете скачать прямо с его веб-сайта. Все символы представлены в форматах AI, EPS, PNG и SVG. Они также должны быть совместимы с любыми популярными инструментами дизайна или программным обеспечением, которое вы используете.

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

3. Иконки8

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

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

4. Flaticon

Flaticon может похвастаться более чем 3,5 миллионами иконок, многие из которых бесплатны. Они бывают разных стилей и доступны в нескольких форматах, включая PNG и SVG.

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

5. Canva

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

Если вы ищете пакеты значков, которые можно загрузить и использовать на своем сайте WordPress, это может оказаться не самым полезным вариантом. Тем не менее, он пригодится для создания инфографики и другого визуального контента.

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

6. iconmonstr

Iconmonstr предлагает (относительно) скромный выбор черно-белых иконок. Существуют сотни «коллекций», которые вы можете скачать в виде файлов PNG, SVG, EPS или PSD. Кроме того, вы можете приобрести более 300 значков в качестве шрифта Iconic Font, который может быть более эффективным вариантом в зависимости от ваших целей дизайна.

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

7. Фонтелло

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

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

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

8.

Freepik

Freepik — это платформа цифровых активов, стоящая за Flaticon. Он также имеет собственную бесплатную библиотеку иконок, а также векторную графику и стоковые фотографии, доступные для загрузки.

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

9. Проект существительного

Создатели проекта из более чем 120 стран мира The Noun Project представляют собой разнообразную коллекцию иконок и стоковых фотографий. Он предлагает бесплатные загрузки в форматах PNG и SVG, и вы можете использовать их по своему усмотрению с соответствующей атрибуцией.

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

10. GraphicBurger

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

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

11. IcoMoon

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

Вы можете загружать значки IcoMoon в форматах PNG, SVG, EPS, PSD или Ai. Если вы планируете использовать их с WordPress, вам придется использовать веб-приложение IcoMoon.К счастью, его не так уж сложно настроить и хорошо интегрировать с Divi.

Заключение

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

Конечно, мы неравнодушны к нашему собственному набору иконок Elegant Themes, а также к нашим иконкам Divi. Тем не менее, если есть еще больше возможностей, стоит попробовать IcoMoon, Flaticon и даже Canva.

У вас есть вопросы по иконкам или где их скачать? Дайте нам знать в комментариях ниже!

Изображение статьи предоставлено Invisible Studio / Shutterstock.com

бесплатных иконок для использования на вашем веб-сайте (и советы по их использованию)

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

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

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

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

Как использование значков может сделать ваш сайт уникальным

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

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

Иконки и взаимодействие с пользователем

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

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

Создание уникальных значков — плюсы и минусы

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

Плюсы:

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

Вот несколько минусов, которые следует учитывать:

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

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

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

Список сайтов и ресурсов

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

1. Freepik — это сайт с огромной базой бесплатных значков, от простых черно-белых до красивых цветных значков. Ссылка обязательна.
2. IconMonstr — отличный ресурс для черно-белых иконок, которые вы можете скачать в разных форматах.
3. FindIcons — еще один отличный источник, который позволяет вам искать по цвету, цвету фона и стилю, чтобы найти именно то, что вам нужно.
4. В Smashing Magazine есть много высококачественных значков в различных форматах, и большинство из них не требует указания авторства или обратной ссылки.
5. Behance предлагает уникальные и интересные иконки от художников и дизайнеров. Все они бесплатны, но функция поиска могла бы быть немного удобнее.

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

Как оценить значки на предмет удобства использования

Значок может вам понравиться, но как вы можете быть уверены, что он будет работать на вашем сайте? Вот несколько моментов, на которые следует обратить внимание:

  • Очевидно ли, для чего предназначен значок?
  • Соответствуют ли цвет и стиль значка дизайну вашего сайта?
  • Имеется ли значок в формате, который вы можете использовать?

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

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

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

Сопоставление значков с функциями

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

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

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

Советы по установке значков

Установка значков на ваш сайт — довольно простой процесс, но вот несколько советов, которые помогут вам сделать это правильно с первого раза.

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

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

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

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

Как узнать, не работает ли значок

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

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

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

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

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

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: 1500000+ иконок и элементов дизайна



СКАЧАТЬ

1. Капитан Икона

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

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

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

2. Octicons

GitHub недавно открыл собственный пакет значков под названием Octicons. Этот бесплатный набор значков в настоящее время находится в версии 5.0 и включает в себя десятки значков с некоторыми основными символами.

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

Если вам нужен простой и легкий иконочный шрифт, Octicons вас не подведет.

3. Типиконы

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

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

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

4. Zondicons

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

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

Я рекомендую этот шрифт, если вам нравится более простой дизайн. Это значительно упрощает использование значков, но они также могут вписаться в сайт в более «общем» стиле.

5. Entypo

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

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

Entypo поставляется с более чем 400 значками и великолепной лицензией CC sharealike. Чтобы узнать больше об установке и настройке значков, вы должны прочитать страницу часто задаваемых вопросов и посетить основной репозиторий GitHub.

6. MFG Labs

Один из новых шрифтов в этом списке от MFG Labs со своим собственным набором значков.Это совершенно бесплатно и размещено на GitHub для всеобщего доступа.

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

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

7. Иониконы

Разработчикам

Native нравится Ionic Framework, и это один из самых популярных вариантов для мобильных приложений.Команда Ionic решила выпустить свои значки в виде веб-шрифта под названием Ionicons.

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

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

8. Font Awesome

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

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

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

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

9. Значки материального дизайна

Материальный дизайн Google привнес новый подход к UI / UX в Интернете. Это привело к появлению множества новых фреймворков и ресурсов, включая этот шрифт значка материального дизайна.

Эти значки материалов совершенно бесплатны и доступны на GitHub. Этот набор значков абсолютно массивен: более 1000 значков , охватывающих широкий спектр функций интерфейса.

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

10. Девиконс

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

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

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

Завершение

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

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

.

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

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