message sparkle icon
message-sparkle-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.
- Name
- message-sparkle-fill
- Set
- Keyline Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- MIT
7 other variants in Keyline Icons
Related icons in Keyline Icons
Use the message sparkle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 2C17.8553 2 23 5.8327 23 11C23 16.1673 17.8553 20 12 20C11.2351 20 10.4723 19.9337 9.7236 19.8047L5.4385 21.8984C5.1434 22.0425 4.7961 22.0329 4.5098 21.8721C4.2235 21.7112 4.0344 21.4197 4.0039 21.0928L3.6084 16.8252C1.9521 15.2269 1 13.1718 1 11C1 5.8327 6.1447 2 12 2ZM13.3787 6.9184C13.1423 6.3669 12.6 6.0093 12 6.0093C11.4 6.0093 10.8577 6.3669 10.6213 6.9184L9.8104 8.8104L7.9184 9.6213C7.3669 9.8577 7.0093 10.4 7.0093 11C7.0093 11.6 7.3669 12.1423 7.9184 12.3787L9.8104 13.1896L10.6213 15.0816C10.8577 15.6331 11.4 15.9907 12 15.9907C12.6 15.9907 13.1423 15.6331 13.3787 15.0816L14.1896 13.1896L16.0816 12.3787C16.6331 12.1423 16.9907 11.6 16.9907 11C16.9907 10.4 16.6331 9.8577 16.0816 9.6213L14.1896 8.8104L13.3787 6.9184Z" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function KeylineIconsMessageSparkleFill(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" fillRule="evenodd" d="M12 2C17.8553 2 23 5.8327 23 11C23 16.1673 17.8553 20 12 20C11.2351 20 10.4723 19.9337 9.7236 19.8047L5.4385 21.8984C5.1434 22.0425 4.7961 22.0329 4.5098 21.8721C4.2235 21.7112 4.0344 21.4197 4.0039 21.0928L3.6084 16.8252C1.9521 15.2269 1 13.1718 1 11C1 5.8327 6.1447 2 12 2ZM13.3787 6.9184C13.1423 6.3669 12.6 6.0093 12 6.0093C11.4 6.0093 10.8577 6.3669 10.6213 6.9184L9.8104 8.8104L7.9184 9.6213C7.3669 9.8577 7.0093 10.4 7.0093 11C7.0093 11.6 7.3669 12.1423 7.9184 12.3787L9.8104 13.1896L10.6213 15.0816C10.8577 15.6331 11.4 15.9907 12 15.9907C12.6 15.9907 13.1423 15.6331 13.3787 15.0816L14.1896 13.1896L16.0816 12.3787C16.6331 12.1423 16.9907 11.6 16.9907 11C16.9907 10.4 16.6331 9.8577 16.0816 9.6213L14.1896 8.8104L13.3787 6.9184Z" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 2C17.8553 2 23 5.8327 23 11C23 16.1673 17.8553 20 12 20C11.2351 20 10.4723 19.9337 9.7236 19.8047L5.4385 21.8984C5.1434 22.0425 4.7961 22.0329 4.5098 21.8721C4.2235 21.7112 4.0344 21.4197 4.0039 21.0928L3.6084 16.8252C1.9521 15.2269 1 13.1718 1 11C1 5.8327 6.1447 2 12 2ZM13.3787 6.9184C13.1423 6.3669 12.6 6.0093 12 6.0093C11.4 6.0093 10.8577 6.3669 10.6213 6.9184L9.8104 8.8104L7.9184 9.6213C7.3669 9.8577 7.0093 10.4 7.0093 11C7.0093 11.6 7.3669 12.1423 7.9184 12.3787L9.8104 13.1896L10.6213 15.0816C10.8577 15.6331 11.4 15.9907 12 15.9907C12.6 15.9907 13.1423 15.6331 13.3787 15.0816L14.1896 13.1896L16.0816 12.3787C16.6331 12.1423 16.9907 11.6 16.9907 11C16.9907 10.4 16.6331 9.8577 16.0816 9.6213L14.1896 8.8104L13.3787 6.9184Z" clip-rule="evenodd"/></svg> </template>
CSS
.icon-message-sparkle-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%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202C17.8553%202%2023%205.8327%2023%2011C23%2016.1673%2017.8553%2020%2012%2020C11.2351%2020%2010.4723%2019.9337%209.7236%2019.8047L5.4385%2021.8984C5.1434%2022.0425%204.7961%2022.0329%204.5098%2021.8721C4.2235%2021.7112%204.0344%2021.4197%204.0039%2021.0928L3.6084%2016.8252C1.9521%2015.2269%201%2013.1718%201%2011C1%205.8327%206.1447%202%2012%202ZM13.3787%206.9184C13.1423%206.3669%2012.6%206.0093%2012%206.0093C11.4%206.0093%2010.8577%206.3669%2010.6213%206.9184L9.8104%208.8104L7.9184%209.6213C7.3669%209.8577%207.0093%2010.4%207.0093%2011C7.0093%2011.6%207.3669%2012.1423%207.9184%2012.3787L9.8104%2013.1896L10.6213%2015.0816C10.8577%2015.6331%2011.4%2015.9907%2012%2015.9907C12.6%2015.9907%2013.1423%2015.6331%2013.3787%2015.0816L14.1896%2013.1896L16.0816%2012.3787C16.6331%2012.1423%2016.9907%2011.6%2016.9907%2011C16.9907%2010.4%2016.6331%209.8577%2016.0816%209.6213L14.1896%208.8104L13.3787%206.9184Z%22%20clip-rule%3D%22evenodd%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%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202C17.8553%202%2023%205.8327%2023%2011C23%2016.1673%2017.8553%2020%2012%2020C11.2351%2020%2010.4723%2019.9337%209.7236%2019.8047L5.4385%2021.8984C5.1434%2022.0425%204.7961%2022.0329%204.5098%2021.8721C4.2235%2021.7112%204.0344%2021.4197%204.0039%2021.0928L3.6084%2016.8252C1.9521%2015.2269%201%2013.1718%201%2011C1%205.8327%206.1447%202%2012%202ZM13.3787%206.9184C13.1423%206.3669%2012.6%206.0093%2012%206.0093C11.4%206.0093%2010.8577%206.3669%2010.6213%206.9184L9.8104%208.8104L7.9184%209.6213C7.3669%209.8577%207.0093%2010.4%207.0093%2011C7.0093%2011.6%207.3669%2012.1423%207.9184%2012.3787L9.8104%2013.1896L10.6213%2015.0816C10.8577%2015.6331%2011.4%2015.9907%2012%2015.9907C12.6%2015.9907%2013.1423%2015.6331%2013.3787%2015.0816L14.1896%2013.1896L16.0816%2012.3787C16.6331%2012.1423%2016.9907%2011.6%2016.9907%2011C16.9907%2010.4%2016.6331%209.8577%2016.0816%209.6213L14.1896%208.8104L13.3787%206.9184Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/message-sparkle-fill.svg?color=%231a73e8&size=48
