Cupcake icon
openmoji:cupcake
The Cupcake icon (openmoji:cupcake) is a free SVG icon from the OpenMoji set. It is drawn on a 72 × 72 grid. OpenMoji icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- OpenMoji
- Author
- OpenMoji
- License
- CC-BY-SA-4.0
- Size
- 72 × 72
- Category
- Food Drink
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m34.134 16.5l1.732-1m-8 10l-1.732-1m10.732 11l-1.732-1M45.5 26.866l-1-1.732m-10 2.732l1-1.732m6-7.268l-1-1.732m-17 18.732l-1-1.732M29 40h2m16.5-3.134l1-1.732M41.134 39.5l1.732-1"/><path fill="#a57939" stroke="#a57939" stroke-miterlimit="10" stroke-width="2" d="M59.031 43.629a2 2 0 1 0-2-3.464L36 40l-21.01.165a2.15 2.15 0 0 0-2.732.732a2.15 2.15 0 0 0 .732 2.732L36 57Z"/><path fill="#92d3f5" d="M56 46c-4 0-8 13-8 21H24c0-8-4-21-8-21h5l3 2l3-2l3 2l3-2l3 2l3-2l3 2l3-2l3 2l3-2Z"/><path fill="#ffa7c0" stroke="#ffa7c0" stroke-miterlimit="10" stroke-width="2" d="M50 42c3.846-1.099 6-3 6-7c0-2-3-4-3-4s-1.914-1.958-1.357-3.204C52 27 20 27.161 20 28c0 1-2 2-2 2s-3 0-3 4c0 7 6.864 7.466 13 9c4 1 5-1 10-1c4 0 5 2 12 0Z"/><path fill="#ffa7c0" stroke="#ffa7c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M24.052 20.66c-2.276 0-4.552 2.46-4.552 4.31c0 2.206 1.138 5.413 10.241 5.413l10.242.103c10.241 0 12.517-2.103 12.517-4.31s-3.414-3.206-3.414-3.206C47.86 22 46.828 21 47.948 18.349c-.086-2.269-6.376-4.273-6.804-7.39a1.4 1.4 0 0 0-.21-.611L39 5c-.126 6.663-12.672 7.832-12.672 12.245c0 0 0 3.414-2.276 3.414"/><path fill="#61b2e4" stroke="#61b2e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m34.134 16.5l1.732-1"/><path fill="#61b2e4" stroke="#d22f27" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m27.866 25.5l-1.732-1"/><path fill="#61b2e4" stroke="#5c9e31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m36.866 35.5l-1.732-1M45.5 26.866l-1-1.732"/><path fill="#61b2e4" stroke="#fcea2b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m34.5 27.866l1-1.732"/><path fill="#61b2e4" stroke="#8967aa" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m41.5 18.866l-1-1.732"/><path fill="#5c9e31" stroke="#61b2e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m23.5 35.866l-1-1.732"/><path fill="#61b2e4" stroke="#e27022" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M29 40h2"/><path fill="#61b2e4" stroke="#d22f27" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m47.5 36.866l1-1.732"/><path fill="#61b2e4" stroke="#fcea2b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m41.134 39.5l1.732-1"/><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M39 5c-.126 6.663-12.672 7.832-12.672 12.245c0 2.207 3.413 2.207 5.69 2.207m9.102-8.827c0 3.31 6.828 5.517 6.828 7.724s-4.49 4.634-11.379 4.31M24.052 20.66c-2.276 0-4.552 2.46-4.552 4.31c0 2.206 1.138 5.413 10.241 5.413m10.242.104c10.241 0 12.517-2.104 12.517-4.31s-3.414-3.207-3.414-3.207M56 46c-4 0-8 13-8 21H24c0-8-4-21-8-21"/><path d="m21 46l2.168 1.445a1.63 1.63 0 0 0 1.664 0l1.336-.89a1.63 1.63 0 0 1 1.664 0l1.336.89a1.63 1.63 0 0 0 1.664 0l1.336-.89a1.63 1.63 0 0 1 1.664 0l1.336.89a1.63 1.63 0 0 0 1.664 0l1.336-.89a1.63 1.63 0 0 1 1.664 0l1.336.89a1.63 1.63 0 0 0 1.664 0l1.336-.89a1.63 1.63 0 0 1 1.664 0l1.336.89a1.63 1.63 0 0 0 1.664 0L51 46M18 30s-3 0-3 4c0 3 3 8 9 8m33.031-1.835a2 2 0 1 1 2 3.464M14.99 40.165a2.15 2.15 0 0 0-2.732.732a2.15 2.15 0 0 0 .732 2.732M53 31s3 1 3 4s-2 7-6 7"/></g></svg>How to use the Cupcake icon
React
import { Icon } from "@iconify/react";
<Icon icon="openmoji:cupcake" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="openmoji:cupcake" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="openmoji:cupcake" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[openmoji--cupcake]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/openmoji -->
<div class="i-openmoji:cupcake"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="openmoji:cupcake"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/openmoji/cupcake.svg" alt="Cupcake icon" width="24" height="24">Cupcake icon in other icon sets
Cupcake icon FAQ
Is the Cupcake icon free for commercial use?
Yes. OpenMoji icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license.
How do I use the Cupcake icon in React?
Install @iconify/react and render <Icon icon="openmoji:cupcake" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Cupcake icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/openmoji/cupcake.svg" alt="Cupcake icon">, or paste the SVG code inline to style it with CSS.