Использование наборов бесплатных иконок на сайте

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

Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.

Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:

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

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

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

1. Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:

   <link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>

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

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

   <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 – иконка лупы, используемая для поиска на Вашем сайте).

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

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

1. Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.
2. Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
3. Elusive Icons (elusiveicons.com) — 304  шт.
4. MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
5. OPENICONIC (useiconic.com/open) — 223 шт.
6. GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
7. IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
8. Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
9. Ionicons (ionicons.com) — 617 шт.
10. Material icons (material. io/icons) — 900 шт.
11. Entypo+ (entypo.com) — 411 шт.
12. Icons8 (icons8.com) — 62,300 шт.
13. Freepic (ru.freepik.com/free-icons) — 99,458 шт.
14. Flaticon (flaticon.com) — 632,500 шт.
15. 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

• . Бесплатно

  Стрелка вниз

• Бесплатно

  Сердце

• Звонок телефона

• Большой палец вверх

50003

• Smile

• Stop

• Zoom

• Sun

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

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

Могу ли я приобрести одну (две, три) иконы?

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