Шрифтовые иконки для сайта: 25+ бесплатных иконических шрифтов (Icon Fonts) для дизайна вашего WordPress сайта

Содержание

Шрифтовые иконки — достойная альтернатива растру

Чем иконочный шрифт лучше иконок jpg/png

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

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

Как подключить иконочный шрифт fontawesome

Где брать иконочные шрифты? Поиск выдаст кучу результатов разной степени платности и универсальности. Рассмотрим два fontello.com и fontawesome.ru

Начнём с бесплатного шрифта с хорошим описанием на русском — fontawesome.ru. Первым делом качаешь и распаковываешь архив.

Копируешь папку font-awesome в папку с сайтом. Дальше нужно подключить… Думаешь шрифт? Нет. Подключаеш css файл font-awesome.min.css добавив в <head>

<link rel="stylesheet" href="путь/до/font-awesome/css/font-awesome.min.css">

Иконки fontawesome вставляются следующим образом. Там где должна быть иконка вставляешь строчный элемент, например <i> или <span> и добавляешь к нему класс fa и соответствующий иконке класс. Проще сделать следующим образом. На сайте fontawesome.ru переходишь в меню Иконки и кликаешь по нужной иконке. Попадаешь на страницу где можно скопировать код, который нужно разместить там, где будет иконка. Так выглядит код для Телеграм.

 
<i aria-hidden="true"></i>

Просто выводом иконок дело не ограничивается. Добавляя классы можно анимировать, изменять размер, поворачивать иконки. Полный список возможностей с подробным описанием и примерами смотри на fontawesome.ru/examples/ .

Ещё один сайт где можно на халяву хапнуть шрифтовых иконок — fontello.com. Он отличается от fontawesome.ru тем, что можно создать свой набор иконок, а не тянуть все, большая часть которых не пригодиться. Чтобы создать свой набор заходишь на fontello.com. На вкладке Select Icons кликаеш по нужным иконкам. Рядом с красной кнопкой Download пишешь название шрифта и скачиваешь свой иконочный шрифт.

Иконки с fontello вставляются также через добавление класса к строковому элементу. Название классов смотри в файле demo.html(должен быть в скачанном архиве с шрифтом). Дефолтные названия классов можно изменить на вкладке Customize Names.

10 вариантов шрифтовых иконок для сайтов

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

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

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

И так начнем ознакомление со всей подборкой:

Font Awesome

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

Iconic

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

Foundicons

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

The Noun Project

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

IcoMoon

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

Sosa

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

Social Media Icons Pack

Social Media Icons Pack — Изначально они разрабатывались под социальные проекты, где вы найдете все что связано социальными сайтами. Это иконки всех знаков, которые есть на интернет площадках. Если решили разместить социальные кнопки на своей портале, то вам безусловно нужно здесь брать кнопочки, так как они заточены только под это направление.

Raphael Icon-Set

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

Typicons

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

MFG Labs

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

Важно знать: Как можно объединить иконки их в один шрифт.

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

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

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

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

Каждый набор иконок полностью совместим с SVG векторами и форматами webfont и отлично подойдёт для включения в ваши таблицы стилей, и непосредственно в веб-страницы.

1. Font Awesome

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

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

2. Material Design Icons

С появлением концепции материального дизайна от Google, в web кардинально изменился подход к UI/UX, что привело к появлению множества новых фреймворков и ресурсов, в том числе и огромной библиотеки иконочных шрифтов в материальном дизайне.
Набор иконок полностью бесплатный и доступен для скачивания на GitHub. Этот пакет довольно массивный, содержит более 1000+ иконок, охватывающих широкий спектр функций интерфейса.
Поскольку исходный код открытый, вы можете использовать его в любых проектах без ограничений, а так же настраивать иконки, если это необходимо. Идеально подходит для тех, кто плотно работает с основными правилами материального дизайна Google в web.

3. Captain Icon

Captain Icon, иконочный шрифт созданный дизайнером Марио дель Валле, для меня является фаворитом в числе веб-шрифтов. Это совершенно бесплатный проект с открытым исходным кодом, размещенный на GitHub, упакованный векторными файлами и веб-шрифтами. Что мне больше всего нравится в этом пакете иконок, — это оригинальный стиль. Каждая иконка имеет уникальный дизайн, и все они нарисованы, что называется с чистого листа, что ставит этот набор намного выше других более общих пакетов иконок. Но я не думаю, что Captain Icon одинаково хорошо подойдёт для каждого проекта. Как мне кажется, эти иконки лучше всего использовать на творческих сайтах, где рисованный стиль соответствует общему художественному дизайну.

4. Typicons

Набор Typicons, иконки с закругленными углами и простыми контурами, идеально подойдёт для любого сайта. Пакет включает в себя 330 + уникальных иконок с оригинальным стилем.
Пакет полностью бесплатный и также доступен на GitHub. Скачав иконки, вы можете добавлять их непосредственно на ваш сайт и редактировать по мере необходимости.
Мало кто знает о Typicons, но это один из лучших доступных наборов шрифт-иконок, который может даже работать на iOS с небольшими корректировками и специальными фрагментами кода.

5. Octicons

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

6. Zondicons

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

Хотя на странице с иконками и указана дата последнего обновления: 19 Марта 2017.

7. Entypo

Семейство шрифт-иконок Entypo существует уже несколько лет. Эти иконки превосходны и уверенно занимают верхние позиции среди бесплатных продуктов данной тематики. Новые иконки добавляются от не постоянно, но довольно часто, я бы сказал от случая к случаю, и находятся в открытом доступе. Шрифты разделены на две части: основной пакет и социальный пакет. Поэтому, если вам не нужны иконки для социальных сетей, вы можете немного уменьшить размер пакета. Entypo представлен с более чем 400 иконками в наборе. Чтобы узнать больше об установке и настройке иконок, прочитайте ответы на часто задаваемые вопросы FAQ (если шарите в буржуинском), ну, и конечно же посетите репозиторий проекта на GitHub.

8. Devicons

Пакет Devicons — это один из новых веб-шрифтов с акцентом на технологические логотипы и брендинг. Уже сейчас вы можете смело его использовать на своих проектах.
Эти иконки представлены в виде логотипов, как крупных технических игроков веб-пространства, таких как Google, так и более новых логотипов CMS, например, таких как Ghost. Скорее всего, такой набор будет полезен только для сайтов, которые широко используют логотипы, например, различные рейтинговые каталоги и т.п. Большинству разработчиков достаточно будет лишь отдельные иконки из этого пакета.

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

9. Ionicons

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

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

10. MFG Labs

Ещё один из новых шрифтов в этом списке, принадлежит MFG Labs с собственным набором иконок. Набор полностью бесплатный и размещен на GitHub в свободном доступе.
Каждая иконка представлена с упакованными стандартными форматами webfont, использующими Unicode PUAs в CSS. Полностью семантический код с поддержкой во всех браузерах, что уменьшает вероятность конфликта с другим кодом CSS.
Посмотрите, иконки MFG Labs имеют свой уникальный стиль, который выделяется из общего ряда. Рекомендую этот набор иконок, для любого типа веб-сайтов, коммерческих, персональных блогов и других.

Заключение

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

С Уважением, Андрей .

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

Как создать набор иконок в формате шрифта

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

Преимущества и недостатки иконочных шрифтов

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

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon. io/app/.
Ввести название проекта (значок «Manage Projects»).
Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «. icon».
Нажать на кнопку «Download».

Работа в сервисе IcoMoon — Выбор иконок (шаг 1)Работа в сервисе IcoMoon — Указание названий значкам (шаг 2)Работа в сервисе IcoMoon — Установки для генерации шрифта

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

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

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».


<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.


<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

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

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

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

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

Создание иконки «Twitter» в Inkscape

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Сборка шрифта из созданных иконок в IcoMoon

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):


<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.

8 наборов шрифтовых социальных иконок / Иконки / Постовой

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

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

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

1. RONDO SOCIAL ICON FONT

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

2. Fontello — icon fonts generator

Генератор иконок, с огромным набором уже готовых иконок.

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

3. Mono Social Icons Font

Идеальное решение для быстрой интеграции шрифтовых иконок в проект, уже имеется код для вставки на CSS, SCSS и пример HTML. Единственный недостаток отсутствие популярных русских социальных сетей.

4. Pixeden — Social Icon Pack

Хорошие иконки с мощной демонстрационной страницей, можно видеть всю прелесть использования шрифтовых иконок и их стилизацию средствами CSS

5. Pictonic

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

6. Social Media Icons Pack

Пакет из 74 шрифтовых иконок

7. Socicon — the social icons font

Шрифт социальных иконок сделанный во Франции

8.

JustVector Icons Font

Шрифтовые иконки Simple Line Icons

Всем привет. Шрифтовые иконки постепенно начинают вытеснять обычные сборки иконок в растровой графике (png, jpg и так далее). Популярность Font Awesome в создании интерфейса сайта врядли кто-то будет оспаривать. Но у этого шрифтового архива иконок также есть достаточно много неплохих аналогов.

Хочу Вас познакомить с шрифтовыми иконками Simple Line Icons. В сборке 180 иконок, как классических: юзер, стрелочка вправо, влево, телефон и так далее; так и оригинальных: кошелек, ракета, кубок. Для создания интерфейса на сайте, Вам этих иконок хватит с лихвой.

Подключение иконок

1. Сперва нужно скачать архив и его разархивировать

2. Теперь нужно залить необходимые файлы на сайт, а именно:

Css файл simple-line-icons. css из папки css в вашу папку css (скорее всего эта папка у вас уже есть, там лежат все ваши стили, если нет, то создайте ее)
Папку fonts в корень сайта

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

Делается это очень просто. Нужно в блок <head> (там где подключаются у Вас все css и js файлы) вставить код подключения css файла:


<link rel="stylesheet" href="css/simple-line-icons.css">

Не забудьте, что этот файл должен быть подключен везде, где у Вас будут стоять иконки Simple Line Icons.

4. Теперь осталось только вставить необходимые иконки

Это делается следующим образом: в том месте, где вы хотите видеть иконку, Вам нужно вставить код:


<span></span>

например если мы поставим


<span></span>

то у нас выйдет такая иконка

А вот код иконки с текстом


<span></span> имя юзера

И выглядит он так:

Не забывайте, что это шрифт и с иконкой нужно работать как с шрифтом, выставлять font-size, font-weight, line-height и так далее

Имя иконки соответствует изображению в «Демо». Если Вам понравились эти иконки, то страницу «Демо» в закладки, будет как шпаргалка. У меня всё! Добро!

Помогла статья? Угости чашечкой кофе =)

Веб-шрифты, шрифтовые иконки и спецсимволы

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

fontawesome.com — Font Awesome 5. Более 1500 бесплатных иконок, подключение через CDN, также есть возможность скачать файлы шрифта на диск

fontawesome.ru — Font Awesome иконочный шрифт и CSS-инструментарий

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

icomoon.io — Большой набор качественных SVG-иконок, на сайте можно создать свой набор и иконок конвертировать набор в иконочный шрифт, шрифт можно скачать или подключbть в проекте с помощью URL

iconify. design — Этот сервис позволяет подключить к проекту иконки из множества наборов с помощью одного скрипта и используя один синтаксис. Iconify включает более 40 000 иконок из популярных шрифтов и наборов смайликов: Font Awesome 4 и 5, Material Design Icons, IonIcons, Vaadin Icons, Entypo + и многие другие

material.io/resources/icons — Большая коллекция красивых иконок от Google для веб-проектов и приложений Android, iOS. Иконочный шрифт подключается с помощью URL или можно скачать шрифт и подключать локально, также можно скачать SVG и PNG версии иконок

hostenko.com — В этом посте мы отобрали 27 бесплатных наборов шрифтовых иконок. Просто переходите по ссылке понравившегося набора, загружайте и добавляйте на свой сайт WordPress

Веб-шрифты

fonts.google.com — Генератор веб-шрифтов Google

fontstorage.com — Скачать бесплатно шрифты для сайта, фотошопа, Windows или Mac OS

Спецсимволы

html5book.ru — Спецсимволы HTML (символы-мнемоники) — стрелки, смайлики, крестики, галочки, звезды, математические символы и многое другое

htmlbook. ru — Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В таблице приведены некоторые популярные спецсимволы

unicode-table.com — Сервис поиска символов в формате Юникод (Unicode)

Калькулятор для конвертации HTML-кода в CSS-код для использования в свойстве content (content:’260E’)

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, которую можно использовать для сокращения времени загрузки.

Завершение

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

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

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

Хотя шрифты Icon очень популярны, у них есть свои подводные камни. Ян Фезер рассказал о причинах перехода с иконочного шрифта на SVG, а CSS Tricks изложил некоторые соображения при выборе между иконочной системой шрифтов или SVG.Оба явно отдают предпочтение SVG. В качестве контраргумента Pictonic сказал, что шрифты иконок на 10% быстрее, чем SVG. Это как раз то, что вам следует учесть, прежде чем использовать иконочные шрифты.

Чтобы ваши значки всегда загружались правильно и имели надежные резервные копии для браузеров, которые не поддерживают @fontface , вам следует ознакомиться с рекомендациями, изложенными в Filament Group , Bulletproof Accessible Icon Fonts.

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

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

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

Перестаньте беспокоиться о том, чтобы ваши значки работали с форматированием текста. Этот набор значков с открытым исходным кодом включает более 230 практических и технических значков в различных форматах; из SVG в WOFF. Вы можете легко изменить их размер в соответствии с вашими потребностями с помощью CSS, и они отлично читаются даже при 8 пикселях.

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

Ionicons — это полноценный набор иконок для Ionic framework. Вы получите множество значков приложений (уведомления, стрелки, еда и т. Д.), А также значки с логотипами известных брендов (например, Pinterest). В зависимости от ваших потребностей вы можете загрузить контурные, заполненные и / или четкие изображения значков в виде файлов SVG и веб-шрифтов.

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

Font Awesome — массивный и очень популярный набор иконок. Они предлагают более 1600 бесплатных иконок, каждая из которых была тщательно разработана, чтобы продемонстрировать удобство и простоту использования. В галерее FA вы найдете все: от логотипов AWS и других брендов до значков бизнеса и стиля жизни.

Шрифты

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

Добавьте современные значки линий в свои материалы в одну строку кода с помощью Line Awesome. Он улучшает предложение Font Awesome и позволяет добавлять на ваш сайт всевозможные значки (от специальных возможностей и создания до стрелок и значков брендов) (через CDN), прототипы Figma и многое другое.

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

Dashicons — это иконочный шрифт для WordPress. Если вы хотите подражать фирменному стилю WP в других проектах, вам это понравится. Он очень техничный по стилю, но он передает суть и прост в использовании.От логотипов брендов до TinyMCE — разгуляйтесь!

Этот набор линейных значков поставляется в двух форматах: легко редактируемые векторные изображения, которые можно настроить в Adobe Illustrator, и веб-шрифт с функцией plug-and-play. Вы получите 130 минималистичных тонких иконок для работы; от значков сообщений до символов камеры и микрофона, как в Microsoft Windows 10.

Remix Icon — это библиотека значков с открытым исходным кодом, содержащая более 2200 значков. Все значки бесплатны как для личного, так и для коммерческого использования. Вы увидите множество значков; от тонких контурных иконок до закрашенных символов для дополнительного акцента. Получите их как PNG, SVG или код.

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

Вдохновленные Apple iOS, иконки Themify предлагают более 300 красивых и минималистичных иконок.От стрелок до значков приложений вы получите все необходимое в виде шрифта значков для упрощения интеграции рабочего процесса (включая SVG) или плагина для WordPress. Иконки Themify идеально подходят для современного дизайна пользовательского интерфейса!

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

Если вам нравится эстетика GitHub, вам понравятся их Octicons.Эти значки доступны в двух размерах (16 пикселей и 24 пикселей), и они также включают некоторые специальные значки, такие как запросы на вытягивание. Вы можете переключаться между контурными и заполненными значками. Они отлично работают с разными языками программирования.

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

Devicons — это иконочный шрифт, созданный специально для разработчиков и самых разных проектов. Шрифт содержит 85 значков, в основном логотипы брендов для таких сервисов, как Dropbox, и платформ программирования, таких как PostgreSQL. Devicons можно интегрировать, добавив одну строку кода в HTML-заголовок проекта.

Красивый, элегантный и привлекательный — этот иконочный шрифт содержит более 300 разнообразных иконок. Их просто интегрировать и использовать, особенно если в прошлом вы использовали Elegant Themes или конструктор Divi.В этом наборе вы найдете все, от значков файлов до стрелок.

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

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

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

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

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

Иконки

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

Прямо из мастерской Pixeden, Stroke 7 представляет собой набор тонких иконок. Набор предлагает 200+ иконок, которые можно настроить с помощью CSS. Они были вдохновлены иконами начала 00, поэтому они не будут выделяться и отвлекать внимание от вашего основного сообщения.

Петрас Наргела разработал набор из 80 штриховых иконок, и это бесплатно. Эти красивые иконки свежие, чистые и готовы оживить ваш дизайн. Вы можете скачать их как файлы PSD, AI или веб-шрифтов. Если вам нужно что-то другое, вы это нашли!

Созданный Google набор значков Material Design содержит множество значков, которые вы можете использовать в своих проектах. Вам просто нужно добавить одну строчку кода на свой сайт, и все готово! Поскольку участники сообщества постоянно добавляют свои собственные значки, существует множество вариантов.

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

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

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

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

Набор значков

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

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

Devicons — это дружественные, удобные для разработчиков значки, созданные для представления инструментов программирования и разработки. От Chrome и Confluence до Django и Adobe Illustrator вы найдете значок, который так долго искали. Вы можете легко скопировать и вставить их в свои проекты, используя либо версии шрифтов, либо версии SVG.

Простые и чистые, эти мини-иконки идеально подходят для самых разных проектов, особенно более формальных по тону.Эта коллекция значков содержит 80 точно созданных значков как в формате PSD, так и в формате значков. От символов загрузки / выгрузки до значков местоположения и погоды — этот набор предлагает все, что вам нужно!

Набор иконок Тараса Шипки «Гелий» предлагает множество иконок. Они бывают не только во всех мыслимых форматах, но и в качестве значков. Вы получите 112 значков с тонкими штриховыми линиями, которые добавляют блеск. Гелий определенно выбор эстетов!

Набор Gonzocons, разработанный Яном Райторалом, предлагает 100 линейных иконок, которые идеально воспроизводят современные тенденции дизайна иконок.От упрощенных стрелок до жизнерадостных сердец и песочных часов — иконы Gonzocons определенно обладают индивидуальностью. Вы можете получить их как файлы SVG или как веб-шрифт для упрощения интеграции с вашим приложением / сайтом.

Map Icons — это шрифт значков, созданный для Google Maps and Places. Вы можете легко настроить значки с помощью CSS и выбрать из более чем 175 значков. От общих значков для парикмахерских до значков для мероприятий — в этом наборе есть из чего выбрать, чтобы сделать ваш следующий проект потрясающим.

Простой и увлекательный набор из 150 обведенных значков.Вы можете получить их в виде файлов PSD, AI, SVG или веб-шрифтов. Иконки Дарио Феррандо вдохновлены современным дизайном веб-иконок, но у них много индивидуальности, чтобы выделить ваш следующий проект и поразить аудиторию.

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

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

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

Получите 40+ минималистичных и дружелюбных иконок погоды с Meteocons.Этот набор предлагает все мыслимые форматы; от SVG до настольных и веб-шрифтов. Их можно использовать как в личных, так и в коммерческих целях, и вы даже можете создать свой собственный шрифт с часто используемыми значками. Обновления иконок тоже бесплатны!

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

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

Увлекательные и динамичные, Mono Social — это иконы социальных сетей с забавным характером. Вы можете использовать их бесплатно и выбрать один из 3 вариантов презентации (закругленный, круговой, обычный) в соответствии с вашим стилем.Используйте athem с CSS, HTML и SCSS. Они бесплатны для личного и коммерческого использования.

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

7 потрясающих шрифтов с иконками для веб-дизайнеров

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

Для тех, кто не в курсе, вы можете думать о иконочном шрифте как о взрослой версии дингбатов… с реальным вариантом использования. Основная идея состоит в том, чтобы взять набор значков или пиктограмм, которые обычно были бы реализованы в виде файла изображения или вектора, а затем преобразовать его в шрифт. По словам Пиктоника, для этого есть много причин, поскольку шрифт значка может загружаться на 14% быстрее, чем изображения, и может быть на 90% меньше, чем файлы SVG.

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

Font Awesome — это иконочный шрифт, который был разработан для идеальной работы с Twitter Bootstrap. Выше вы можете увидеть шрифт, используемый для кнопок, навигации и т. Д.

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

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

Еще один набор хорошо сделанных, чистых иконок для использования Webfont.

Созданный замечательными ребятами из ZURB, Foundation Icon Fonts 2 соответствует адаптивной структуре Foundation 2, но может использоваться и отдельно.

Хорошо поддерживаемая и постоянно растущая коллекция из 2300+ иконок, 230 из которых бесплатны.

Pictos — это впечатляющий набор значков, которые вы можете разместить и встроить самостоятельно с помощью CSS @ font-face (например, шрифты значков выше), или вы можете воспользоваться преимуществами Pictos Server, доступного по подписке.

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

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

Изображение предоставлено AFP / Getty Images

Читать далее: Твиттер собирается убить Posterous? Срок действия SSL-сертификата истек, обещанная функция экспорта по-прежнему MIA

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

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

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

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

Плюсы использования иконок в следующем UX-дизайн-проекте

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

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

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

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

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

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

Флатикон

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

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

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

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

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

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

Jam Icons

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

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

Пакет значков Fontisto

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

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

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

Набор иконок из Icons8 включает более 120000 иконок, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей. Значки созданы для имитации внешнего вида конкретной операционной системы. Вы можете скачать их в версиях для 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.

Иониконы

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

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

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

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

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

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

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

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

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

Использование шрифтов Awesome Icons на вашем веб-сайте

Подпишитесь на нашу рассылку новостей.

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

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

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

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

Шаг 1. Добавьте необходимые включения на свою веб-страницу

Для начала вам нужно убедиться, что на ваш сайт включены следующие ресурсы Font Awesome. Никаких загрузок или сложных скриптов не требуется — всего одна ссылка на Font Awesome CSS поможет вам начать.

Шаг 2 — Добавьте выбранный значок

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

Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки.Чтобы использовать разные значки, просто найдите соответствующий класс CSS.

Шаг 3. Используйте встроенные настройки

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

Шаг 4 — Добавьте любые уникальные настройки

Поскольку эти значки полностью основаны на CSS, вы можете добавлять свои собственные стили и классы, чтобы полностью заставить значок работать в вашем проекте веб-дизайна.Например, вы можете сделать значок «Фильм» красным.

Выполнив описанные выше шаги, вы получите прочную основу, чтобы начать встраивать значки в свой веб-сайт. Обязательно используйте значки только там, где это имеет смысл. Как и в случае с другими визуальными элементами, чрезмерное использование нарушает намеченную цель и может отвлекать от дизайна вашего сайта.
Как обнаружили многие другие, мы здесь, в Solodev, добились большого успеха, используя иконки для дополнения или дизайна и создания удивительных веб-сайтов.
20+ лучших бесплатных наборов шрифтов и ресурсов для проектов веб-дизайна
Бесплатные значки и ресурсы являются основными компонентами дизайна пользовательского интерфейса и важными частями ваших веб-проектов. Но процесс создания символов и иконок для индивидуальных проектов настолько утомителен и отнимает много времени. Поиск и выбор иконок на тысячах бесплатных сайтов с иконками также убивают наше драгоценное время. Широкая загрузка изображений или фотографий может увеличить время загрузки Интернета. Что касается начинающего дизайнера, вам нужно запастись репрезентацией, стоковыми фотографиями и шрифтами, чтобы быстро справляться со своими задачами.Список бесплатных наборов иконок и ресурсов может показаться бесконечным. Но чтобы облегчить вашу задачу, мы выбрали на этой странице потрясающий выбор бесплатных пакетов значков шрифтов и ресурсов.
Мы охватываем несколько из лучших бесплатных пакетов шрифтов SVG, PNG, PSD и JPG, а также веб-сайтов с ресурсами, готовых к использованию с любыми проектами веб-дизайна и графического дизайна .
Здесь мы опубликовали статью о Использование иконочных шрифтов с Bootstrap , проверьте это!
LineIcons — 450+ бесплатных простых линейных иконок
Если вы ищете простой, красивый и бесплатный, но полный набор иконок для проекта дизайна или разработки, LineIcons — лучший вариант прямо сейчас. Он поставляется с более чем 450 значками со всеми необходимыми функциями, такими как — WebFont, файлы SVG, бесплатный CDN, четкая документация и многое другое. Основная цель LineIcons — предоставить простые и легко читаемые значки без всякого мусора (поскольку он поставляется только с основными значками). Это очень легкий и минимальный набор значков, который вы можете использовать в любом проекте / разработке веб-сайтов или приложений.
Скачать и демо

Font Awesome — иконический шрифт и набор инструментов CSS
Font Awesome — один из популярных, лучших и требовательных пакетов значков для веб-дизайнеров.Это пакет значков, который идеально подходит для работы с Twitter Bootstrap. Он дает вам адаптируемые векторные символы, которые можно изменять под любым углом, таким как цвет, размер, тень и т. Д. С помощью CSS.

Icons8 — 36,300 Бесплатные плоские иконки
Icons8 — это отличный набор шрифтов Icon для дизайнеров. После загрузки пакет хранит все значки иконок Icons8 на жестком диске, и они доступны в любом размере, формате и цвете.Иконки работают в Sketch, Photoshop, Xcode и т. Д., И вы можете перекрашивать их по своему усмотрению.

IcoMoon — решения для пиктограмм Pixel Perfect
IcoMoon — один из лучших инструментов для иконографии и управления иконками для перфекционистов. Это дает вам возможность собирать и использовать свои собственные значки в различных форматах, таких как Polymer, SVG, XAML, PDF, CSH, шрифт значков или простые спрайты PNG / CSS и т. Д., А также обеспечивает доступ к нескольким пакетам значков.

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

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

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

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

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

Streamline Icons — 5 000 иконок для приложений, веб-сайтов, iPhone и Android
Streamline Icons — еще один приятный и легко адаптируемый бесплатный набор иконок на веб-рынке. Инструмент разделен на 97 категорий с 5 000 векторных иконок. Вы можете использовать все значки для создания отличного веб-сайта, приложений для iPhone и Android. Он будет следовать правилам Apple iOS 10 для их использования на панелях вкладок и панелей инструментов iPhone.

Linearicons — ультра четкие линейные значки с целостностью
Linearicons — один из лучших пакетов значков в Интернете. Наборы иконок Linearicons изготавливаются вручную и тестируются как на обычных, так и на PPI-экранах.Иконки бывают в нескольких различных конфигурациях как в векторных, так и в растровых, таких как SVG, EPS, PNG, ASH, AI и т. Д. Пакет включает в себя шрифт, который вы можете ввести и использовать в любых приложениях с настраиваемым устройством содержимого.

Linea — еще один хорошо известный набор бесплатных иконок, который включает более 730 иконок. Эти значки разделены на шесть категорий: стрелки, основные значки, значки погоды, музыки, программного обеспечения и электронной коммерции. Эти значки доступны в виде файлов SVG, 64 × 64 PNG и могут бесплатно использоваться в коммерческих задачах.

Иконки Themify Themify
Во всех пакетах значков Themify — один из лучших бесплатных пакетов значков. Это полный и идеальный набор иконок для веб-дизайнера и разработчика. Он предоставляет 320+ пиктограмм, созданных вручную, которые вдохновляют Apple iOS 7. Инструмент на 100% бесплатный для людей, и они могут использовать его для личного и коммерческого использования.

The Elegant Icon Font — 360 лучших бесплатных иконок для современного Интернета
Элегантные иконки шрифтов — одна из лучших бесплатных иконок для современного веб-дизайнера и разработчика.Это законченные, красивые, элегантные, созданные вручную и векторные иконки в Интернете. Значки были улучшены с точностью до пикселя до 16 пикселей и кратными 16 пикселям.

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

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

Бесплатный набор иконок UXPin — более 80 красивых иконок бесплатно
UXPin — это бесплатный набор иконок, который особенно идеально подходит для эффективного и быстрого создания прототипов пользовательского интерфейса. Это приложение для создания макетов, включающее более 80 красивых бесплатных иконок. Они предназначены для Интернета и портативного пользовательского интерфейса.

Freepik — Графические ресурсы для всех
Freepik зарекомендовал себя как одна из лучших ведущих поисковых систем с бесплатными векторными изображениями. Инструмент создан, чтобы помочь дизайнеру найти бесплатные иллюстрации, значки, векторы, PSD и фотографии. Пользователь может загрузить инструмент в формате EPS, AI и SVG.

Современные значки пользовательского интерфейса — 1256 значков
Современные значки пользовательского интерфейса — еще один превосходный бесплатный инструмент для приложений Windows, Android или iOS.Пользователь может получить 1000 созданных вручную значков, включая значки панели приложений и окна. Так что, если вы ищете такой умный ресурс для своих окон, скачайте пакет и пользуйтесь.
Tonicons- Готовый бесплатный шрифт CSS для веб-дизайнеров и разработчиков
Tonicons — это бесплатный шрифт, который отлично работает и содержит 300 значков контуров. Разработчики и веб-дизайнер назвали его «FontTonicons». Шрифт прост в использовании, он найдет значки EPS10, SVG, PNG.Вы можете использовать значки для своих профессиональных и личных задач.
Dripicons — полностью бесплатный векторный шрифт с линейными иконками (95 иконок)
Dripicons — полезный и надежный бесплатный набор иконок. Он доступен в форматах AI, PSD, EPS, SVG, PDF, эскизов и содержит 200 бесплатных иконок. Dripicons запланирован и выпущен Амитом Джакху.
Помимо этих наборов значков, в Интернете есть тысячи пакетов значков. Вы можете использовать любой из них для своей личной или клиентской работы.Если вам известны какие-либо другие лучшие или лучшие варианты бесплатных пакетов значков шрифтов, оставьте ответ и дайте нам знать. Если статья отвечает вашим запросам о пакетах значков шрифтов, добавьте страницу в закладки и посетите нас снова.
Вам также может понравиться
15+ лучших иконочных шрифтов для веб-дизайна и дизайна пользовательского интерфейса (бесплатно + премиум)
Иконочные шрифты — один из самых полезных элементов, без которого веб-дизайнеры и дизайнеры пользовательского интерфейса просто не могут жить. Сегодня мы представляем вам коллекцию лучших современных и креативных шрифтов для иконок, которые вы можете использовать на своем веб-сайте и в дизайне пользовательского интерфейса.
С иконочными шрифтами вам не нужно полагаться на библиотеки файлов PNG. Вам не нужно изменять размер и редактировать значки с помощью векторных файлов, чтобы они соответствовали дизайну вашего веб-сайта. И, что более важно, вам не нужно беспокоиться об оптимизации значков для различных размеров экрана.
Однако найти правильный шрифт значков, который будет сочетаться с вашими дизайн-проектами, может быть непросто. Мы хотим упростить этот процесс. Начните с просмотра нашей тщательно подобранной коллекции бесплатных и премиальных шрифтов для значков (и обязательно ознакомьтесь с нашими советами по выбору шрифта для значков, которые помогут вам начать работу!)
Icofont — самый креативный шрифт для иконок, который вы можете загрузить и использовать совершенно бесплатно.Этот шрифт включает более 2100 значков в 30 различных категориях, таких как валюта, социальные сети, фирменные логотипы и т. Д. Одним из преимуществ использования этого пакета является то, что он доступен как в формате SVG, так и в виде значков.
Font Awesome — самый популярный в Интернете иконочный шрифт, содержащий более 7000 иконок. Его используют более 100 миллионов веб-сайтов, включая такие бренды, как McDonalds и Йельский университет. Он содержит множество полезных функций. Самостоятельный хостинг пакета значков — идеальный способ его использования, поскольку облачные планы имеют ограничения на использование.
Ionicons — еще один набор креативных иконок с минималистичным и простым дизайном. Этот иконочный шрифт разработан специально для разработки веб-и мобильных пользовательских интерфейсов и совместим с платформами iOS и Android. Всего в нем более 1100 иконок. Он под лицензией MIT с открытым исходным кодом
.
Это коллекция уникальных значков с современным минималистским дизайном. Он включает 150 различных значков, которые вы можете использовать в различных дизайнах электронной коммерции. Иконки доступны в форматах EPS, AI, SVG, а также в виде значков со шрифтами.
Этот набор включает смешанную коллекцию полезных значков, связанных с развлечениями, мультимедиа, онлайн-мероприятиями, образом жизни и т. Д. Пакет содержит в общей сложности 130 значков, которые вы можете использовать в качестве шрифта значков или редактировать и настраивать по своему усмотрению, используя векторные файлы EPS и AI.
Иконки погоды часто используются во многих различных типах веб-дизайна и дизайна пользовательского интерфейса, особенно в мобильных пользовательских интерфейсах. В этом пакете вы можете выбрать один из 42 уникальных значков погоды.Иконки доступны в форматах AI, PSD, SVG, а также в форматах иконок.
Подобно предыдущему набору значков шрифтов, этот пакет содержит набор минимальных линейных значков. Он также включает 32 стильных значка погоды в нескольких форматах, включая AI, SVG, EPS и шрифты значков. Благодаря чистому и простому дизайну эти значки подходят для любого делового и профессионального дизайна.
Fontisto — еще один отличный бесплатный иконочный шрифт с набором современных и стильных иконок в нескольких категориях.Значки полностью масштабируемы и отлично смотрятся на дисплеях Retina. Его также можно совершенно бесплатно использовать с коммерческими проектами.
Dripicons — это коллекция линейных иконок с гладким и минималистичным дизайном. Иконки имеют современные макеты, которые подходят как для веб-дизайна, так и для дизайна мобильного пользовательского интерфейса. Его также можно бесплатно использовать в коммерческих проектах.
Typicons поставляется с набором легких и простых значков, которые работают как в веб-интерфейсах, так и в пользовательских интерфейсах собственных приложений. Шрифт включает в себя более 330 уникальных дизайнов значков в нескольких категориях и с масштабируемым дизайном.
Если вы поклонник линейных значков, этот набор современных линейных значков идеально подходит для вас. В нем более 300 иконок. Значки доступны в форматах AI, SVG, PSD, а также включают версию шрифта значков для цифрового дизайна.
Этот премиальный значок шрифта содержит 100 уникальных значков, которые включают в себя всевозможные символы и рисунки, связанные с транспортом и путешествиями. Он также поставляется в нескольких форматах векторных файлов, а также в формате значков.
Набор из 200 уникальных иконок, созданных специально для образовательных проектов.Этот набор значков поставляется в форматах файлов EPS, AI и SVG. Версия шрифта значка также включена для веб-дизайна и дизайна мобильного пользовательского интерфейса.
Это огромный набор линейных значков с большим разнообразием дизайнов в нескольких категориях. Этот пакет идеально подходит для современного мобильного и веб-дизайна. Значки доступны в векторном формате и формате значков шрифта.
Captain Icon — это современный шрифт с более чем 350 уникальными дизайнами иконок. Иконки идеально подходят для создания как веб-, так и мобильных пользовательских интерфейсов.Иконки бывают разных форматов, включая EPS, SVG, PSD и версии шрифтов значков.
Devicon — это бесплатный значок шрифта с дизайном значков с заливкой. В пакете есть много полезных значков, особенно связанных с веб-разработкой и мобильной разработкой. Вы можете использовать облачную версию шрифта значка или самостоятельно размещать на своих серверах.
Entypo — бесплатный иконочный шрифт с минималистичным и чистым дизайном. Этот пакет включает более 400 иконок. Несмотря на то, что шрифт не обновлялся какое-то время, значки актуальны и сегодня.
Этот бесплатный шрифт иконок от Pixelden включает 200 уникальных иконок с тонкими линиями. Дизайн каждого значка вдохновлен iOS 7. Этот шрифт значка больше всего подходит для дизайна веб-сайтов и веб-приложений.
5 советов по выбору шрифта для иконок
Вот несколько советов, которые помогут вам выбрать лучший шрифт для значков для различных типов веб-дизайна и дизайна пользовательского интерфейса.
1. SVG-иконки и иконочные шрифты
По поводу выбора значков SVG и шрифтов для значков ведутся споры.Хотя у обоих вариантов есть свои преимущества и недостатки, некоторые дизайнеры предпочитают один другому.
К счастью, большинство шрифтов для иконок в нашем списке также включают версии иконок SVG. Так что мы позволим вам решить, какой вариант подходит для вашего проекта.
2. Убедитесь, что он отзывчивый
Отзывчивость шрифта значка — вероятно, самая важная особенность, на которую нужно обращать внимание при выборе значка любого типа. Здесь также сияют шрифты значков, поскольку они обычно достаточно отзывчивы, чтобы выглядеть одинаково на всех типах экранов и устройств.
Тем не менее, не помешает еще раз проверить, реагируют ли значки, особенно если вы используете SVG-версию значков.
3. Выберите подходящие темы
Иконочные шрифты бывают разных стилей и тем. Такие как значки контура, значки плоского дизайна, значки минимализма и многое другое. В зависимости от типа проекта, над которым вы работаете, вам решать, как выбрать правильный шрифт значка с соответствующей темой.
4. Цвета и настройка
Одним из многих преимуществ самостоятельного размещения собственных шрифтов значков является то, что он позволяет настраивать значки по своему усмотрению.Большинство современных шрифтов для значков даже позволяют выбирать из нескольких версий значков, включая версии с заливкой и контуром.
5. Бесплатные и премиальные иконочные шрифты
Конечно, если у вас ограниченный бюджет, бесплатный шрифт — идеальный выбор. Но, если вы можете позволить себе несколько долларов, используйте шрифт премиум-класса.
No related posts.