Сайт бесплатных значков: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

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

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


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

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

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

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