Add icons to this collection by clicking the heart icon.
Espresso icon - also known as coffee, hot drink, shop, cafe, espresso, grinder, 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"
>
<radialGradient
id="f"
cx="164.045"
cy="24.731"
r="177.895"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#c6f2e7" />
<stop offset=".546" stop-color="#afe2e6" />
<stop offset="1" stop-color="#75cdd5" />
</radialGradient>
<radialGradient
id="g"
cx="310.027"
cy="86.025"
r="96.953"
gradientTransform="matrix(-.909 0 0 -1.743 582.304 235.936)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#75cdd5" />
<stop offset=".214" stop-color="#4fc4ce" />
<stop offset=".406" stop-color="#2abcc8" />
<stop offset="1" stop-color="#0996a4" />
</radialGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#ae6c6c" />
<stop offset=".512" stop-color="#9b5e5e" />
<stop offset=".564" stop-color="#965b5b" />
<stop offset=".976" stop-color="#704444" />
</linearGradient>
<radialGradient
id="h"
cx="310.027"
cy="76.181"
r="94.176"
gradientTransform="matrix(-.909 0 0 -1.253 582.304 171.668)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#017297" />
<stop offset=".512" stop-color="#024c67" />
<stop offset=".976" stop-color="#00366d" />
</linearGradient>
<radialGradient
id="i"
cx="322.798"
cy="187.871"
r="120.258"
fx="256.769"
fy="229.96"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="j"
cx="295.598"
cy="306.902"
r="186.668"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#eaf9fa" />
<stop offset=".514" stop-color="#bad6e5" />
<stop offset=".606" stop-color="#b0d0e2" />
<stop offset=".976" stop-color="#8abbd5" />
</linearGradient>
<radialGradient
id="k"
cx="235.071"
cy="356.718"
r="39.077"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="l"
cx="160.435"
cy="225.141"
r="96.557"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#8abbd5" />
<stop offset=".518" stop-color="#6cabca" />
<stop offset=".793" stop-color="#2c91b9" />
<stop offset=".976" stop-color="#0681af" />
</linearGradient>
<radialGradient
id="m"
cx="122.953"
cy="324.459"
r="214.177"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="n"
cx="332.442"
cy="225.141"
r="118.76"
gradientTransform="matrix(1 0 0 .857 0 43.886)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="o"
cx="322.882"
cy="359.329"
r="57.027"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="p"
cx="209.697"
cy="230.797"
r="122.796"
gradientTransform="matrix(1 0 0 .857 0 43.886)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="q"
cx="322.318"
cy="187.588"
r="89.251"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="r"
cx="200.624"
cy="195.212"
r="90.094"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="e">
<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" />
</linearGradient>
<radialGradient
id="s"
cx="162.553"
cy="24.878"
r="150.585"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="t"
cx="169.847"
cy="137.571"
r="50.45"
gradientTransform="matrix(0 1 -2.01 0 446.309 -32.276)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="u"
cx="285.894"
cy="168.912"
r="92.316"
gradientTransform="matrix(1 0 0 .35 0 109.834)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="v"
cx="174.859"
cy="6.082"
r="56.9"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="w"
cx="334.529"
cy="19.2"
r="111.591"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="x"
cx="200.612"
cy="-.194"
r="35.496"
gradientTransform="matrix(1 0 0 .628 0 -.072)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="y"
cx="260.309"
cy="-3.371"
r="34.069"
gradientTransform="matrix(1 0 0 .563 0 -1.475)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="z"
cx="164.071"
cy="186.177"
r="97.247"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="A"
cx="385.141"
cy="429.706"
r="161.64"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="B"
cx="199.635"
cy="440.294"
r="69.579"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="C"
cx="200.482"
cy="263.871"
r="128.325"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#3692bc" />
<stop offset=".512" stop-color="#0681af" />
<stop offset=".573" stop-color="#057bad" />
<stop offset=".976" stop-color="#0055a3" />
</radialGradient>
<radialGradient
id="D"
cx="312.224"
cy="513.981"
r="211.111"
gradientTransform="matrix(.931 0 0 .114 -37.342 428.046)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#b4d2e2" />
<stop offset=".512" stop-color="#d8e8f0" />
<stop offset=".525" stop-color="#d9e9f0" />
<stop offset=".976" stop-color="#fff" />
</radialGradient>
<radialGradient
id="E"
cx="178.388"
cy="414.012"
r="55.374"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="F"
cx="134.553"
cy="409.988"
r="68.103"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="G"
cx="149.862"
cy="409.274"
r="17.026"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<path
fill="url(#f)"
d="M153.6 25.6v49.08a24.302 24.302 0 0 1 13.956 2.12 24.299 24.299 0 0 0 20.942 0l.002-.001a24.298 24.298 0 0 1 20.94 0l.004.002c6.622 3.162 27.134 15.96 33.756 12.799l-12.8-64z"
/>
<path
fill="url(#g)"
d="M230.4 25.6v64c6.619-3.157 72.089-9.995 76.8-10.68V25.6z"
/>
<path
fill="url(#h)"
d="m293.232 76.803-.01-.005a24.3 24.3 0 0 0-20.938 0l-.008.004a24.3 24.3 0 0 1-20.938 0l-.008-.004a24.298 24.298 0 0 0-20.929-.004V140.8h76.8V78.92a24.3 24.3 0 0 1-13.969-2.117z"
/>
<path fill="url(#i)" d="M294.4 217.6h-89.6v-38.4h76.8z" />
<path
fill="url(#j)"
d="M307.2 256H204.8L192 396.8l12.8 89.6h128L310.857 256z"
/>
<path fill="url(#k)" d="m243.2 358.4-25.6-51.2 38.4-12.8 12.8 64" />
<path
fill="url(#l)"
d="M204.8 217.6h-51.2l-3.657 38.4L192 268.8l12.8-12.8z"
/>
<path fill="url(#m)" d="M149.943 256 128 486.4h76.8V256z" />
<path fill="url(#n)" d="M230.4 230.4h102.4v76.8H230.4z" />
<path fill="url(#o)" d="M320 307.2h-76.8l25.6 51.2h25.6z" />
<path fill="url(#p)" d="M204.8 230.4h25.6v76.8h-25.6z" />
<path fill="url(#q)" d="M230.4 217.6h102.4v12.8H230.4z" />
<path fill="url(#r)" d="M204.8 217.6h25.6v12.8h-25.6z" />
<path
fill="url(#s)"
d="M230.383 76.802a24.303 24.303 0 0 1-20.939 0l-.004-.002a24.298 24.298 0 0 0-20.94 0l-.002.001a24.302 24.302 0 0 1-20.942 0 24.294 24.294 0 0 0-13.956-2.12v66.12h76.8V76.794l-.009.004z"
/>
<path fill="url(#t)" d="M153.6 140.8h76.8l-25.6 38.4h-25.6z" />
<path fill="url(#u)" d="M307.2 140.8h-76.8l-25.6 38.4h76.8z" />
<path fill="url(#v)" d="M140.8 25.6h76.8V12.8h-76.8z" />
<path fill="url(#w)" d="M217.6 12.8H320v12.8H217.6z" />
<path fill="url(#x)" d="M192 0h38.4v12.8h-51.2z" />
<path fill="url(#y)" d="M268.8 0h-38.4v12.8h51.2z" />
<path fill="url(#z)" d="M166.4 217.6h51.2l-12.8-38.4h-25.6z" />
<path fill="url(#A)" d="M358.4 460.8H204.8l25.6 25.6h128z" />
<path fill="url(#B)" d="M204.8 460.8h25.6v25.6h-25.6z" />
<path
fill="url(#C)"
d="M192 281.6h-38.4v-12.8H192zm0 12.8h-38.4v12.8H192zm0 25.6h-38.4v12.8H192z"
/>
<path
fill="url(#D)"
d="M256 512c113.107 0 204.798-11.461 204.798-25.6H51.202c0 14.139 91.691 25.6 204.798 25.6z"
/>
<path
fill="url(#E)"
d="M172.8 460.8c10.604 0 19.2-11.462 19.2-25.6s-8.596-25.6-19.2-25.6h-25.6c10.604 0 10.604 51.2 0 51.2z"
/>
<ellipse cx="147.2" cy="435.2" fill="url(#F)" rx="19.2" ry="25.6" />
<ellipse cx="147.2" cy="416" fill="url(#G)" rx="4.8" ry="6.4" />
</svg>
More icons in the same style and category