cake icon
cake-outline-rounded from Material Symbols by Google · Outline Rounded · Activities · Apache-2.0 Free for personal and commercial use.
- Name
- cake-outline-rounded
- Set
- Material Symbols
- Style
- Outline Rounded
- 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-5q0-.825.588-1.412T5 14v-4q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662l1.05-1.05q.05-.05.35-.15q.05 0 .35.15L13.4 3.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v4q.825 0 1.413.588T21 16v5q0 .425-.288.713T20 22zm3-8h10v-4H7zm-2 6h14v-4H5zm2-6h10zm-2 6h14zm14-6H5z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsCakeOutlineRounded(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-5q0-.825.588-1.412T5 14v-4q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662l1.05-1.05q.05-.05.35-.15q.05 0 .35.15L13.4 3.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v4q.825 0 1.413.588T21 16v5q0 .425-.288.713T20 22zm3-8h10v-4H7zm-2 6h14v-4H5zm2-6h10zm-2 6h14zm14-6H5z"/></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-5q0-.825.588-1.412T5 14v-4q0-.825.588-1.412T7 8h4V6.55q-.45-.3-.725-.725T10 4.8q0-.375.15-.738t.45-.662l1.05-1.05q.05-.05.35-.15q.05 0 .35.15L13.4 3.4q.3.3.45.662T14 4.8q0 .6-.275 1.025T13 6.55V8h4q.825 0 1.413.587T19 10v4q.825 0 1.413.588T21 16v5q0 .425-.288.713T20 22zm3-8h10v-4H7zm-2 6h14v-4H5zm2-6h10zm-2 6h14zm14-6H5z"/></svg> </template>
CSS
.icon-cake-outline-rounded {
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-5q0-.825.588-1.412T5%2014v-4q0-.825.588-1.412T7%208h4V6.55q-.45-.3-.725-.725T10%204.8q0-.375.15-.738t.45-.662l1.05-1.05q.05-.05.35-.15q.05%200%20.35.15L13.4%203.4q.3.3.45.662T14%204.8q0%20.6-.275%201.025T13%206.55V8h4q.825%200%201.413.587T19%2010v4q.825%200%201.413.588T21%2016v5q0%20.425-.288.713T20%2022zm3-8h10v-4H7zm-2%206h14v-4H5zm2-6h10zm-2%206h14zm14-6H5z%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-5q0-.825.588-1.412T5%2014v-4q0-.825.588-1.412T7%208h4V6.55q-.45-.3-.725-.725T10%204.8q0-.375.15-.738t.45-.662l1.05-1.05q.05-.05.35-.15q.05%200%20.35.15L13.4%203.4q.3.3.45.662T14%204.8q0%20.6-.275%201.025T13%206.55V8h4q.825%200%201.413.587T19%2010v4q.825%200%201.413.588T21%2016v5q0%20.425-.288.713T20%2022zm3-8h10v-4H7zm-2%206h14v-4H5zm2-6h10zm-2%206h14zm14-6H5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/cake-outline-rounded.svg?color=%231a73e8&size=48
