Add icons to this collection by clicking the heart icon.
Cocoa icon - also known as nature, seed, healthy food, chocolate, vegan, bean, cocoa, and food and restaurant. Created in a clean flat gradient style with a gray 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 128 128"
>
<linearGradient
id="a"
x1="9.07"
x2="118.24"
y1="64.33"
y2="64.33"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e3a478" />
<stop offset=".36" stop-color="#bd7848" />
<stop offset=".51" stop-color="#b7754b" />
<stop offset=".7" stop-color="#a66e54" />
<stop offset=".91" stop-color="#8a6162" />
<stop offset="1" stop-color="#7d5b69" />
</linearGradient>
<linearGradient
id="b"
x1="79.1"
x2="46.65"
y1="93.07"
y2="36.87"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e8ad7c" />
<stop offset="1" stop-color="#f7ece3" />
</linearGradient>
<linearGradient
id="c"
x1="27.17"
x2="12.34"
y1="19.76"
y2="27.05"
gradientTransform="matrix(.56 -.71 .56 .71 11.69 85.73)"
href="#a"
/>
<linearGradient
id="d"
x1="25.98"
x2="11.39"
y1="36.93"
y2="44.11"
gradientTransform="matrix(.56 -.71 .56 .71 18.17 75.65)"
href="#a"
/>
<linearGradient
id="e"
x1="44.17"
x2="28.76"
y1="29.79"
y2="37.37"
gradientTransform="matrix(.56 -.71 .56 .71 4.04 76.51)"
href="#a"
/>
<linearGradient
id="f"
x1="38.38"
x2="21.93"
y1="47.45"
y2="55.54"
gradientTransform="matrix(.56 -.71 .56 .71 14.26 66.93)"
href="#a"
/>
<linearGradient
id="g"
x1="57.26"
x2="40.81"
y1="39.27"
y2="47.35"
gradientTransform="matrix(.56 -.71 .56 .71 -1.01 68.33)"
href="#a"
/>
<linearGradient
id="h"
x1="49.82"
x2="33.38"
y1="58.89"
y2="66.98"
gradientTransform="scale(.8 1) rotate(-45 76.29 12.797)"
href="#a"
/>
<linearGradient
id="i"
x1="68.7"
x2="52.25"
y1="50.71"
y2="58.8"
gradientTransform="matrix(.56 -.71 .56 .71 -4.74 59.33)"
href="#a"
/>
<linearGradient
id="j"
x1="61.26"
x2="44.82"
y1="70.33"
y2="78.42"
gradientTransform="matrix(.56 -.71 .56 .71 6.81 48.93)"
href="#a"
/>
<linearGradient
id="k"
x1="80.14"
x2="63.7"
y1="62.15"
y2="70.24"
gradientTransform="matrix(.56 -.71 .56 .71 -8.47 50.33)"
href="#a"
/>
<linearGradient
id="l"
x1="73.55"
x2="58.23"
y1="82.55"
y2="90.09"
gradientTransform="matrix(.56 -.71 .56 .71 2.31 39.37)"
href="#a"
/>
<linearGradient
id="m"
x1="90.98"
x2="76.11"
y1="75.45"
y2="82.76"
gradientTransform="scale(.8 1) rotate(-45 41.13 38.144)"
href="#a"
/>
<linearGradient
id="n"
x1="90.12"
x2="75.91"
y1="93.04"
y2="100.03"
gradientTransform="matrix(.56 -.71 .56 .71 -5.59 30.05)"
href="#a"
/>
<path
fill="url(#a)"
d="M13.35 114.65C3.18 104.48 14.3 95 14.63 92.37c-1.11-17.82 7.56-34.47 29-55.59 17.66-17.45 38.59-20.52 52.09-26.09 3.77-1.56 9.7-1.95 16.62 5 5.42 5.41 7.21 11.48 4.94 16.67-7.79 17.73-9.94 35.43-26 52.05-20.78 21.46-38.1 30.39-56.18 29-2.82.7-11.79 11.21-21.75 1.24zm85.42-96.57c-14.1 5.82-33.35 8.42-49.56 24.4C24.58 66.77 22 81.13 22.62 92c.46 7.34-9.47 11.17-3.62 17s9.26-4.26 16.58-3.65C46 106.21 61.13 104 85.5 78.81c14.69-15.16 16.5-31.49 24.5-49.7 1.32-3-2.49-7-3.26-7.8-2.18-2.13-5.19-4.37-7.97-3.23z"
/>
<path
fill="url(#b)"
d="M109.52 18.48c2.89 2.9 6.09 7.69 4.09 12.24-7.94 18.11-9.79 34.93-25.24 50.87-23.05 23.8-39.32 28.88-53.12 27.75-4.7-.39-10.72 10.84-19.07 2.49s2.75-14.68 2.45-19.62c-.86-13.76 3.93-29.06 27.78-52.58 17-16.73 37-19.53 50.84-25.25 4.89-2.01 9.36 1.2 12.27 4.1z"
/>
<path
fill="#b27467"
d="M116.58 9.45a1.41 1.41 0 0 1 2 2l-6.39 7.81a2.42 2.42 0 0 1-3.74-3.06c.26-.35.05-.12 8.13-6.75z"
/>
<ellipse
cx="35.69"
cy="88.31"
fill="url(#c)"
rx="4.68"
ry="8.49"
transform="rotate(-45 35.675 88.32)"
/>
<ellipse
cx="51.09"
cy="91.09"
fill="url(#d)"
rx="4.61"
ry="8.35"
transform="rotate(-45 51.08 91.113)"
/>
<ellipse
cx="43"
cy="74.47"
fill="url(#e)"
rx="4.87"
ry="8.82"
transform="rotate(-45 42.995 74.48)"
/>
<ellipse
cx="59.67"
cy="82.02"
fill="url(#f)"
rx="5.2"
ry="9.41"
transform="rotate(-45 59.664 82.039)"
/>
<ellipse
cx="50.35"
cy="64.28"
fill="url(#g)"
rx="5.2"
ry="9.41"
transform="rotate(-45 50.34 64.3)"
/>
<ellipse
cx="68.67"
cy="73.02"
fill="url(#h)"
rx="5.2"
ry="9.41"
transform="rotate(-45 68.657 73.036)"
/>
<ellipse
cx="59.35"
cy="55.28"
fill="url(#i)"
rx="5.2"
ry="9.41"
transform="rotate(-45 59.345 55.301)"
/>
<ellipse
cx="77.67"
cy="64.02"
fill="url(#j)"
rx="5.2"
ry="9.41"
transform="rotate(-45 77.662 64.038)"
/>
<ellipse
cx="68.35"
cy="46.28"
fill="url(#k)"
rx="5.2"
ry="9.41"
transform="rotate(-45 68.337 46.298)"
/>
<ellipse
cx="86.97"
cy="53.81"
fill="url(#l)"
rx="4.84"
ry="8.77"
transform="rotate(-45 86.968 53.835)"
/>
<ellipse
cx="78.63"
cy="37.27"
fill="url(#m)"
rx="4.7"
ry="8.51"
transform="rotate(-45 78.63 37.297)"
/>
<ellipse
cx="94.26"
cy="39.61"
fill="url(#n)"
rx="4.49"
ry="8.13"
transform="rotate(-45 94.268 39.633)"
/>
</svg>
More icons in the same style and category