Add icons to this collection by clicking the heart icon.
Cupcake icon - also known as food, cupcake, dessert, sweet, muffin, chocolate, 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="#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="e"
cx="150.341"
cy="10.341"
r="145.694"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="f"
cx="70.929"
cy="121.518"
r="82.581"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#fffbe5" />
<stop offset=".514" stop-color="#fff6ce" />
<stop offset=".976" stop-color="#fff0ad" />
</linearGradient>
<radialGradient
id="g"
cx="15.024"
cy="327.353"
r="209.938"
gradientTransform="matrix(.126 .992 -.253 .032 95.921 301.907)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="h"
cx="3.165"
cy="209.612"
r="305.235"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<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="i"
cx="377.141"
cy="78.953"
r="206.847"
gradientTransform="matrix(-1 0 0 -.467 754.282 115.812)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#fff0ad" />
<stop offset=".518" stop-color="#ffe177" />
<stop offset=".635" stop-color="#ffd96a" />
<stop offset="1" stop-color="#ffc344" />
</linearGradient>
<radialGradient
id="j"
cx="158.6"
cy="280.976"
r="231.663"
gradientTransform="matrix(0 1 -.312 0 246.369 122.377)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="k"
cx="661.572"
cy="306.703"
r="308.563"
gradientTransform="matrix(1 0 0 .885 0 56.123)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="l"
cx="224.671"
cy="288.6"
r="247.99"
gradientTransform="matrix(0 1 -.449 0 354.251 63.929)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="m"
cx="485.988"
cy="318.882"
r="297.284"
gradientTransform="matrix(0 1 -.382 0 607.741 -167.106)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="n"
cx="262.788"
cy="303.847"
r="243.288"
gradientTransform="matrix(.077 .997 -.318 .025 338.992 34.365)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="o"
cx="414.835"
cy="296.012"
r="281.531"
gradientTransform="matrix(-.152 .988 -.336 -.052 577.302 -98.731)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="p"
cx="377.078"
cy="305.753"
r="221.508"
gradientTransform="matrix(0 1 -.526 0 537.841 -71.325)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="q"
cx="351.729"
cy="261.282"
r="283.94"
gradientTransform="matrix(0 1 -.526 0 489.11 -90.447)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="r"
cx="446.177"
cy="140.153"
r="379.597"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="s"
cx="391.513"
cy="3037.53"
r="211.111"
gradientTransform="matrix(.931 0 0 .114 -111.186 140.437)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff3be" />
<stop offset=".512" stop-color="#fff9df" />
<stop offset=".976" stop-color="#fff" />
</radialGradient>
<path
fill="url(#e)"
d="M217.6 0C125.7 0 51.2 74.5 51.2 166.4l89.6 12.8C140.8 87.3 202.5 0 294.4 0z"
/>
<path
fill="url(#f)"
d="M64 140.8c-35.346 0-64 28.654-64 64h76.8s28.654-64 64-64z"
/>
<path fill="url(#g)" d="m0 204.8 38.4 281.6h38.4v-128L38.4 204.8z" />
<path fill="url(#h)" d="M102.4 358.4 76.8 204.8H38.4l38.4 281.6h38.4z" />
<circle cx="294.4" cy="166.4" r="166.4" fill="url(#i)" />
<path fill="url(#j)" d="m76.8 204.8 38.4 281.6h179.2V204.8z" />
<path fill="url(#k)" d="M512 204.8H294.4v281.6h179.2z" />
<path fill="url(#l)" d="m128 204.8 38.4 281.6h128V204.8z" />
<path fill="url(#m)" d="M460.8 204.8H294.4v281.6h128z" />
<path fill="url(#n)" d="m179.2 204.8 38.4 281.6h76.8V204.8z" />
<path fill="url(#o)" d="M409.6 204.8H294.4v281.6h76.8z" />
<path fill="url(#p)" d="M358.4 204.8h-64l-12.8 76.8 12.8 204.8H320z" />
<path fill="url(#q)" d="m230.4 204.8 38.4 281.6h25.6V204.8z" />
<path
fill="url(#r)"
d="M448 140.8H140.8c-35.346 0-64 28.654-64 64H512c0-35.346-28.654-64-64-64z"
/>
<path
fill="url(#s)"
d="M256 512c113.107 0 204.798-11.461 204.798-25.6H51.202c0 14.139 91.691 25.6 204.798 25.6z"
/>
</svg>
More icons in the same style and category