Как пользоваться: Поиск SVG-иконок
- Введите, что нужно — home, arrow right, shopping cart — и выберите набор или ищите сразу во всех.
- Нажмите на иконку, чтобы открыть её. Задайте размер, оставьте currentColor, чтобы иконка повторяла цвет текста, или выберите свой цвет; для контурных иконок настройте толщину линии.
- Скопируйте её как SVG, JSX для React, data URI, CSS-маску или вставьте в Webflow — либо скачайте SVG или PNG.
- Нажмите ☆ Сохранить, чтобы сохранить часто используемые иконки; в следующий раз они появятся в разделе ★ Сохранённые.
Бесплатные иконки, которыми можно пользоваться
Все иконки здесь взяты из наборов с открытым кодом и мягкой лицензией, поэтому их можно использовать на личных и коммерческих сайтах и в приложениях. Лицензия и автор указаны для каждой иконки:
| Набор | Лицензия | Стиль |
|---|---|---|
| Lucide | ISC | Контурные, сетка 24 px |
| Tabler Icons | MIT | Контурные и залитые |
| Heroicons | MIT | Контурные, сплошные, mini |
| Phosphor | MIT | Шесть начертаний |
| Bootstrap Icons | MIT | Залитые и контурные |
| Feather, Iconoir | MIT | Контурные |
| Fluent UI System Icons | MIT | Стиль Microsoft |
| Material Symbols, Material Design Icons, Carbon | Apache 2.0 | Стили Google, Pictogrammers и IBM |
Лицензии MIT, ISC и Apache 2.0 требуют сохранять уведомление об авторском праве и лицензии, если вы распространяете сами файлы иконок (например, в составе иконочного пакета). Использование иконок на сайте или в приложении — самый обычный случай, для которого эти лицензии и писались.
Зачем нужен currentColor
Если у иконки fill или stroke равны currentColor, она берёт CSS-свойство color родительского элемента. Один и тот же SVG становится белым на тёмной кнопке, синим в ссылке и серым в неактивном состоянии — и без редактирования файла. Используйте currentColor для иконок в интерфейсе и кнопках, а фиксированный цвет — для иллюстраций и фавиконок.
Какой формат копировать
- SVG — вставляется прямо в HTML, во Webflow Embed или в файл
.svg. - JSX — атрибуты уже адаптированы для React (
strokeWidth,className), достаточно вставить в компонент. - Data URI — для
<img src>или CSSbackground-imageбез отдельного файла. - CSS-маска — иконка, которая наследует
currentColorиз CSS; удобна в псевдоэлементах. - Копировать в Webflow — вставляет Code Embed с SVG в Webflow Designer.
Оптимизировать свои SVG можно в SVG-оптимизаторе, а сделать из одной из них фавиконку — в генераторе фавиконок.
Также ищут как: поиск иконок, иконки с открытым кодом, lucide icons, heroicons, tabler icons, иконки для сайта, currentcolor svg.
Инструменты, которые хорошо сочетаются с Поиск SVG-иконок
- Конвертер SVG в PNG — Превращайте векторную графику SVG в чёткие PNG-изображения нужного размера — для магазинов приложений, соцсетей, писем и документов.
- Изображение в Base64 — Превратите PNG, JPEG, SVG, WebP или GIF в Base64 Data URI с готовыми CSS и HTML или вставьте строку Base64, чтобы просмотреть и скачать изображение.
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- Генератор штрихкодов — Создавайте сканируемые штрихкоды для товаров, склада, доставки и библиотек.