Add icons to this collection by clicking the heart icon.
Espresso icon - also known as cup, coffee, hot drink, shop, cafe, espresso, and food and restaurant. Created in a clean 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 512 512"
>
<linearGradient id="a">
<stop offset="0" stop-color="#c6f2e7" />
<stop offset=".546" stop-color="#afe2e6" />
<stop offset="1" stop-color="#75cdd5" />
</linearGradient>
<radialGradient
id="e"
cx="-67.754"
cy="-325.367"
r="1103.962"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="f"
cx="-52.649"
cy="-122.426"
r="836.487"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#edd9d3" />
<stop offset=".075" stop-color="#e9d2cd" />
<stop offset=".358" stop-color="#dcbbb9" />
<stop offset=".535" stop-color="#d7b2b2" />
<stop offset=".973" stop-color="#c59191" />
</radialGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#fff7f3" />
<stop offset=".535" stop-color="#f3c6bd" />
<stop offset=".871" stop-color="#eaa998" />
</linearGradient>
<radialGradient
id="g"
cx="-42.577"
cy="64.765"
r="416.808"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="h"
cx="-42.577"
cy="64.765"
r="416.808"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#dd7f66" />
<stop offset=".512" stop-color="#d6694b" />
<stop offset=".669" stop-color="#c16552" />
<stop offset=".976" stop-color="#9b5e5e" />
</linearGradient>
<radialGradient
id="i"
cx="614.177"
cy="236.309"
r="440.254"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#75cdd5" />
<stop offset=".214" stop-color="#4fc4ce" />
<stop offset=".406" stop-color="#2abcc8" />
<stop offset="1" stop-color="#0996a4" />
</linearGradient>
<radialGradient
id="j"
cx="614.177"
cy="168.077"
r="562.153"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="k"
cx="614.177"
cy="213.552"
r="496.955"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ae6c6c" />
<stop offset=".512" stop-color="#9b5e5e" />
<stop offset=".564" stop-color="#965b5b" />
<stop offset=".976" stop-color="#704444" />
</radialGradient>
<radialGradient
id="l"
cx="498.977"
cy="105.961"
r="437.739"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="m"
cx="168.2"
cy="178.765"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="n"
cx="47.071"
cy="158.318"
r="37.698"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="o"
cx="70.647"
cy="196.906"
r="40.711"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="p"
cx="232.2"
cy="153.165"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="q"
cx="219.4"
cy="191.565"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="r"
cx="155.4"
cy="140.365"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="s"
cx="129.8"
cy="191.565"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="t"
cx="394.059"
cy="191.047"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="u"
cx="381.259"
cy="152.647"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="v"
cx="432.459"
cy="203.847"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="w"
cx="315.141"
cy="172.318"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="x"
cx="340.741"
cy="197.918"
r="32.965"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="y"
cx="445.894"
cy="163.965"
r="42.881"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="z"
cx="272.579"
cy="3105.903"
r="211.111"
gradientTransform="matrix(.931 0 0 .113 -.42 136.3)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#93d8de" />
<stop offset=".315" stop-color="#c2e8ed" />
<stop offset=".496" stop-color="#d9f0f4" />
<stop offset=".888" stop-color="#fff" />
</radialGradient>
<path fill="url(#e)" d="m45.137 409.6 6.063 76.8H128L140.8 384z" />
<path fill="url(#f)" d="m115.2 217.6-84.211 12.8 14.148 179.2h79.206z" />
<path
fill="url(#g)"
d="M30.989 230.4 22.905 128l92.295-12.8-7.411 115.2z"
/>
<path fill="url(#h)" d="M22.905 128 12.8 0h76.8L128 51.2 99.705 128z" />
<path
fill="url(#i)"
d="m99.705 128 8.084 102.4L294.4 256l186.611-25.6 8.084-102.4L281.6 115.2z"
/>
<path
fill="url(#j)"
d="M121.937 409.6 128 486.4h332.8l6.063-76.8L268.8 396.8z"
/>
<path fill="url(#k)" d="M481.011 230.4H107.789l14.148 179.2h344.926z" />
<path fill="url(#l)" d="M499.2 0H89.6l10.105 128h389.39z" />
<circle cx="179.2" cy="192" r="12.8" fill="url(#m)" />
<circle cx="51.2" cy="166.4" r="12.8" fill="url(#n)" />
<circle cx="76.8" cy="204.8" r="12.8" fill="url(#o)" />
<circle cx="243.2" cy="166.4" r="12.8" fill="url(#p)" />
<circle cx="230.4" cy="204.8" r="12.8" fill="url(#q)" />
<circle cx="166.4" cy="153.6" r="12.8" fill="url(#r)" />
<circle cx="140.8" cy="204.8" r="12.8" fill="url(#s)" />
<circle cx="396.8" cy="192" r="12.8" fill="url(#t)" />
<circle cx="384" cy="153.6" r="12.8" fill="url(#u)" />
<circle cx="435.2" cy="204.8" r="12.8" fill="url(#v)" />
<circle cx="320" cy="179.2" r="12.8" fill="url(#w)" />
<circle cx="345.6" cy="204.8" r="12.8" fill="url(#x)" />
<circle cx="448" cy="166.4" r="12.8" fill="url(#y)" />
<path
fill="url(#z)"
d="M256 512c113.107 0 204.798-11.351 204.798-25.353H51.202C51.202 500.649 142.893 512 256 512z"
/>
</svg>
More icons in the same style and category