Содержание
Использование наборов бесплатных иконок на сайте
В данной статье будут рассмотрены различные бесплатные библиотеки графических иконок, которые способны преобразить и выделить Ваш сайт среди других. Они помогут улучшить восприятие информации, обратить внимание на определенные элементы интерфейса, сделать ресурс привлекательным, красочным и улучшить юзабилити.
Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.
Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:
- SVG (масштабируемая векторная графика, который позволяет масштабировать иконки без потери качества, до необходимого размера. при этом Вы имеете возможность изменять размер, цвет, тень и все, что можно сделать, с помощью CSS),
- PNG ( растровый формат графики, позволяющий производить сжатие без потери качества, до определенной степени).
Вы можете сами выбрать какой формат использовать. Например SVG-формат. Некоторые коллекции уже встроены в такие фреймворки как Bootstrap, Foundation и другие.
Чтобы использовать иконки на сайте необходимо их подключить. Это делается двумя способами и они почти всегда одинаковые, для наборов различных разработчиков:
-
Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:
<link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>
Первый способ хорош тем, что, при необходимости Вы, можете сделать в коде необходимые исправления связанные со стилизацией иконок, добавить свои CSS правила, сохранить документ и исходный код будет всегда под рукой.
-
Вы используете тот же архив, но не скачиваете его, а просто подключаете таким же способом, как в первом случае. При этом файлы находятся на удаленном сервере и не занимают места, например:
<link rel=»stylesheet» href=»//maxcdn.
bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css»>
Этот способ имеет свои преимущества. Для хранения и передачи файлов обычно используются CDN ( Content Delivery Network – сеть доставки контента) и даёт такие преимущества как:
- снижение нагрузки на сервер → увеличение скорости загрузки страниц → увеличение и улучшение позиций сайта в поисковых системах;
- определенная защита к DDoS атакам;
- кэширование на удаленных серверах и выбор ближайшего к вам сервера, для передачи данных. Благодаря этому необходимые файлы быстро загружаются на Ваш сайт.
Вот мы и подключили библиотеку к сайту. Настало время использовать иконки для украшения сайта.
Для каждого набора существуют свои правила вывода необходимого материала на страницу. Мы рассмотрим на практике два основных способа использования:
1. Для Font Awesome необходимо вставить в нужном месте следующий код и получите результат:
<i aria-hidden=»true»></i>
Увеличение размера производиться с помощью добавления следующих классов: fa-2x, fa-3x, fa-4x и далее, по аналогии. В других подборках правила увеличения похожи, за исключением первых букв класса, которые обычно соответствуют аббревиатуре названия библиотеки иконок.
Так же в инструментарии Font Awesome присутствуют такие возможности как:
- анимированые иконки;
- рамка вокруг;
- применение к спискам;
- поворот;
- наложение;
- настраивыемый CSS.
У каждого инструментария есть свои плюсы минусы, ознакомиться со всем возможностям можно на сайтах разработчиков.
2. Для OPENICONIC существуют сразу три основных способа и два способа для использования в фреймворках. Рассмотрим только 3 основных:
- подключение в виде обычного изображения:
<img src=»/open-iconic/svg/account-login.svg»> - подключение в виде SVG-спрайта:
<svg viewBox=»0 0 8 8″><use xlink:href=»#account-login»></use></svg> - использование обычного inine-элемента с CSS-классом:
<span data-glyph=»account-login»></span>
Бесплатные библиотеки иконок для сайта
На большинстве сайтов можно произвести поиск по набору, используя английские названия необходимых вам иконок (например: search или loop – иконка лупы, используемая для поиска на Вашем сайте).
Так же присутствуют примеры и документация для лучшего понимания устройства и использования.
Все представленные ниже подборки являются бесплатными, имеют открытую лицензию и позволяют использовать их в коммерческих или любых других целях:
- Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.
- Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
- Elusive Icons (elusiveicons.com) — 304 шт.
- MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
- OPENICONIC (useiconic.com/open) — 223 шт.
- GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
- IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
- Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
- Ionicons (ionicons.com) — 617 шт.
- Material icons (material.
io/icons) — 900 шт.
- Entypo+ (entypo.com) — 411 шт.
- Icons8 (icons8.com) — 62,300 шт.
- Freepic (ru.freepik.com/free-icons) — 99,458 шт.
- Flaticon (flaticon.com) — 632,500 шт.
- IcoMoon (icomoon.io) — 550 шт.
Список составлен без какого-либо отношения к популярности или практичности библиотеки. Нет какого-либо разграничения и каждый найдёт свои прекрасные иконки, подходящие для реализации его цели.
Где искать иконки для сайта: 20 лучших ресурсов
В этой статье подборка из 20 лучших и самых больших библиотек иконок для веб-сайтов. Многие из них предлагают вам тысячи, если не миллионы иконок, так что вы обязательно найдете то, что вам нужно.
The Noun Project
The Noun Project — это огромная библиотека иконок, в которой их более 2 миллионов штук. Все эти иконки сделаны участниками.
icomonstr
iconmonstr — это библиотека значков, предлагающая более 4000 иконок, отсортированных в 300+ различных коллекций. Эта библиотека поддерживается всего одним человеком.
Good Stuff No Nonsense
Good Stuff No Nonsense — это библиотека значков, которые нарисованы от руки.
Orion
Значки Line, Solid, Color & Flat с точным и унифицированным стилем. Приспосабливается к любому типу проекта с различным размером, цветом и разнообразием.
IcoMoon
Доступный как веб-сайт и приложение, IcoMoon предлагает более 4000 бесплатных иконок и автономное хранилище иконок. Каждый пакет значков имеет подробное лицензирование, поэтому дизайнеры и разработчики точно знают, как их использовать. Пользователи также могут создавать свои собственные иконки шрифтов.
Pictonic
Все значки разработаны с использованием точного пиксельного масштаба, поэтому их размер можно изменять без потери качества или целостности. Значки в этой коллекции также могут быть стилизованы с использованием элементов CSS.
icons8
100 000 значков и ежедневные обновления коллекции Icons8 трудно превзойти. Пользователи могут искать значки по тегам или просматривать более 50 различных тематических коллекций, чтобы найти графику, соответствующую их потребностям.
Flaticon
2 000 000+ бесплатных векторных иконок в формате SVG, PSD, PNG, EPS или в виде ICON FONT. Тысячи бесплатных иконок в крупнейшей базе бесплатных векторных иконок!
Font Awesome
Font Awesome, наверное, самая известная библиотека значков.
iconscout
iconscout — это коллекция миллионов иконок в каждой возможной категории. Пользователи имеют возможность создавать и делиться своими собственными значками и создавать коллекции.
IconFinder
Iconfinder в настоящее время является одной из крупнейших библиотек иконок с более чем 4 миллионами бесплатных и премиальных иконок.
PixelLove
PixelLove с более чем 15 000 значков для платформ iOS и Android представляет собой коллекцию для дизайнеров, создающих мобильные сайты и приложения. Все значки доступны в различных размерах.
Streamline Icons
Более 10 500 иконок в трех разных размерах. 53 категории, 720 подкатегорий.
Grabhic Burger
Graphic Burger — это уникальный сайт, который предоставляет большое количество бесплатных и платных иконок и других графических элементов. Все значки, доступные на этом сайте, хорошо оптимизированы, совместимы со всеми видами веб-сайтов и приложений.
Smashicons
Smashicons предлагает коллекцию с более чем 175 000 иконок в своей библиотеке. Однако, в отличие от некоторых других упомянутых библиотек значков, не все эти значки соответствуют одному и тому же стилю.
pngtree
Всего за 3 коротких года Pngtree удалось накопить миллионы уникальных ресурсов графического дизайна. Среди них: иллюстрации, векторы, шаблоны, фоны и, самое главное, иконки.
Найдя значок, вы можете загрузить его в формате PNG или SVG с максимальным размером 512 × 512.
Iconshock
Профессиональная библиотека значков с более чем 400 наборами иконок в более чем 30 стилях. Помимо библиотеки из 2 миллионов иконок, Iconshock также специализируется на пользовательских стилях.
Material Design Icons
Растущая коллекция иконок Material Design Icons позволяет дизайнерам и разработчикам, ориентирующимся на различные платформы, загружать иконки в формате, цвете и размере, которые им необходимы для проекта.
Material Icons
Выбрав значок, вы можете изменить цвет с черного на белый и наоборот. Вы также можете скачать его в формате SVG или PNG. Хотя, если вы загрузите формат SVG, вы всегда можете настроить цвет. Не говоря уже о том, что вы можете выбирать из сотен бесплатных иконок, идеально подходящих как для веб-проектов, так и для любого графического дизайна вне веб-сайтов.
freeicons
FreeIcons предоставляет различные коллекции. Каждый пакет содержит до 100 иконок, и большинство из них невероятно хорошо продуманы. Вы можете найти значки по таким темам, как путешествия, еда, женщины, страны и многое другое.
анимированных иконок – 3700+ высококачественных анимированных иконок
Ура, мы выпустили 3700+
новых анимированных иконок!
- Все иконки
- Цвет
- iOS глиф
- Windows 10
- Заполненный материал
- Офисный стиль
Анимированные иконки в стиле Color
307 иконок
Free
Bell
Free
Check Circle
Free
Dots Loading
Free
Down Arrow
Free
Heart
Free
Поиск
Телефонный звонок
Телефонное сообщение
Пикап
Грузовик
8
3
Завод
Анимационные иконы в стиле IOS Glyph
154 ИКОНКИ
БЕСПЛАТНЫЙ
BELL
.
Бесплатно
Стрелка вниз
Бесплатно
Сердце
Звонок телефона
Большой палец вверх
Smile
Stop
Zoom
Sun
50003
Animated icons in the Windows 10 style
157 icons
Free
Bell
Free
Check Circle
Бесплатно
Точки Загрузка
Бесплатно
Стрелка вниз
Бесплатно
Сердце
830025
Free
Search
No Battery
Bookmark
Wallet
Smile
Stop
Yummy
Animated icons in the Material Filled style
159 иконок
Бесплатно
Звонок
Бесплатно
Контрольный круг
Бесплатно
Точки Загрузка
Free
Down Arrow
Free
Heart
Free
Search
No Battery
Bookmark
Smile
Yummy
Zoom
Солнце и гроза
Анимированные иконки в стиле Office
155 иконок
Бесплатно
Bell
Free
Check Circle
Free
Dots Loading
Free
Down Arrow
Free
Heart
Free
Search
Phone Звонок
Настройка
Закладка
Папка
Разблокировка
08
Часто задаваемые вопросы
Могу ли я приобрести одну (две, три) иконы?
Вы можете приобрести только одну упаковку или несколько упаковок.