Pixmora

Иконка поиска для поля и кнопки

Лупа Lucide для строки поиска и кнопки отправки запроса. Варианты отличаются статусом проверки и контекстом кода.

Как применить иконку «Лупа»

Сценарий страницы: Поле поиска и кнопка отправки. Основной вариант - lucide:search, набор Lucide, автор Lucide Contributors, лицензия ISC.

Лупа (search): Базовый поиск без дополнительного статуса. Поле поиска сайта, каталога или документации.

Поиск с проверкой (search-check): Лупа и галочка: найденный или проверенный результат. Подтверждение, что запрос обработан или совпадение найдено.

Поиск по коду (search-code): Лупа рядом с угловыми скобками кода. Поиск в репозитории, IDE-подобном интерфейсе или API-справочнике.

Внутри поля поиска удобны 16–20 px. Отдельная круглая кнопка в шапке часто 24. Не увеличивайте лупу до 128 внутри инпута: она начнёт спорить с текстом.

Это пример разметки без обработчиков. Замените action формы и путь к SVG. У поля должен быть видимый label или aria-label. На кнопке без текста обязателен aria-label «Найти».

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Найти. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<form role="search" action="/search">
  <label>
    Поиск
    <input type="search" name="q">
  </label>
  <button type="submit" aria-label="Найти">
    <img src="lucide-search.svg" width="20" height="20" alt="">
  </button>
</form>

Частые вопросы

Можно ли оставлять только иконку без поля?

Да, если кнопка открывает поиск. Тогда aria-label обязателен, иначе скринридер объявит безымянную кнопку.

Почему не zoom-in?

zoom-in про масштаб изображения. search означает поиск по данным.