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

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

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

Обновлено

filter
Tablerfilter
Bootstrap Iconsfilter
Iconoirfilter-12-filled
Fluent UIfilter
Material Symbolsfilter
Material Design Iconsfilter
Carbonfilter-filled
Tablerfilter-solid
Iconoirfilter-12-regular
Fluent UIfilter-outline
Material Symbolsfilter-outline
Material Design Iconsfilter-filled
Carbonfilter-2
Tablerfilter-16-filled
Fluent UIfilter-outline-rounded
Material Symbolsfilter-1
Material Design Iconsfilter-x
Tablerfilter-16-regular
Fluent UIfilter-outline-sharp
Material Symbolsfilter-2
Material Design Iconsfilter-up
Tablerfilter-20-filled
Fluent UIfilter-rounded
Material Symbolsfilter-3
Material Design Iconsfilter-20-regular
Fluent UIfilter-sharp
Material Symbolsfilter-4
Material Design Iconsfilter-24-filled
Fluent UIfilter-1
Material Symbolsfilter-5
Material Design Iconsfilter-24-regular
Fluent UIfilter-1-outline
Material Symbolsfilter-6
Material Design Iconsfilter-28-filled
Fluent UIfilter-1-outline-rounded
Material Symbolsfilter-7
Material Design Iconsfilter-28-regular
Fluent UIfilter-1-outline-sharp
Material Symbolsfilter-8
Material Design Iconsfilter-32-filled
Fluent UIfilter-1-rounded
Material Symbolsfilter-9
Material Design Iconsfilter-32-light
Fluent UIfilter-1-sharp
Material Symbolsfilter-32-regular
Fluent UIfilter-2
Material Symbolsfilter-2-outline
Material Symbols

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

Воронка открывает фильтры в списках товаров, таблицах и результатах поиска.

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

Доступность иконок

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

Лицензии

Эти иконки фильтров взяты из 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?
Да. Откройте иконку и нажмите «Копировать для Webflow» (вставится Code Embed) или «Копировать JSX» для React-компонента.