cooking icon
cooking from Material Symbols Light by Google · Regular · Household · Apache-2.0 Free for personal and commercial use.
- Name
- cooking
- Set
- Material Symbols Light
- Style
- Regular
- Category
- Household
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- cooking-sharp
3 other variants in Material Symbols Light
The same icon in other sets
cookingEmoji One (Colored)cookingFluent EmojicookingFluent Emoji FlatcookingFluent Emoji High ContrastcookingFirefox OS EmojicookingIconParkcookingIconPark OutlinecookingIconPark SolidcookingIconPark TwoTonecookingMaterial SymbolscookingNoto EmojicookingOpenMojicookingStreamline EmojiscookingTwitter Emoji
More household icons from Material Symbols Light
Use the cooking icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19.27v-1.886q0-.269-.173-.442t-.442-.173H3.5v-1h5.885q.666 0 1.14.475t.475 1.14v1.885zm3 0v-1.886q0-.666.475-1.14t1.14-.475H20.5v1h-5.884q-.27 0-.443.173t-.173.442v1.885zM6.5 14q-1.042 0-1.77-.73Q4 12.543 4 11.5V8.692h16V11.5q0 1.042-.73 1.77q-.728.73-1.77.73zM4 6.923v-1h5.5V5.5q0-.343.23-.575t.587-.233h3.366q.358 0 .587.233t.23.575v.423H20v1z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightCooking(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="M10 19.27v-1.886q0-.269-.173-.442t-.442-.173H3.5v-1h5.885q.666 0 1.14.475t.475 1.14v1.885zm3 0v-1.886q0-.666.475-1.14t1.14-.475H20.5v1h-5.884q-.27 0-.443.173t-.173.442v1.885zM6.5 14q-1.042 0-1.77-.73Q4 12.543 4 11.5V8.692h16V11.5q0 1.042-.73 1.77q-.728.73-1.77.73zM4 6.923v-1h5.5V5.5q0-.343.23-.575t.587-.233h3.366q.358 0 .587.233t.23.575v.423H20v1z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19.27v-1.886q0-.269-.173-.442t-.442-.173H3.5v-1h5.885q.666 0 1.14.475t.475 1.14v1.885zm3 0v-1.886q0-.666.475-1.14t1.14-.475H20.5v1h-5.884q-.27 0-.443.173t-.173.442v1.885zM6.5 14q-1.042 0-1.77-.73Q4 12.543 4 11.5V8.692h16V11.5q0 1.042-.73 1.77q-.728.73-1.77.73zM4 6.923v-1h5.5V5.5q0-.343.23-.575t.587-.233h3.366q.358 0 .587.233t.23.575v.423H20v1z"/></svg> </template>
CSS
.icon-cooking {
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%22M10%2019.27v-1.886q0-.269-.173-.442t-.442-.173H3.5v-1h5.885q.666%200%201.14.475t.475%201.14v1.885zm3%200v-1.886q0-.666.475-1.14t1.14-.475H20.5v1h-5.884q-.27%200-.443.173t-.173.442v1.885zM6.5%2014q-1.042%200-1.77-.73Q4%2012.543%204%2011.5V8.692h16V11.5q0%201.042-.73%201.77q-.728.73-1.77.73zM4%206.923v-1h5.5V5.5q0-.343.23-.575t.587-.233h3.366q.358%200%20.587.233t.23.575v.423H20v1z%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%22M10%2019.27v-1.886q0-.269-.173-.442t-.442-.173H3.5v-1h5.885q.666%200%201.14.475t.475%201.14v1.885zm3%200v-1.886q0-.666.475-1.14t1.14-.475H20.5v1h-5.884q-.27%200-.443.173t-.173.442v1.885zM6.5%2014q-1.042%200-1.77-.73Q4%2012.543%204%2011.5V8.692h16V11.5q0%201.042-.73%201.77q-.728.73-1.77.73zM4%206.923v-1h5.5V5.5q0-.343.23-.575t.587-.233h3.366q.358%200%20.587.233t.23.575v.423H20v1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/cooking.svg?color=%231a73e8&size=48
