Add icons to this collection by clicking the heart icon.
Coffee icon - also known as coffee, hot drink, coffee shop, coffee cup, mug, coffee breaks, cafe, tea cup, and food and restaurant. 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 48 48"
>
<linearGradient
id="a"
x1="14"
x2="14"
y1="-1.456"
y2="8.888"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" />
<stop offset=".284" stop-color="#fafbfb" />
<stop offset=".612" stop-color="#eceeef" />
<stop offset=".96" stop-color="#d5dadb" />
<stop offset="1" stop-color="#d2d7d8" />
</linearGradient>
<linearGradient id="c" x1="22" x2="22" y1="-1.456" y2="8.888" href="#a" />
<linearGradient id="d" x1="30" x2="30" y1="-1.456" y2="8.888" href="#a" />
<linearGradient
id="b"
x1="32"
x2="45"
y1="26"
y2="26"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#edf1f2" />
<stop offset="1" stop-color="#c6cbcc" />
</linearGradient>
<linearGradient
id="e"
x1="5"
x2="37"
y1="27"
y2="27"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#edf1f2" />
<stop offset=".329" stop-color="#e9edee" />
<stop offset=".637" stop-color="#dee2e3" />
<stop offset=".937" stop-color="#cbd0d1" />
<stop offset="1" stop-color="#c6cbcc" />
</linearGradient>
<linearGradient id="f" x1="22" x2="22" y1="40.203" y2="45.729" href="#b" />
<path
fill="url(#a)"
d="M13 10a1 1 0 0 1-1-1v-.586a4.382 4.382 0 0 1 1.293-3.121A2.432 2.432 0 0 0 14 3.586V3a1 1 0 0 1 2 0v.586a4.382 4.382 0 0 1-1.293 3.121A2.432 2.432 0 0 0 14 8.414V9a1 1 0 0 1-1 1z"
/>
<path
fill="url(#c)"
d="M21 10a1 1 0 0 1-1-1v-.586a4.382 4.382 0 0 1 1.293-3.121A2.432 2.432 0 0 0 22 3.586V3a1 1 0 0 1 2 0v.586a4.382 4.382 0 0 1-1.293 3.121A2.432 2.432 0 0 0 22 8.414V9a1 1 0 0 1-1 1z"
/>
<path
fill="url(#d)"
d="M29 10a1 1 0 0 1-1-1v-.586a4.382 4.382 0 0 1 1.293-3.121A2.432 2.432 0 0 0 30 3.586V3a1 1 0 0 1 2 0v.586a4.382 4.382 0 0 1-1.293 3.121A2.432 2.432 0 0 0 30 8.414V9a1 1 0 0 1-1 1z"
/>
<path
fill="url(#b)"
d="M32 17h9.5a3.5 3.5 0 0 1 3.5 3.5v7a7.5 7.5 0 0 1-7.5 7.5H32v-4h5.5a3.517 3.517 0 0 0 3.5-3.5V21h-9z"
/>
<path
fill="url(#e)"
d="M25 40v2h-8v-2A12.013 12.013 0 0 1 5 28V17a5.006 5.006 0 0 1 5-5h22a5.006 5.006 0 0 1 5 5v11a12.013 12.013 0 0 1-12 12z"
/>
<path
fill="url(#f)"
d="M39 40H5a2 2 0 0 0-2 2 4 4 0 0 0 4 4h30a4 4 0 0 0 4-4 2 2 0 0 0-2-2z"
/>
</svg>
More icons in the same style and category