sparkle icon
sparkle-28-filled from Fluent UI System Icons by Microsoft Corporation · 28 Filled · MIT Free for personal and commercial use.
- Name
- sparkle-28-filled
- Set
- Fluent UI System Icons
- Style
- 28 Filled
- Viewbox
- 28×28
- License
- MIT
13 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
Use the sparkle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m9.744 6.08a1.2 1.2 0 0 0 .696.22a1.2 1.2 0 0 0 .692-.217a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582"/></svg>
React
import type { SVGProps } from "react";
export function FluentSparkle28Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m9.744 6.08a1.2 1.2 0 0 0 .696.22a1.2 1.2 0 0 0 .692-.217a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m9.744 6.08a1.2 1.2 0 0 0 .696.22a1.2 1.2 0 0 0 .692-.217a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582"/></svg> </template>
CSS
.icon-sparkle-28-filled {
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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.06%2018.701a1.628%201.628%200%200%200%202.43-.676l.77-2.34a3.82%203.82%200%200%201%202.416-2.418l2.238-.727a1.6%201.6%200%200%200%20.786-.595a1.62%201.62%200%200%200-.849-2.489l-2.215-.72a3.82%203.82%200%200%201-2.42-2.414l-.727-2.237a1.62%201.62%200%200%200-.594-.785a1.655%201.655%200%200%200-1.879%200a1.63%201.63%200%200%200-.6.8L8.68%206.365a3.82%203.82%200%200%201-2.359%202.37l-2.24.726a1.626%201.626%200%200%200%20.02%203.073l2.216.72a3.86%203.86%200%200%201%201.816%201.286c.266.343.471.728.606%201.14l.728%202.234c.112.318.32.593.595.787m9.744%206.08a1.2%201.2%200%200%200%20.696.22a1.2%201.2%200%200%200%20.692-.217a1.2%201.2%200%200%200%20.446-.6l.372-1.143a1.61%201.61%200%200%201%201.017-1.02l1.166-.378A1.21%201.21%200%200%200%2025%2020.505a1.2%201.2%200%200%200-.844-1.146l-1.144-.37a1.61%201.61%200%200%201-1.02-1.018l-.38-1.163a1.2%201.2%200%200%200-2.274.016l-.374%201.146a1.61%201.61%200%200%201-.993%201.017l-1.166.378a1.21%201.21%200%200%200-.807%201.139a1.2%201.2%200%200%200%20.823%201.138l1.144.372a1.6%201.6%200%200%201%201.02%201.023l.379%201.163a1.2%201.2%200%200%200%20.44.582%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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.06%2018.701a1.628%201.628%200%200%200%202.43-.676l.77-2.34a3.82%203.82%200%200%201%202.416-2.418l2.238-.727a1.6%201.6%200%200%200%20.786-.595a1.62%201.62%200%200%200-.849-2.489l-2.215-.72a3.82%203.82%200%200%201-2.42-2.414l-.727-2.237a1.62%201.62%200%200%200-.594-.785a1.655%201.655%200%200%200-1.879%200a1.63%201.63%200%200%200-.6.8L8.68%206.365a3.82%203.82%200%200%201-2.359%202.37l-2.24.726a1.626%201.626%200%200%200%20.02%203.073l2.216.72a3.86%203.86%200%200%201%201.816%201.286c.266.343.471.728.606%201.14l.728%202.234c.112.318.32.593.595.787m9.744%206.08a1.2%201.2%200%200%200%20.696.22a1.2%201.2%200%200%200%20.692-.217a1.2%201.2%200%200%200%20.446-.6l.372-1.143a1.61%201.61%200%200%201%201.017-1.02l1.166-.378A1.21%201.21%200%200%200%2025%2020.505a1.2%201.2%200%200%200-.844-1.146l-1.144-.37a1.61%201.61%200%200%201-1.02-1.018l-.38-1.163a1.2%201.2%200%200%200-2.274.016l-.374%201.146a1.61%201.61%200%200%201-.993%201.017l-1.166.378a1.21%201.21%200%200%200-.807%201.139a1.2%201.2%200%200%200%20.823%201.138l1.144.372a1.6%201.6%200%200%201%201.02%201.023l.379%201.163a1.2%201.2%200%200%200%20.44.582%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/sparkle-28-filled.svg?color=%231a73e8&size=48
