Как пользоваться: Поиск 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-оптимизаторе, а сделать из одной из них фавиконку — в генераторе фавиконок.
Популярные иконки
Бесплатные коллекции SVG-иконок для самых распространённых символов интерфейса:
- Иконки дома
- Иконки поиска
- Иконки пользователя
- Иконки меню
- Иконки стрелок
- Иконки галочек
- Иконки закрытия
- Иконки корзины
- Иконки сердца
- Иконки звезды
- Иконки почты
- Иконки телефона
- Иконки календаря
- Иконки настроек
- Иконки загрузки
- Иконки загрузки
- Иконки корзины
- Иконки редактирования
- Иконки «Поделиться»
- Иконки замков
- Иконки колокольчика
- Play иконки
- Иконки изображений
- Иконки местоположения
- Иконки часов
- Иконки глобуса
- Иконки чата
- Иконки файлов
- Иконки папок
- Иконки облаков
- Иконки камеры
- Иконки видео
- Иконки музыки
- Иконки Wi-Fi
- Иконки луны и тёмной темы
- Иконки плюс
- Информационные иконки
- Иконки предупреждения
- Иконки глаза
- Иконки ссылок
- Иконки фильтра
- Иконки денег
- Иконки кредитных карт
- Иконки графиков
- Иконки закладок
- Иконки тегов
Часто задаваемые вопросы
Можно ли использовать эти иконки в коммерческих проектах?
Да. Все перечисленные наборы имеют открытый код и лицензии MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Нужно ли указывать автора иконок?
На сайте или в приложении по этим лицензиям — нет. Если же вы передаёте иконки файлами, например в шаблоне или иконочном пакете, добавьте лицензию набора.
Что делает currentColor?
Иконка использует цвет текста того элемента, в котором находится. Так одна SVG-иконка адаптируется к кнопкам, ссылкам и тёмной теме через CSS.
Можно ли изменить толщину линии?
Да, для контурных иконок, например Lucide, Tabler, Feather и Iconoir. У залитых иконок нет обводки, поэтому менять там нечего.
Остаётся ли мой поиск приватным?
Поисковые слова отправляются в публичный API Iconify, где хранятся наборы иконок. Больше ничего из браузера не передаётся, и регистрация не нужна.
Можно ли установить Поиск SVG-иконок как веб-приложение и пользоваться им офлайн?
Да. Поиск SVG-иконок — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.
Похожие инструменты
Конвертер SVG в PNGПревращайте векторную графику SVG в чёткие PNG-изображения нужного размера — для магазинов приложений, соцс…
Изображение в Base64Превратите PNG, JPEG, SVG, WebP или GIF в Base64 Data URI с готовыми CSS и HTML или вставьте строку Base64,…
Генератор CSS-масокСделайте изображения и блоки плавно исчезающими вместо резкого обрыва: скройте один край, верх и низ, все ч…