Add icons to this collection by clicking the heart icon.
Coffee icon - also known as coffee, take away, caffeine, Paper cup, unicorn, fantasy, smileys, and food and restaurant. Created in a clean gradient style with a white, gray, navy, orange, and pink finish, 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 502 502"
>
<linearGradient id="a">
<stop offset="0" stop-color="#cdd4d4" />
<stop offset="1" stop-color="#f3f3f3" />
</linearGradient>
<linearGradient
id="d"
x1="-2207.552"
x2="-2207.552"
y1="113.504"
y2="60.547"
gradientTransform="matrix(-1 0 0 1 -1825.019 0)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#d5738e" />
<stop offset="1" stop-color="#e6a3c1" />
</linearGradient>
<linearGradient
id="e"
x1="373.927"
x2="415.444"
y1="105.251"
y2="105.251"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="f"
x1="119.467"
x2="119.467"
y1="113.504"
y2="60.547"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="174.605"
x2="216.122"
y1="105.251"
y2="105.251"
gradientTransform="matrix(-1 0 0 1 302.678 0)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="h"
x1="251"
x2="251"
y1="161.694"
y2="87.905"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#b39bdb" />
<stop offset="1" stop-color="#d0c3e8" />
</linearGradient>
<linearGradient
id="i"
x1="251"
x2="251"
y1="224.757"
y2="450.325"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad7d63" />
<stop offset="1" stop-color="#cb9d82" />
</linearGradient>
<linearGradient
id="j"
x1="251"
x2="251"
y1="237.728"
y2="158.409"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#d9e0e0" />
<stop offset="1" stop-color="#f3f3f3" />
</linearGradient>
<linearGradient id="c">
<stop offset="0" stop-color="#7ed99e" />
<stop offset=".253" stop-color="#81daa3" />
<stop offset=".573" stop-color="#88ddb3" />
<stop offset=".926" stop-color="#95e2cd" />
<stop offset="1" stop-color="#98e3d3" />
</linearGradient>
<linearGradient
id="k"
x1="64.879"
x2="413.608"
y1="374.289"
y2="374.289"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="l"
x1="251.023"
x2="251.023"
y1="134.272"
y2="61.583"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f4d952" />
<stop offset="1" stop-color="#f9edaf" />
</linearGradient>
<linearGradient
id="m"
x1="220.011"
x2="312.73"
y1="64.499"
y2="64.499"
gradientTransform="translate(-14.845 .89)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ec6f80" />
<stop offset="1" stop-color="#eca0aa" />
</linearGradient>
<linearGradient
id="n"
x1="235.01"
x2="284.644"
y1="27.426"
y2="27.426"
gradientTransform="translate(-14.845 .89)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<path
fill="url(#d)"
d="M356.418 121.239c-11.147-10.487-14.026-23.547-5.173-36.623 16.076-23.744 48.776-36.787 61.514-26.025 4.81 4.064 6.746 11.504 6.18 20.255-18.991 24.004-47.375 40.492-62.521 42.393z"
/>
<path
fill="url(#e)"
d="M358.363 122.979a48.646 48.646 0 0 1-1.945-1.74c14.203-28.217 42.836-39.35 62.521-42.394-.933 14.422-8.665 32.409-21.563 44.742-12.053 11.525-26.275 10.153-39.013-.608z"
/>
<path
fill="url(#f)"
d="M145.582 121.239c11.147-10.487 14.026-23.547 5.173-36.623-16.076-23.744-48.775-36.787-61.514-26.025-4.811 4.064-6.745 11.504-6.18 20.255 18.991 24.004 47.375 40.492 62.521 42.393z"
/>
<path
fill="url(#g)"
d="M143.637 122.979a48.646 48.646 0 0 0 1.945-1.74c-14.202-28.217-42.836-39.35-62.521-42.394.933 14.422 8.665 32.409 21.563 44.742 12.053 11.525 26.275 10.153 39.013-.608z"
/>
<path
fill="#fcc435"
d="M224.892 150.43c-7.269 0-14.093-4.487-16.722-11.714l-34.702-95.34a11.87 11.87 0 0 0-11.12-7.786h-39.362c-9.828 0-17.795-7.967-17.795-17.795S113.158 0 122.986 0h39.362c19.861 0 37.77 12.54 44.563 31.204l34.702 95.34c3.361 9.235-1.4 19.446-10.635 22.808a17.776 17.776 0 0 1-6.086 1.078z"
/>
<path
fill="url(#h)"
d="M353 80.638H149c-19.536 0-36.201 14.14-39.382 33.416l-8.141 49.334h299.046l-8.141-49.334C389.201 94.778 372.536 80.638 353 80.638z"
/>
<path
fill="url(#i)"
d="M412.772 202.567H89.228l24.688 231.682C118.021 472.775 150.526 502 189.27 502h123.46c38.745 0 71.249-29.225 75.355-67.752z"
/>
<path
fill="url(#j)"
d="M251 248.509c-30.656 0-107.832-1.613-162.219-16.551-23.829-6.544-37.841-31.168-31.295-54.997 6.546-23.831 31.18-37.845 54.997-31.296C157.6 158.057 229.912 159.019 251 159.019s93.4-.963 138.517-13.355c23.819-6.546 48.452 7.465 54.997 31.296 6.546 23.829-7.466 48.453-31.295 54.997-54.387 14.939-131.563 16.552-162.219 16.552z"
/>
<path
fill="url(#k)"
d="m406.65 403.97 6.3-59.12c.822-7.709-5.221-14.43-12.974-14.43H102.024c-7.753 0-13.796 6.721-12.974 14.43l6.3 59.12c.86 8.067 7.666 14.187 15.779 14.187h279.743c8.112 0 14.918-6.119 15.778-14.187z"
/>
<path
fill="url(#l)"
d="M209.285 104.104c.99 13.995 19.228 25.2 41.626 25.275 23.064.077 41.8-11.675 41.849-26.25.03-8.865-1.456-20.466-4.049-32.677-30.474-.507-52.928 7.712-79.426 33.652z"
/>
<path
fill="url(#m)"
d="M275.645 28.374c-21.71 2.239-42.156 8.888-59.215 29.902-4.433 16.353-7.152 32.848-7.191 44.574-.001.421.017.839.046 1.255 24.674-6.111 52.547-16.409 79.427-33.652-3.044-14.332-7.616-29.5-13.067-42.079z"
/>
<path
fill="url(#n)"
d="M275.645 28.374C268.554 12.01 259.977.029 251.345 0c-13.443-.045-26.947 28.885-34.914 58.275 19.296-6.311 39.85-15.768 59.214-29.901z"
/>
<g fill="#fff">
<path
d="M309 188.295c-.522-5.498 3.511-10.379 9.009-10.901 3.116-.297 6.188-.64 9.128-1.02a10.001 10.001 0 0 1 2.562 19.836 296.68 296.68 0 0 1-9.798 1.094A9.999 9.999 0 0 1 309 188.295zM360.04 182.162c-.64-5.486 3.29-10.451 8.775-11.09 8.507-.991 16.388-2.613 25.554-5.261 5.299-1.531 10.85 1.526 12.382 6.833 1.532 5.306-1.526 10.85-6.833 12.382-10.126 2.925-19.274 4.803-28.788 5.911-5.475.641-10.45-3.28-11.09-8.775z"
/>
</g>
<path
fill="#a37460"
d="M221.255 418.157H112.201l1.715 16.091a75.778 75.778 0 0 0 4.755 19.499h102.584c9.828 0 17.795-7.967 17.795-17.795 0-9.828-7.967-17.795-17.795-17.795z"
/>
<ellipse cx="163.115" cy="312.633" fill="#eaadcd" rx="14.936" ry="12.003" />
<ellipse cx="338.886" cy="312.633" fill="#eaadcd" rx="14.936" ry="12.003" />
<path
fill="#fff"
d="M188.721 286.981c7.183 0 13.813 1.589 19.159 4.273 4.544 2.281 9.962-.802 10.365-5.87a30 30 0 0 0 .029-4.348c-.991-15.146-13.602-27.24-28.775-27.629-16.713-.428-30.396 12.992-30.396 29.608 0 .843.036 1.678.105 2.503.422 5.01 5.857 7.995 10.349 5.738 5.348-2.685 11.979-4.275 19.164-4.275z"
/>
<path
fill="#3b3b44"
d="M251 322.819c-6.447 0-12.894-2.155-18.273-6.465-4.989-3.997-5.794-11.282-1.797-16.271 3.997-4.99 11.282-5.793 16.271-1.797a6.041 6.041 0 0 0 7.598 0c4.988-3.997 12.273-3.193 16.271 1.797 3.997 4.989 3.193 12.274-1.797 16.271-5.379 4.31-11.826 6.465-18.273 6.465zM188.721 286.981c5.926 0 11.473 1.082 16.237 2.967a17.572 17.572 0 0 0 1.415-6.933c0-9.749-7.903-17.652-17.652-17.652s-17.652 7.903-17.652 17.652c0 2.463.504 4.803 1.415 6.933 4.764-1.885 10.312-2.967 16.237-2.967z"
/>
<path
fill="#fff"
d="M313.279 286.981c7.183 0 13.813 1.589 19.158 4.273 4.544 2.281 9.962-.802 10.365-5.87.113-1.423.125-2.875.029-4.348-.991-15.146-13.602-27.24-28.775-27.629-16.713-.428-30.396 12.992-30.396 29.608 0 .843.035 1.678.105 2.503.422 5.01 5.857 7.995 10.349 5.738 5.348-2.685 11.98-4.275 19.165-4.275z"
/>
<path
fill="#3b3b44"
d="M313.279 286.981c5.926 0 11.473 1.082 16.237 2.967a17.572 17.572 0 0 0 1.415-6.933c0-9.749-7.903-17.652-17.652-17.652s-17.652 7.903-17.652 17.652c0 2.463.504 4.803 1.415 6.933 4.763-1.885 10.311-2.967 16.237-2.967z"
/>
</svg>
More icons in the same style and category