filter icon

filter-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name
filter-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

filterfilter-duotonefilter-sharpfilter-sharp-duotonefilter-sharp-fillfilter-sharp-two-tonefilter-two-tone

The same icon in other sets

filterAkar Iconsfilter-filledAnt Design IconsfilterBootstrap IconsfilterBoxIcons v2filterCarbonfilterCodiconsfilterElement PlusfilterFont Awesome 6 SolidfilterFont Awesome SolidfilterFeather Iconsfilter-outlineFlowbite Iconsfilter-12-filledFluent UI System IconsfilterHuge IconsfilterIconParkfilterIconPark OutlinefilterIconPark SolidfilterIconPark TwoTonefilterIconoirfilterIonIconsfilterJam IconsfilterLine AwesomefilterMaterial Line IconsfilterLucidefilterMage Icons

Use the filter icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2.5786 5.405C2.012 4.831 1.8457 3.9728 2.1567 3.2286C2.4678 2.4845 3.1954 2 4.002 2L19.998 2C20.8046 2 21.5322 2.4845 21.8433 3.2286C22.1543 3.9728 21.988 4.831 21.4214 5.405L15 11.9104L15 18.4997C15 19.1296 14.7033 19.7226 14.1992 20.1003L12.1992 21.5988C11.5931 22.0529 10.7825 22.1257 10.1051 21.7868C9.4278 21.448 9 20.7556 9 19.9982L9 11.9104Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsFilterFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2.5786 5.405C2.012 4.831 1.8457 3.9728 2.1567 3.2286C2.4678 2.4845 3.1954 2 4.002 2L19.998 2C20.8046 2 21.5322 2.4845 21.8433 3.2286C22.1543 3.9728 21.988 4.831 21.4214 5.405L15 11.9104L15 18.4997C15 19.1296 14.7033 19.7226 14.1992 20.1003L12.1992 21.5988C11.5931 22.0529 10.7825 22.1257 10.1051 21.7868C9.4278 21.448 9 20.7556 9 19.9982L9 11.9104Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2.5786 5.405C2.012 4.831 1.8457 3.9728 2.1567 3.2286C2.4678 2.4845 3.1954 2 4.002 2L19.998 2C20.8046 2 21.5322 2.4845 21.8433 3.2286C22.1543 3.9728 21.988 4.831 21.4214 5.405L15 11.9104L15 18.4997C15 19.1296 14.7033 19.7226 14.1992 20.1003L12.1992 21.5988C11.5931 22.0529 10.7825 22.1257 10.1051 21.7868C9.4278 21.448 9 20.7556 9 19.9982L9 11.9104Z"/></svg>
</template>

CSS

.icon-filter-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2.5786%205.405C2.012%204.831%201.8457%203.9728%202.1567%203.2286C2.4678%202.4845%203.1954%202%204.002%202L19.998%202C20.8046%202%2021.5322%202.4845%2021.8433%203.2286C22.1543%203.9728%2021.988%204.831%2021.4214%205.405L15%2011.9104L15%2018.4997C15%2019.1296%2014.7033%2019.7226%2014.1992%2020.1003L12.1992%2021.5988C11.5931%2022.0529%2010.7825%2022.1257%2010.1051%2021.7868C9.4278%2021.448%209%2020.7556%209%2019.9982L9%2011.9104Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2.5786%205.405C2.012%204.831%201.8457%203.9728%202.1567%203.2286C2.4678%202.4845%203.1954%202%204.002%202L19.998%202C20.8046%202%2021.5322%202.4845%2021.8433%203.2286C22.1543%203.9728%2021.988%204.831%2021.4214%205.405L15%2011.9104L15%2018.4997C15%2019.1296%2014.7033%2019.7226%2014.1992%2020.1003L12.1992%2021.5988C11.5931%2022.0529%2010.7825%2022.1257%2010.1051%2021.7868C9.4278%2021.448%209%2020.7556%209%2019.9982L9%2011.9104Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/filter-fill.svg?color=%231a73e8&size=48