Add icons to this collection by clicking the heart icon.
Coffee icon - also known as coffee, hot drink, shop, cafe, food and restaurant, and brewer. 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="#8abbd5" />
<stop offset=".518" stop-color="#6cabca" />
<stop offset=".793" stop-color="#2c91b9" />
<stop offset=".976" stop-color="#0681af" />
</linearGradient>
<radialGradient
id="d"
cx="20.671"
cy="488.435"
r="97.222"
gradientTransform="matrix(1 0 0 .25 0 366.442)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="e"
cx="476.2"
cy="327.353"
r="35.085"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="f"
cx="464.341"
cy="304.482"
r="48.001"
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="g"
cx="535.786"
cy="247.729"
r="100.507"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="h"
cx="296.677"
cy="350.018"
r="230.827"
gradientTransform="matrix(0 1 -.958 0 631.992 53.341)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="i"
cx="262.224"
cy="203.118"
r="43.3"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="j"
cx="317.506"
cy="218.765"
r="24.849"
gradientTransform="matrix(1 0 0 .573 0 93.32)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="k"
cx="367.216"
cy="215.659"
r="40.938"
gradientTransform="matrix(1 0 0 .573 0 91.995)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="l"
cx="259.753"
cy="177.365"
r="31.647"
gradientTransform="matrix(0 1 -1.84 0 586.171 -82.388)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="m"
cx="268.785"
cy="357.469"
r="101.251"
gradientTransform="matrix(0 1 -1.407 0 771.619 88.684)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="n"
cx="264.572"
cy="223.165"
r="54.639"
gradientTransform="matrix(1 0 0 .488 0 114.163)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="o"
cx="253.753"
cy="-7.847"
r="38.544"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="p"
cx="242.318"
cy="23.377"
r="19.894"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<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="q"
cx="261.235"
cy="211.212"
r="30.071"
gradientTransform="matrix(0 1 -1.84 0 649.944 -50.024)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="r"
cx="24.2"
cy="9.612"
r="68.864"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="s"
cx="346.195"
cy="42.684"
r="174.345"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="t"
cx="416.812"
cy="209.355"
r="426.212"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="u"
cx="13.518"
cy="81.614"
r="384.345"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="v"
cx="380.388"
cy="-4.365"
r="127.489"
gradientTransform="matrix(1 0 0 .445 0 -2.422)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="w"
cx="173.847"
cy="4.529"
r="109.49"
gradientTransform="matrix(1 0 0 .495 0 2.287)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="x"
cx="379.541"
cy="15.541"
r="121.571"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="y"
cx="420.161"
cy="357.469"
r="110.632"
gradientTransform="matrix(0 1 -1.407 0 922.995 -62.693)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="z"
cx="351.185"
cy="-93.815"
r="347.175"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="A"
cx="351.185"
cy="55.493"
r="179.037"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="B"
cx="433.503"
cy="350.018"
r="243.88"
gradientTransform="matrix(0 1 -.958 0 768.818 -83.485)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="C"
cx="394.647"
cy="232.624"
r="144.211"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="D"
cx="280.129"
cy="199.941"
r="59.522"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="E"
cx="431.157"
cy="513.981"
r="211.111"
gradientTransform="matrix(.931 0 0 .114 -148.108 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="F"
cx="235.118"
cy="143.824"
r="186.388"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#0cacba" />
<stop offset=".504" stop-color="#0996a4" />
<stop offset=".976" stop-color="#017297" />
</radialGradient>
<radialGradient
id="G"
cx="212.671"
cy="349.847"
r="107.82"
gradientTransform="matrix(1 0 0 1.2 0 -56.32)"
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="H"
cx="212.671"
cy="349.847"
r="107.82"
gradientTransform="matrix(1 0 0 1.2 0 -56.32)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="I"
cx="448.153"
cy="469.518"
r="369.355"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<path fill="url(#d)" d="m0 473.6 12.8 12.8h76.8v-25.6z" />
<path
fill="url(#e)"
d="m502.031 320-39.149 14.882c0 12.988 10.529 23.518 23.518 23.518h23.518c-3.774 0-6.259-24.605-7.887-38.4z"
/>
<path
fill="url(#f)"
d="M499.2 243.2 462.882 256v78.882h39.149C498.057 301.19 499.2 243.2 499.2 243.2z"
/>
<path
fill="url(#g)"
d="M422.4 230.4v38.4h64v66.082c0 12.988 10.529 23.518 23.518 23.518H512v-128z"
/>
<path
fill="url(#h)"
d="M236.617 243.2 217.6 409.6h54.857L307.2 256v-25.6z"
/>
<path fill="url(#i)" d="m236.617 243.2 2.926-25.6H294.4l-2.926 25.6z" />
<path fill="url(#j)" d="m294.4 192 12.8 25.6h25.6V192z" />
<path fill="url(#k)" d="M371.2 217.6h-38.4L320 192h64z" />
<path fill="url(#l)" d="m241.231 192 1.969 12.8h51.2v-25.6z" />
<path fill="url(#m)" d="m217.6 409.6 9.143 25.6H281.6l-9.143-25.6z" />
<path fill="url(#n)" d="m220.526 217.6 22.674 25.6h35.474l-9.874-25.6z" />
<path fill="url(#o)" d="M281.6 38.4V0h-51.2l-12.8 25.6z" />
<path fill="url(#p)" d="M204.8 38.4H256V25.6h-51.2z" />
<path fill="url(#q)" d="M294.4 153.6 268.8 38.4h-51.2L241.231 192H294.4z" />
<path fill="url(#r)" d="m0 38.4 12.8-25.6h76.8L76.8 51.2z" />
<path fill="url(#s)" d="M259.938 38.4H217.6v140.8h64z" />
<path
fill="url(#t)"
d="m256 435.2-25.6-25.6V38.4H76.8v435.2h396.8v-38.4z"
/>
<path fill="url(#u)" d="M0 473.6h76.8V38.4H0z" />
<path fill="url(#v)" d="M448 0H281.6l-12.8 25.6h192z" />
<path fill="url(#w)" d="M230.4 38.4H76.8l12.8-25.6h128z" />
<path fill="url(#x)" d="M256 25.6h217.6v12.8H256z" />
<path fill="url(#y)" d="M281.6 435.2H448l9.143-25.6H272.457z" />
<path
fill="url(#z)"
d="M294.4 204.8h140.8l1.969-12.8-65.969-12.8-78.769 12.8z"
/>
<path fill="url(#A)" d="M268.8 38.4 292.431 192h144.738L460.8 38.4z" />
<path
fill="url(#B)"
d="m291.474 243.2-19.017 166.4h184.686l-19.017-166.4L384 230.4z"
/>
<path fill="url(#C)" d="M435.2 217.6H294.4l-2.926 25.6h146.652z" />
<path fill="url(#D)" d="M278.674 243.2 256 217.6h25.6z" />
<path
fill="url(#E)"
d="M256 512c113.107 0 204.798-11.462 204.798-25.6H51.202c0 14.138 91.691 25.6 204.798 25.6z"
/>
<path
fill="url(#F)"
d="M160 294.4c-10.604 0-19.2-8.596-19.2-19.2V96c0-10.604 8.596-19.2 19.2-19.2s19.2 8.596 19.2 19.2v179.2c0 10.604-8.596 19.2-19.2 19.2z"
/>
<path fill="url(#G)" d="m153.6 320-51.2 51.2v25.6h12.8L192 320z" />
<g fill="url(#H)">
<path
d="M102.4 320v51.2l51.2-51.2zM204.8 320H192l-76.8 76.8h25.693l63.907-63.907zM204.8 345.693 153.693 396.8H204.8z"
/>
</g>
<path fill="url(#G)" d="M204.8 332.893 140.893 396.8h12.8l51.107-51.107z" />
<path fill="url(#I)" d="M460.8 486.4H89.6l-12.8-12.8h396.8z" />
</svg>
More icons in the same style and category