sparkles icon
sparkles-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.
- Name
- sparkles-solid
- Set
- HeroIcons
- Style
- Solid 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
The same icon in other sets
sparklesAkar IconssparklesEmoji One (Colored)sparklesFramework7 IconssparklesFluent EmojisparklesFluent Emoji FlatsparklesFluent Emoji High ContrastsparklesFirefox OS EmojisparklesHuge IconssparklesIonIconssparklesLucidesparklesMajesticonssparkles-fillMingCute IconsparklesMyna UI IconssparklesNoto EmojisparklesOpenMojisparklesPixelarticonssparklesPrime IconssparklesStreamline EmojissparklesTabler IconssparklesTwitter Emoji
Use the sparkles 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="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5m9-3a.75.75 0 0 1 .728.568l.258 1.036a2.63 2.63 0 0 0 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258a2.63 2.63 0 0 0-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.63 2.63 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.63 2.63 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5M16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395a1.5 1.5 0 0 0-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395a1.5 1.5 0 0 0 .948-.948l.395-1.183A.75.75 0 0 1 16.5 15" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function HeroiconsSparklesSolid(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="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5m9-3a.75.75 0 0 1 .728.568l.258 1.036a2.63 2.63 0 0 0 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258a2.63 2.63 0 0 0-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.63 2.63 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.63 2.63 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5M16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395a1.5 1.5 0 0 0-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395a1.5 1.5 0 0 0 .948-.948l.395-1.183A.75.75 0 0 1 16.5 15" 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="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5m9-3a.75.75 0 0 1 .728.568l.258 1.036a2.63 2.63 0 0 0 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258a2.63 2.63 0 0 0-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.63 2.63 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.63 2.63 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5M16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395a1.5 1.5 0 0 0-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395a1.5 1.5 0 0 0 .948-.948l.395-1.183A.75.75 0 0 1 16.5 15" clip-rule="evenodd"/></svg> </template>
CSS
.icon-sparkles-solid {
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%22M9%204.5a.75.75%200%200%201%20.721.544l.813%202.846a3.75%203.75%200%200%200%202.576%202.576l2.846.813a.75.75%200%200%201%200%201.442l-2.846.813a3.75%203.75%200%200%200-2.576%202.576l-.813%202.846a.75.75%200%200%201-1.442%200l-.813-2.846a3.75%203.75%200%200%200-2.576-2.576l-2.846-.813a.75.75%200%200%201%200-1.442l2.846-.813A3.75%203.75%200%200%200%207.466%207.89l.813-2.846A.75.75%200%200%201%209%204.5m9-3a.75.75%200%200%201%20.728.568l.258%201.036a2.63%202.63%200%200%200%201.91%201.91l1.036.258a.75.75%200%200%201%200%201.456l-1.036.258a2.63%202.63%200%200%200-1.91%201.91l-.258%201.036a.75.75%200%200%201-1.456%200l-.258-1.036a2.63%202.63%200%200%200-1.91-1.91l-1.036-.258a.75.75%200%200%201%200-1.456l1.036-.258a2.63%202.63%200%200%200%201.91-1.91l.258-1.036A.75.75%200%200%201%2018%201.5M16.5%2015a.75.75%200%200%201%20.712.513l.394%201.183c.15.447.5.799.948.948l1.183.395a.75.75%200%200%201%200%201.422l-1.183.395a1.5%201.5%200%200%200-.948.948l-.395%201.183a.75.75%200%200%201-1.422%200l-.395-1.183a1.5%201.5%200%200%200-.948-.948l-1.183-.395a.75.75%200%200%201%200-1.422l1.183-.395a1.5%201.5%200%200%200%20.948-.948l.395-1.183A.75.75%200%200%201%2016.5%2015%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%22M9%204.5a.75.75%200%200%201%20.721.544l.813%202.846a3.75%203.75%200%200%200%202.576%202.576l2.846.813a.75.75%200%200%201%200%201.442l-2.846.813a3.75%203.75%200%200%200-2.576%202.576l-.813%202.846a.75.75%200%200%201-1.442%200l-.813-2.846a3.75%203.75%200%200%200-2.576-2.576l-2.846-.813a.75.75%200%200%201%200-1.442l2.846-.813A3.75%203.75%200%200%200%207.466%207.89l.813-2.846A.75.75%200%200%201%209%204.5m9-3a.75.75%200%200%201%20.728.568l.258%201.036a2.63%202.63%200%200%200%201.91%201.91l1.036.258a.75.75%200%200%201%200%201.456l-1.036.258a2.63%202.63%200%200%200-1.91%201.91l-.258%201.036a.75.75%200%200%201-1.456%200l-.258-1.036a2.63%202.63%200%200%200-1.91-1.91l-1.036-.258a.75.75%200%200%201%200-1.456l1.036-.258a2.63%202.63%200%200%200%201.91-1.91l.258-1.036A.75.75%200%200%201%2018%201.5M16.5%2015a.75.75%200%200%201%20.712.513l.394%201.183c.15.447.5.799.948.948l1.183.395a.75.75%200%200%201%200%201.422l-1.183.395a1.5%201.5%200%200%200-.948.948l-.395%201.183a.75.75%200%200%201-1.422%200l-.395-1.183a1.5%201.5%200%200%200-.948-.948l-1.183-.395a.75.75%200%200%201%200-1.422l1.183-.395a1.5%201.5%200%200%200%20.948-.948l.395-1.183A.75.75%200%200%201%2016.5%2015%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/heroicons/sparkles-solid.svg?color=%231a73e8&size=48
