Сборник SVG иконок Feather

Иконки можно подключать как SVG спрайты, так и HTML тегами, подключив библиотеку на JS

Подключение HTML-тегом с JS библиотекой:

Устанавливаем на нужный элемент атрибут data-feather с названием иконки (см. ниже), например: <i data-feather="github"></i>
Подключаем скрипт: feather.min.js
И вызываем: feather.replace() для замены всех элементов с атрибутом data-feather на SVG спрайты
Для оформления всех иконок, используем стили для класса feather или feather-имя_иконки для конкретной. Или можно добавить свои классы, например <i class="myicon" data-feather="github"></i>

.myicon { width: 100px; height: 100px; stroke: #337AB7; /* Цвет иконки */ stroke-width: 2; /* Толщина линий */ }

1
2
3
4
5
6

.myicon {
width: 100px;
height: 100px;
stroke: #337AB7; /* Цвет иконки */
stroke-width: 2; /* Толщина линий */
}

В итоге получится так:

Более подробную информацию по работе с JS библиотекой можно посмотреть на github у разработчиков

Скачиваем нужную иконку из списка ниже или получаем ее код, а далее подключаем. Подробнее можно посмотреть в теме: Варианты установки SVG иконки

Нажмите на меню справа, чтобы выбрать размер, цвет и толщину строки иконки (только на мониторах)
Нажмите Скачать, чтобы сохранить иконку в SVG, или Код, чтобы посмотреть ее SVG код.

Иконки Feather на github
Сайт авторов feathericons.com

Анимационные эффекты появления элементов SVG-графики при прокрутке страницы

Иконки с флагами стран мира в SVG формате

1155 бесплатных SVG иконок с логотипами популярных брендов

Ваш комментарий отправлен!