cake icon
cake from Material Symbols by Google · Regular · Activities · Apache-2.0 Free for personal and commercial use.
- Name
- cake
- Set
- Material Symbols
- Style
- Regular
- Category
- Activities
- Viewbox
- 24×24
- License
- Apache 2.0
5 other variants in Material Symbols
The same icon in other sets
cakeAkar IconscakeBootstrap IconscakeBoxIcons v2cakeBoxIcons v2 SolidcakeDeviconcakeFont Awesome SolidcakeHeroIconscakeHuge IconscakeIconParkcakeIconPark OutlinecakeIconPark SolidcakeIconPark TwoTonecakeMaterial Line IconscakeLucidecakeMajesticonscakeMaterial Icon ThemecakeMaterial Symbols LightcakeMaterial Design Iconscake-fillMingCute IconcakeMyna UI IconscakeOpenMojicakePhosphorcakePixelarticonscake-fillRemix Icon
More activities icons from Material Symbols
Use the cake icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 22q-.425 0-.712-.288T3 21v-4q0-.825.588-1.412T5 15h14q.825 0 1.413.588T21 17v4q0 .425-.288.713T20 22zm1-9v-3q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662L12 2l1.4 1.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v3z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsCake(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="M4 22q-.425 0-.712-.288T3 21v-4q0-.825.588-1.412T5 15h14q.825 0 1.413.588T21 17v4q0 .425-.288.713T20 22zm1-9v-3q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662L12 2l1.4 1.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v3z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 22q-.425 0-.712-.288T3 21v-4q0-.825.588-1.412T5 15h14q.825 0 1.413.588T21 17v4q0 .425-.288.713T20 22zm1-9v-3q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662L12 2l1.4 1.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v3z"/></svg> </template>
CSS
.icon-cake {
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%22M4%2022q-.425%200-.712-.288T3%2021v-4q0-.825.588-1.412T5%2015h14q.825%200%201.413.588T21%2017v4q0%20.425-.288.713T20%2022zm1-9v-3q0-.825.588-1.412T7%208h4V6.55q-.45-.3-.725-.725T10%204.8q0-.375.15-.738t.45-.662L12%202l1.4%201.4q.3.3.45.662T14%204.8q0%20.6-.275%201.025T13%206.55V8h4q.825%200%201.413.587T19%2010v3z%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%22M4%2022q-.425%200-.712-.288T3%2021v-4q0-.825.588-1.412T5%2015h14q.825%200%201.413.588T21%2017v4q0%20.425-.288.713T20%2022zm1-9v-3q0-.825.588-1.412T7%208h4V6.55q-.45-.3-.725-.725T10%204.8q0-.375.15-.738t.45-.662L12%202l1.4%201.4q.3.3.45.662T14%204.8q0%20.6-.275%201.025T13%206.55V8h4q.825%200%201.413.587T19%2010v3z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/cake.svg?color=%231a73e8&size=48
