Sparkle Action icon

Use the Sparkle Action 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 { SparkleAction24Regular, SparkleAction24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SparkleAction24Regular aria-label="Sparkle Action" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sparkle_action_24_regular.svg" width="24" height="24" alt="Sparkle Action">

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.7198 16.2198C13.0127 15.9269 13.4875 15.9269 13.7803 16.2198C14.0732 16.5126 14.0732 16.9874 13.7803 17.2803L10.2803 20.7803C9.98746 21.0732 9.51269 21.0732 9.21979 20.7803C8.9269 20.4874 8.9269 20.0126 9.21979 19.7198L12.7198 16.2198ZM5.21979 17.7198C5.51269 17.4269 5.98745 17.4269 6.28034 17.7198C6.57319 18.0126 6.5732 18.4874 6.28034 18.7803L4.78034 20.2803C4.48746 20.5732 4.01269 20.5732 3.71979 20.2803C3.4269 19.9874 3.4269 19.5126 3.71979 19.2198L5.21979 17.7198ZM19.0518 11.3633C19.1542 10.8792 19.8459 10.8792 19.9483 11.3633L20.1036 12.1397C20.2811 13.0262 20.9739 13.72 21.8604 13.8975L22.6368 14.0518C23.1063 14.1509 23.1205 14.8035 22.6798 14.9366L21.8604 15.1006C20.9739 15.2781 20.2811 15.9719 20.1036 16.8584L19.9483 17.6338L19.9268 17.6953C19.7896 18.0876 19.2656 18.0918 19.0948 17.7598L19.0665 17.6797L18.8995 16.8545C18.7203 15.9702 18.0275 15.2786 17.1426 15.1016L16.3633 14.9463C15.8941 14.8472 15.8794 14.1951 16.3194 14.0616L17.1387 13.8975C18.0255 13.7201 18.719 13.0264 18.8966 12.1397L19.0518 11.3633ZM10.7198 12.2198C11.0127 11.9269 11.4875 11.9269 11.7803 12.2198C12.0732 12.5126 12.0732 12.9874 11.7803 13.2803L8.28034 16.7803C7.98746 17.0732 7.51269 17.0732 7.21979 16.7803C6.9269 16.4874 6.9269 16.0126 7.21979 15.7198L10.7198 12.2198ZM7.21979 9.71976C7.51269 9.42688 7.98745 9.42687 8.28034 9.71976C8.57319 10.0126 8.5732 10.4874 8.28034 10.7803L4.28034 14.7803C3.98746 15.0732 3.51269 15.0732 3.21979 14.7803C2.9269 14.4874 2.9269 14.0126 3.21979 13.7198L7.21979 9.71976ZM13.796 1.57034C13.9571 0.809929 15.0431 0.809924 15.2042 1.57034L15.4473 2.79007C15.7262 4.18361 16.8165 5.27392 18.21 5.55276L19.4288 5.79593C20.167 5.95141 20.1897 6.97729 19.4971 7.18655L18.21 7.44437C16.8166 7.72313 15.7263 8.81264 15.4473 10.2061L15.2042 11.4248L15.171 11.5205C14.9557 12.1375 14.1319 12.145 13.8633 11.6231L13.8184 11.4971L13.5557 10.1992C13.2741 8.80953 12.1864 7.72357 10.796 7.44534L9.57135 7.2012C8.8337 7.0456 8.81032 6.02035 9.50202 5.81058L10.7901 5.55276C12.1837 5.27397 13.273 4.18373 13.5518 2.79007L13.796 1.57034Z" 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_action_24_regular.svg";

Details