Sparkle Circle icon
Used to represent new content, or smart feature scenarios. The Sparkle Circle icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Sparkle Circle icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { SparkleCircle24Regular, SparkleCircle24Filled } from "@fluentui/react-icons";
export function Example() {
return <SparkleCircle24Regular aria-label="Sparkle Circle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_sparkle_circle_24_regular.svg" width="24" height="24" alt="Sparkle Circle"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM8.55808 6.16675C8.87219 5.27806 10.1289 5.27764 10.4435 6.16614L10.902 7.46063C11.0078 7.75924 11.2427 7.99415 11.5414 8.09988L12.8349 8.55782C13.7233 8.87235 13.7232 10.1288 12.8348 10.4432L11.5415 10.9009C11.2428 11.0066 11.0078 11.2416 10.902 11.5402L10.4436 12.835C10.1289 13.7236 8.87212 13.7232 8.55805 12.8344L8.10101 11.541C7.99532 11.2419 7.76007 11.0066 7.46098 10.9009L6.16669 10.4433C5.27783 10.1291 5.27775 8.87205 6.16658 8.55771L7.46113 8.09988C7.76014 7.99414 7.99533 7.7589 8.10102 7.45988L8.55808 6.16675ZM15.9486 12.7058C15.6667 11.765 14.3346 11.7646 14.0521 12.7052L13.8724 13.3037C13.7902 13.5773 13.5762 13.7913 13.3026 13.8734L12.7055 14.0525C11.7645 14.3349 11.765 15.6676 12.7062 15.9492L13.3019 16.1275C13.5759 16.2095 13.7902 16.4237 13.8724 16.6975L14.0522 17.2966C14.3344 18.2374 15.6668 18.2371 15.9487 17.2962L16.1277 16.6989C16.2098 16.4251 16.424 16.2108 16.6977 16.1287L17.2957 15.9494C18.2364 15.6672 18.2364 14.335 17.2956 14.0528L16.6977 13.8735C16.4239 13.7914 16.2098 13.5772 16.1277 13.3033L15.9486 12.7058Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/sparkle_circle_24_regular.svg";Details
| Name | Sparkle Circle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_sparkle_circle_24_regular.svg |
| Filled file | ic_fluent_sparkle_circle_24_filled.svg |
| React components | SparkleCircle24Regular, SparkleCircle24Filled |
| License | MIT (© Microsoft Corporation) |