funnel icon

funnel from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: funnel
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

The same icon in other sets

funnelBootstrap Icons funnel-fillEva Icons funnelHeroIcons funnelHuge Icons funnelHumbleicons funnelIonIcons funnelLucide funnelPhosphor

Use the funnel icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M45.956 7a4 4 0 0 1 3.149 6.467l-13.38 17.075a4 4 0 0 0-.851 2.467v11.223a4 4 0 0 1-5.314 3.778l-5.479-1.906a4 4 0 0 1-2.686-3.778v-9.293a4 4 0 0 0-.878-2.5L6.877 13.5A4 4 0 0 1 10 7zm-2.055 4H12.082a1 1 0 0 0-.78 1.625L23.64 28.032a8 8 0 0 1 1.749 4.68l.006.321v8.582a1 1 0 0 0 .672.944l3.478 1.21a1 1 0 0 0 1.329-.944v-9.816a8 8 0 0 1 1.502-4.666l.2-.268l12.112-15.458A1 1 0 0 0 43.9 11"/></svg>

React

import type { SVGProps } from "react";

export function F7Funnel(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M45.956 7a4 4 0 0 1 3.149 6.467l-13.38 17.075a4 4 0 0 0-.851 2.467v11.223a4 4 0 0 1-5.314 3.778l-5.479-1.906a4 4 0 0 1-2.686-3.778v-9.293a4 4 0 0 0-.878-2.5L6.877 13.5A4 4 0 0 1 10 7zm-2.055 4H12.082a1 1 0 0 0-.78 1.625L23.64 28.032a8 8 0 0 1 1.749 4.68l.006.321v8.582a1 1 0 0 0 .672.944l3.478 1.21a1 1 0 0 0 1.329-.944v-9.816a8 8 0 0 1 1.502-4.666l.2-.268l12.112-15.458A1 1 0 0 0 43.9 11"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M45.956 7a4 4 0 0 1 3.149 6.467l-13.38 17.075a4 4 0 0 0-.851 2.467v11.223a4 4 0 0 1-5.314 3.778l-5.479-1.906a4 4 0 0 1-2.686-3.778v-9.293a4 4 0 0 0-.878-2.5L6.877 13.5A4 4 0 0 1 10 7zm-2.055 4H12.082a1 1 0 0 0-.78 1.625L23.64 28.032a8 8 0 0 1 1.749 4.68l.006.321v8.582a1 1 0 0 0 .672.944l3.478 1.21a1 1 0 0 0 1.329-.944v-9.816a8 8 0 0 1 1.502-4.666l.2-.268l12.112-15.458A1 1 0 0 0 43.9 11"/></svg>
</template>

CSS

.icon-funnel {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M45.956%207a4%204%200%200%201%203.149%206.467l-13.38%2017.075a4%204%200%200%200-.851%202.467v11.223a4%204%200%200%201-5.314%203.778l-5.479-1.906a4%204%200%200%201-2.686-3.778v-9.293a4%204%200%200%200-.878-2.5L6.877%2013.5A4%204%200%200%201%2010%207zm-2.055%204H12.082a1%201%200%200%200-.78%201.625L23.64%2028.032a8%208%200%200%201%201.749%204.68l.006.321v8.582a1%201%200%200%200%20.672.944l3.478%201.21a1%201%200%200%200%201.329-.944v-9.816a8%208%200%200%201%201.502-4.666l.2-.268l12.112-15.458A1%201%200%200%200%2043.9%2011%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M45.956%207a4%204%200%200%201%203.149%206.467l-13.38%2017.075a4%204%200%200%200-.851%202.467v11.223a4%204%200%200%201-5.314%203.778l-5.479-1.906a4%204%200%200%201-2.686-3.778v-9.293a4%204%200%200%200-.878-2.5L6.877%2013.5A4%204%200%200%201%2010%207zm-2.055%204H12.082a1%201%200%200%200-.78%201.625L23.64%2028.032a8%208%200%200%201%201.749%204.68l.006.321v8.582a1%201%200%200%200%20.672.944l3.478%201.21a1%201%200%200%200%201.329-.944v-9.816a8%208%200%200%201%201.502-4.666l.2-.268l12.112-15.458A1%201%200%200%200%2043.9%2011%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/funnel.svg?color=%231a73e8&size=48