cookie icon
cookie from Material Symbols Light by Google · Regular · Social · Apache-2.0 Free for personal and commercial use.
- Name
- cookie
- Set
- Material Symbols Light
- Style
- Regular
- Category
- Social
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- cookie-sharp
3 other variants in Material Symbols Light
The same icon in other sets
cookieBootstrap IconscookieBoxIcons v2cookieBoxIcons v2 SolidcookieCarboncookieEmoji One (Colored)cookieFont Awesome 6 SolidcookieFont Awesome Solidcookie-outlineFlowbite IconscookieFluent EmojicookieFluent Emoji FlatcookieFluent Emoji High ContrastcookieFirefox OS EmojicookieHuge IconscookieIconoircookieLine AwesomecookieMaterial Line IconscookieLucidecookieMajesticonscookieMaterial SymbolscookieMaterial Design Iconscookie-fillMingCute IconcookieMyna UI IconscookieNoto EmojicookieOpenMoji
More social icons from Material Symbols Light
Use the cookie icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21.5q-1.971 0-3.705-.748t-3.016-2.03t-2.031-3.017T2.5 12q0-1.933.744-3.656t2.025-3.03t3-2.073t3.664-.766q.382 0 .782.03q.4.032.802.099q-.07 1.125.275 2.038q.347.914 1.02 1.557t1.633.96q.96.318 2.138.27q-.304 1.475.62 2.652t2.286 1.361l.008.119q.003.055.003.118q0 2.017-.752 3.8q-.752 1.784-2.041 3.125q-1.29 1.34-3.016 2.118q-1.728.778-3.691.778M10.51 9.808q.538 0 .918-.39t.38-.928t-.382-.918t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.927.39m-2 5q.539 0 .919-.39t.38-.927t-.382-.919t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.928.39m6.5 1q.338 0 .568-.24t.23-.577t-.232-.569q-.233-.23-.576-.23q-.329 0-.568.233t-.24.575q0 .329.24.568t.578.24"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightCookie(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 21.5q-1.971 0-3.705-.748t-3.016-2.03t-2.031-3.017T2.5 12q0-1.933.744-3.656t2.025-3.03t3-2.073t3.664-.766q.382 0 .782.03q.4.032.802.099q-.07 1.125.275 2.038q.347.914 1.02 1.557t1.633.96q.96.318 2.138.27q-.304 1.475.62 2.652t2.286 1.361l.008.119q.003.055.003.118q0 2.017-.752 3.8q-.752 1.784-2.041 3.125q-1.29 1.34-3.016 2.118q-1.728.778-3.691.778M10.51 9.808q.538 0 .918-.39t.38-.928t-.382-.918t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.927.39m-2 5q.539 0 .919-.39t.38-.927t-.382-.919t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.928.39m6.5 1q.338 0 .568-.24t.23-.577t-.232-.569q-.233-.23-.576-.23q-.329 0-.568.233t-.24.575q0 .329.24.568t.578.24"/></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 21.5q-1.971 0-3.705-.748t-3.016-2.03t-2.031-3.017T2.5 12q0-1.933.744-3.656t2.025-3.03t3-2.073t3.664-.766q.382 0 .782.03q.4.032.802.099q-.07 1.125.275 2.038q.347.914 1.02 1.557t1.633.96q.96.318 2.138.27q-.304 1.475.62 2.652t2.286 1.361l.008.119q.003.055.003.118q0 2.017-.752 3.8q-.752 1.784-2.041 3.125q-1.29 1.34-3.016 2.118q-1.728.778-3.691.778M10.51 9.808q.538 0 .918-.39t.38-.928t-.382-.918t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.927.39m-2 5q.539 0 .919-.39t.38-.927t-.382-.919t-.926-.38q-.529 0-.918.382t-.39.926q0 .529.39.918t.928.39m6.5 1q.338 0 .568-.24t.23-.577t-.232-.569q-.233-.23-.576-.23q-.329 0-.568.233t-.24.575q0 .329.24.568t.578.24"/></svg> </template>
CSS
.icon-cookie {
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%2021.5q-1.971%200-3.705-.748t-3.016-2.03t-2.031-3.017T2.5%2012q0-1.933.744-3.656t2.025-3.03t3-2.073t3.664-.766q.382%200%20.782.03q.4.032.802.099q-.07%201.125.275%202.038q.347.914%201.02%201.557t1.633.96q.96.318%202.138.27q-.304%201.475.62%202.652t2.286%201.361l.008.119q.003.055.003.118q0%202.017-.752%203.8q-.752%201.784-2.041%203.125q-1.29%201.34-3.016%202.118q-1.728.778-3.691.778M10.51%209.808q.538%200%20.918-.39t.38-.928t-.382-.918t-.926-.38q-.529%200-.918.382t-.39.926q0%20.529.39.918t.927.39m-2%205q.539%200%20.919-.39t.38-.927t-.382-.919t-.926-.38q-.529%200-.918.382t-.39.926q0%20.529.39.918t.928.39m6.5%201q.338%200%20.568-.24t.23-.577t-.232-.569q-.233-.23-.576-.23q-.329%200-.568.233t-.24.575q0%20.329.24.568t.578.24%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%2021.5q-1.971%200-3.705-.748t-3.016-2.03t-2.031-3.017T2.5%2012q0-1.933.744-3.656t2.025-3.03t3-2.073t3.664-.766q.382%200%20.782.03q.4.032.802.099q-.07%201.125.275%202.038q.347.914%201.02%201.557t1.633.96q.96.318%202.138.27q-.304%201.475.62%202.652t2.286%201.361l.008.119q.003.055.003.118q0%202.017-.752%203.8q-.752%201.784-2.041%203.125q-1.29%201.34-3.016%202.118q-1.728.778-3.691.778M10.51%209.808q.538%200%20.918-.39t.38-.928t-.382-.918t-.926-.38q-.529%200-.918.382t-.39.926q0%20.529.39.918t.927.39m-2%205q.539%200%20.919-.39t.38-.927t-.382-.919t-.926-.38q-.529%200-.918.382t-.39.926q0%20.529.39.918t.928.39m6.5%201q.338%200%20.568-.24t.23-.577t-.232-.569q-.233-.23-.576-.23q-.329%200-.568.233t-.24.575q0%20.329.24.568t.578.24%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/cookie.svg?color=%231a73e8&size=48
