devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки поиска (SVG)

48 бесплатных иконок поиска из наборов с открытым исходным кодом. Нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

search
Lucidesearch
Tablersearch
Bootstrap Iconssearch
Iconoirsearch-12-filled
Fluent UIsearch
Material Symbolssearch
Material Design Iconssearch
Carbonsearch-x
Lucidesearch-filled
Tablerdoc-search
Iconoirsearch-12-regular
Fluent UIsearch-rounded
Material Symbolscar-search
Material Design Iconsbook-search
Lucideeye-search
Tablerarea-search
Iconoirsearch-16-filled
Fluent UImap-search
Material Symbolscar-search-outline
Material Design Iconsfile-search
Lucidemap-search
Tablerpage-search
Iconoirsearch-16-regular
Fluent UImap-search-outline
Material Symbolssearch-add
Material Design Iconsmail-search
Lucidesearch-off
Tablersearch-font
Iconoirsearch-20-filled
Fluent UImap-search-outline-rounded
Material Symbolssearch-add-outline
Material Design Iconsscan-search
Lucidebell-search
Tablersearch-20-regular
Fluent UImap-search-outline-sharp
Material Symbolsmap-search
Material Design Iconssearch-code
Lucidefile-search
Tablersearch-24-filled
Fluent UImap-search-rounded
Material Symbolsmap-search-outline
Material Design Iconstext-search
Lucideflag-search
Tablersearch-24-regular
Fluent UImap-search-sharp
Material Symbolssearch-web
Material Design Iconsuser-search
Lucide

Использование иконок поиска

Иконка с лупой обозначает поля и кнопки поиска. Размещайте её внутри поля ввода слева или делайте кнопкой, которая раскрывается в поле на маленьких экранах.

Все иконки здесь наследуют currentColor, поэтому принимают цвет текста того элемента, в котором находятся. Одна SVG-иконка одинаково выглядит на светлом и тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или зафиксируйте размер в CSS через 1em), чтобы верстка не смещалась во время загрузки страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Поиск».

Лицензии

Эти иконки поиска взяты из Lucide, Tabler, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons и Carbon. Это наборы с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

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

Можно ли использовать эти иконки поиска в коммерческих проектах бесплатно?
Да. Они взяты из наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Если вы распространяете сами файлы иконок, сохраняйте уведомление о лицензии.
Как изменить цвет иконки поиска?
SVG используют currentColor, поэтому задайте CSS-свойство color для родительского элемента. Также можно открыть иконку в поиске и выбрать фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и нажмите «Copy to Webflow» (вставится Code Embed) или «Copy JSX» для компонента React.