cupcake icon
cupcake from Material Design Icons by Pictogrammers · Filled · Food / Drink · Apache-2.0 Free for personal and commercial use.
- Name
- cupcake
- Set
- Material Design Icons
- Style
- Filled
- Category
- Food / Drink
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
More food / drink icons from Material Design Icons
Use the cupcake icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.5A2.5 2.5 0 0 1 14.5 4A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 9.5 4A2.5 2.5 0 0 1 12 1.5M15.87 5C18 5 20 7 20 9c2.7 0 2.7 4 0 4H4c-2.7 0-2.7-4 0-4c0-2 2-4 4.13-4c.44 1.73 2.01 3 3.87 3s3.43-1.27 3.87-3M5 15h3l1 7H7zm5 0h4l-1 7h-2zm6 0h3l-2 7h-2z"/></svg>
React
import type { SVGProps } from "react";
export function MdiCupcake(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.5A2.5 2.5 0 0 1 14.5 4A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 9.5 4A2.5 2.5 0 0 1 12 1.5M15.87 5C18 5 20 7 20 9c2.7 0 2.7 4 0 4H4c-2.7 0-2.7-4 0-4c0-2 2-4 4.13-4c.44 1.73 2.01 3 3.87 3s3.43-1.27 3.87-3M5 15h3l1 7H7zm5 0h4l-1 7h-2zm6 0h3l-2 7h-2z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.5A2.5 2.5 0 0 1 14.5 4A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 9.5 4A2.5 2.5 0 0 1 12 1.5M15.87 5C18 5 20 7 20 9c2.7 0 2.7 4 0 4H4c-2.7 0-2.7-4 0-4c0-2 2-4 4.13-4c.44 1.73 2.01 3 3.87 3s3.43-1.27 3.87-3M5 15h3l1 7H7zm5 0h4l-1 7h-2zm6 0h3l-2 7h-2z"/></svg> </template>
CSS
.icon-cupcake {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%201.5A2.5%202.5%200%200%201%2014.5%204A2.5%202.5%200%200%201%2012%206.5A2.5%202.5%200%200%201%209.5%204A2.5%202.5%200%200%201%2012%201.5M15.87%205C18%205%2020%207%2020%209c2.7%200%202.7%204%200%204H4c-2.7%200-2.7-4%200-4c0-2%202-4%204.13-4c.44%201.73%202.01%203%203.87%203s3.43-1.27%203.87-3M5%2015h3l1%207H7zm5%200h4l-1%207h-2zm6%200h3l-2%207h-2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%201.5A2.5%202.5%200%200%201%2014.5%204A2.5%202.5%200%200%201%2012%206.5A2.5%202.5%200%200%201%209.5%204A2.5%202.5%200%200%201%2012%201.5M15.87%205C18%205%2020%207%2020%209c2.7%200%202.7%204%200%204H4c-2.7%200-2.7-4%200-4c0-2%202-4%204.13-4c.44%201.73%202.01%203%203.87%203s3.43-1.27%203.87-3M5%2015h3l1%207H7zm5%200h4l-1%207h-2zm6%200h3l-2%207h-2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/cupcake.svg?color=%231a73e8&size=48
