Add icons to this collection by clicking the heart icon.
Coffee Filter icon - also known as coffee, coffee shop, coffee maker, food and restaurant, coffee glass, and coffee filter. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 64 64"
>
<linearGradient id="a">
<stop offset="0" stop-color="#d9d9d9" />
<stop offset="1" stop-color="#ccc" />
</linearGradient>
<linearGradient
id="e"
x1="29"
x2="29"
y1="0"
y2="10"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#b5aa9d" />
<stop offset="1" stop-color="#a89e92" />
</linearGradient>
<linearGradient
id="f"
x1="32"
x2="32"
y1="10"
y2="64"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="g"
x1="24"
x2="24"
y1="3"
y2="5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="h"
x1="29"
x2="29"
y1="3"
y2="5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="i"
x1="34"
x2="34"
y1="3"
y2="5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#806859" />
<stop offset="1" stop-color="#735e50" />
</linearGradient>
<linearGradient
id="j"
x1="29"
x2="29"
y1="22"
y2="28.161"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="k"
x1="29"
x2="29"
y1="31.839"
y2="38"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#8b7368" />
<stop offset="1" stop-color="#3f342f" />
</linearGradient>
<linearGradient
id="l"
x1="34.5"
x2="34.5"
y1="42"
y2="27"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="m"
x1="29"
x2="29"
y1="45"
y2="50"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="29"
x2="29"
y1="45"
y2="38"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="o"
x1="39.265"
x2="39.265"
y1="3"
y2="5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="p"
x1="18.735"
x2="18.735"
y1="3"
y2="5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<path
fill="url(#e)"
d="M18.22 10h21.56l2.189-8.758a.995.995 0 0 0-.182-.857A.995.995 0 0 0 41 0H17a.998.998 0 0 0-.97 1.242z"
/>
<path
fill="url(#f)"
d="M49 27h-7.612l.56-1.684c.034-.102.052-.209.052-.316a3.004 3.004 0 0 0-2.723-2.987l2.692-10.77a.995.995 0 0 0-.182-.857A.993.993 0 0 0 41 10H17a1 1 0 0 0-.707.293l-3 3a1.001 1.001 0 0 0 .258 1.6c.051.025 4.771 2.464 5.384 7.107A3.004 3.004 0 0 0 16 25c0 .107.018.214.052.316L17 28.162v3.676l-.948 2.846A1.001 1.001 0 0 0 16 35c0 1.077.57 2.023 1.425 2.553A16.949 16.949 0 0 0 12 50c0 5.066 2.237 9.832 6.139 13.075a4.001 4.001 0 0 0 2.557.925h16.607c.933 0 1.841-.328 2.558-.925A16.956 16.956 0 0 0 46 50c0-4.749-1.966-9.233-5.425-12.447A3.002 3.002 0 0 0 42 35c0-.107-.018-.214-.052-.316L41.388 33H46v6c0 1.654 1.346 3 3 3h2a1 1 0 0 0 1-1V30c0-1.654-1.346-3-3-3z"
/>
<path fill="url(#g)" d="M25 5h-2a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2z" />
<path fill="url(#h)" d="M30 5h-2a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2z" />
<path fill="url(#i)" d="M35 5h-2a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2z" />
<path
fill="url(#j)"
d="M17 28a1 1 0 0 1 1-1h23.387l.561-1.684c.034-.102.052-.209.052-.316 0-1.654-1.346-3-3-3H19c-1.654 0-3 1.346-3 3 0 .107.018.214.052.316L17 28.161z"
/>
<path
fill="url(#k)"
d="M41.387 33H18a1 1 0 0 1-1-1v-.161l-.948 2.845A1.001 1.001 0 0 0 16 35c0 1.654 1.346 3 3 3h20c1.654 0 3-1.346 3-3 0-.107-.018-.214-.052-.316z"
/>
<path
fill="url(#l)"
d="M49 27H18a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h28v6c0 1.654 1.346 3 3 3h2a1 1 0 0 0 1-1V30c0-1.654-1.346-3-3-3z"
/>
<path fill="url(#m)" d="M24 49a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-4H24z" />
<path fill="url(#n)" d="M24 38h10v7H24z" />
<path fill="url(#o)" d="M41.53 3H38a1 1 0 1 0 0 2h3.03z" />
<path fill="url(#p)" d="M20 3h-3.53l.5 2H20a1 1 0 1 0 0-2z" />
</svg>
More icons in the same style and category