Pixmora

Иконка фильтра каталога

Воронка Lucide открывает панель условий выборки. Не путайте с сортировкой и с поиском: фильтр сужает набор, лупа ищет по запросу.

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

Сценарий страницы: Фильтрация каталога. Основной вариант - lucide:filter, набор Lucide, автор Lucide Contributors, лицензия ISC.

Воронка (filter): Классическая воронка, сужающаяся вниз. Кнопка фильтров товаров, таблиц, логов.

Строки фильтра (list-filter): Три горизонтали разной длины: фильтр как усечение списка. Тулбар таблицы, где воронка выглядит чужеродно.

Сбросить фильтр (filter-x): Воронка и крест: снять условия. Действие «очистить все фильтры».

В тулбаре каталога 20–24 px. В мобильной нижней панели 24. Бейдж числа рисуйте отдельно.

Это пример разметки без обработчиков. Открытие панели и применение условий подключите в проекте. Путь к SVG замените. Счётчик активных фильтров выводите текстом рядом, не вшивайте в path.

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

Файлы SVG

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

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

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

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

<button type="button" aria-expanded="false" aria-controls="filters-panel">
  <img src="lucide-filter.svg" width="20" height="20" alt="">
  Фильтры
</button>
<aside id="filters-panel" hidden></aside>

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

Фильтр или поиск?

Поиск по свободному тексту - search. Набор галочек, диапазонов и тегов - filter.

Как показать, что фильтры уже включены?

Точка, число рядом или подпись «Фильтры: 3». Не полагайтесь только на смену цвета img без текстового статуса.