filter one icon
filter-one from IconPark by ByteDance · Color · Edit · Apache-2.0 Free for personal and commercial use.
- Name
- filter-one
- Set
- IconPark
- Style
- Color
- Category
- Edit
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More edit icons from IconPark
Use the filter one icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g stroke="#000" stroke-linecap="round" stroke-width="4"><path d="M24.489 8.3975C24.2457 8.35865 24.2742 8 24.5205 8H39.5C39.7761 8 40 8.22386 40 8.5V23.4795C40 23.7258 39.6414 23.7543 39.6025 23.511L37.6355 11.1943C37.5673 10.7674 37.2326 10.4327 36.8057 10.3645L24.489 8.3975Z"/><path d="M6.489 26.3975C6.24574 26.3586 6.2742 26 6.52054 26H21.5C21.7761 26 22 26.2239 22 26.5V41.4795C22 41.7258 21.6414 41.7543 21.6025 41.511L19.6355 29.1943C19.5673 28.7674 19.2326 28.4327 18.8057 28.3645L6.489 26.3975Z"/><path d="M15.489 17.3975C15.2457 17.3586 15.2742 17 15.5205 17H30.5C30.7761 17 31 17.2239 31 17.5V32.4795C31 32.7258 30.6414 32.7543 30.6025 32.511L28.7498 20.9098C28.6134 20.0561 27.9439 19.3866 27.0902 19.2502L15.489 17.3975Z"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkFilterOne(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g stroke="#000" strokeLinecap="round" strokeWidth="4"><path d="M24.489 8.3975C24.2457 8.35865 24.2742 8 24.5205 8H39.5C39.7761 8 40 8.22386 40 8.5V23.4795C40 23.7258 39.6414 23.7543 39.6025 23.511L37.6355 11.1943C37.5673 10.7674 37.2326 10.4327 36.8057 10.3645L24.489 8.3975Z"/><path d="M6.489 26.3975C6.24574 26.3586 6.2742 26 6.52054 26H21.5C21.7761 26 22 26.2239 22 26.5V41.4795C22 41.7258 21.6414 41.7543 21.6025 41.511L19.6355 29.1943C19.5673 28.7674 19.2326 28.4327 18.8057 28.3645L6.489 26.3975Z"/><path d="M15.489 17.3975C15.2457 17.3586 15.2742 17 15.5205 17H30.5C30.7761 17 31 17.2239 31 17.5V32.4795C31 32.7258 30.6414 32.7543 30.6025 32.511L28.7498 20.9098C28.6134 20.0561 27.9439 19.3866 27.0902 19.2502L15.489 17.3975Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g stroke="#000" stroke-linecap="round" stroke-width="4"><path d="M24.489 8.3975C24.2457 8.35865 24.2742 8 24.5205 8H39.5C39.7761 8 40 8.22386 40 8.5V23.4795C40 23.7258 39.6414 23.7543 39.6025 23.511L37.6355 11.1943C37.5673 10.7674 37.2326 10.4327 36.8057 10.3645L24.489 8.3975Z"/><path d="M6.489 26.3975C6.24574 26.3586 6.2742 26 6.52054 26H21.5C21.7761 26 22 26.2239 22 26.5V41.4795C22 41.7258 21.6414 41.7543 21.6025 41.511L19.6355 29.1943C19.5673 28.7674 19.2326 28.4327 18.8057 28.3645L6.489 26.3975Z"/><path d="M15.489 17.3975C15.2457 17.3586 15.2742 17 15.5205 17H30.5C30.7761 17 31 17.2239 31 17.5V32.4795C31 32.7258 30.6414 32.7543 30.6025 32.511L28.7498 20.9098C28.6134 20.0561 27.9439 19.3866 27.0902 19.2502L15.489 17.3975Z"/></g></svg> </template>
CSS
.icon-filter-one {
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%2048%2048%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M24.489%208.3975C24.2457%208.35865%2024.2742%208%2024.5205%208H39.5C39.7761%208%2040%208.22386%2040%208.5V23.4795C40%2023.7258%2039.6414%2023.7543%2039.6025%2023.511L37.6355%2011.1943C37.5673%2010.7674%2037.2326%2010.4327%2036.8057%2010.3645L24.489%208.3975Z%22%2F%3E%3Cpath%20d%3D%22M6.489%2026.3975C6.24574%2026.3586%206.2742%2026%206.52054%2026H21.5C21.7761%2026%2022%2026.2239%2022%2026.5V41.4795C22%2041.7258%2021.6414%2041.7543%2021.6025%2041.511L19.6355%2029.1943C19.5673%2028.7674%2019.2326%2028.4327%2018.8057%2028.3645L6.489%2026.3975Z%22%2F%3E%3Cpath%20d%3D%22M15.489%2017.3975C15.2457%2017.3586%2015.2742%2017%2015.5205%2017H30.5C30.7761%2017%2031%2017.2239%2031%2017.5V32.4795C31%2032.7258%2030.6414%2032.7543%2030.6025%2032.511L28.7498%2020.9098C28.6134%2020.0561%2027.9439%2019.3866%2027.0902%2019.2502L15.489%2017.3975Z%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M24.489%208.3975C24.2457%208.35865%2024.2742%208%2024.5205%208H39.5C39.7761%208%2040%208.22386%2040%208.5V23.4795C40%2023.7258%2039.6414%2023.7543%2039.6025%2023.511L37.6355%2011.1943C37.5673%2010.7674%2037.2326%2010.4327%2036.8057%2010.3645L24.489%208.3975Z%22%2F%3E%3Cpath%20d%3D%22M6.489%2026.3975C6.24574%2026.3586%206.2742%2026%206.52054%2026H21.5C21.7761%2026%2022%2026.2239%2022%2026.5V41.4795C22%2041.7258%2021.6414%2041.7543%2021.6025%2041.511L19.6355%2029.1943C19.5673%2028.7674%2019.2326%2028.4327%2018.8057%2028.3645L6.489%2026.3975Z%22%2F%3E%3Cpath%20d%3D%22M15.489%2017.3975C15.2457%2017.3586%2015.2742%2017%2015.5205%2017H30.5C30.7761%2017%2031%2017.2239%2031%2017.5V32.4795C31%2032.7258%2030.6414%2032.7543%2030.6025%2032.511L28.7498%2020.9098C28.6134%2020.0561%2027.9439%2019.3866%2027.0902%2019.2502L15.489%2017.3975Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/filter-one.svg?color=%231a73e8&size=48
