cookie icon
cookie-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- cookie-fill
- Set
- MingCute Icon
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in MingCute Icon
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 Symbols LightcookieMaterial Design IconscookieMyna UI IconscookieNoto EmojicookieOpenMoji
Related icons in MingCute Icon
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 2c.632 0 1.204.2 1.593.73c.274.373.407.832.407 1.27a2 2 0 0 0 2.56 1.92C17.279 5.713 18 6.25 18 7a2 2 0 0 0 2 2c.696 0 1.725.413 1.889 1.505q.11.732.111 1.495c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2M9.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m6-2a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m-6-4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg>
React
import type { SVGProps } from "react";
export function MingcuteCookieFill(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 2c.632 0 1.204.2 1.593.73c.274.373.407.832.407 1.27a2 2 0 0 0 2.56 1.92C17.279 5.713 18 6.25 18 7a2 2 0 0 0 2 2c.696 0 1.725.413 1.889 1.505q.11.732.111 1.495c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2M9.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m6-2a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m-6-4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></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 2c.632 0 1.204.2 1.593.73c.274.373.407.832.407 1.27a2 2 0 0 0 2.56 1.92C17.279 5.713 18 6.25 18 7a2 2 0 0 0 2 2c.696 0 1.725.413 1.889 1.505q.11.732.111 1.495c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2M9.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m6-2a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m-6-4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg> </template>
CSS
.icon-cookie-fill {
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%202c.632%200%201.204.2%201.593.73c.274.373.407.832.407%201.27a2%202%200%200%200%202.56%201.92C17.279%205.713%2018%206.25%2018%207a2%202%200%200%200%202%202c.696%200%201.725.413%201.889%201.505q.11.732.111%201.495c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202M9.5%2014a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m6-2a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m-6-4a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3%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%202c.632%200%201.204.2%201.593.73c.274.373.407.832.407%201.27a2%202%200%200%200%202.56%201.92C17.279%205.713%2018%206.25%2018%207a2%202%200%200%200%202%202c.696%200%201.725.413%201.889%201.505q.11.732.111%201.495c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202M9.5%2014a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m6-2a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m-6-4a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/cookie-fill.svg?color=%231a73e8&size=48
