Sparkle Circle Off icon

Use the Sparkle Circle Off 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 { SparkleCircleOff24Regular, SparkleCircleOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SparkleCircleOff24Regular aria-label="Sparkle Circle Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sparkle_circle_off_24_regular.svg" width="24" height="24" alt="Sparkle Circle Off">

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="M20.7197 2.21973C21.0126 1.92684 21.4874 1.92684 21.7803 2.21973C22.0732 2.51262 22.0732 2.98738 21.7803 3.28027L19.5791 5.48047C21.0865 7.23138 22 9.50834 22 12C22 17.5228 17.5228 22 12 22C9.50834 22 7.23138 21.0865 5.48047 19.5791L3.28027 21.7803C2.98737 22.073 2.51258 22.0731 2.21973 21.7803C1.92706 21.4874 1.92703 21.0126 2.21973 20.7197L20.7197 2.21973ZM6.54297 18.5166C8.01955 19.7543 9.92258 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 9.92258 19.7543 8.01955 18.5166 6.54297L6.54297 18.5166ZM14.0518 12.7051C14.3343 11.7645 15.6663 11.7653 15.9482 12.7061L16.1279 13.3037C16.21 13.5771 16.4239 13.7908 16.6973 13.873L17.2959 14.0527C18.2364 14.335 18.2363 15.6669 17.2959 15.9492L16.6973 16.1289C16.4237 16.2111 16.2099 16.4256 16.1279 16.6992L15.9492 17.2959C15.6673 18.2368 14.3342 18.2375 14.0518 17.2969L13.8721 16.6973C13.7898 16.4236 13.5756 16.2099 13.3018 16.1279L12.7061 15.9492C11.7651 15.6675 11.7645 14.3353 12.7051 14.0527L13.3027 13.873C13.5762 13.7909 13.7899 13.5772 13.8721 13.3037L14.0518 12.7051ZM12 2C13.9462 2 15.7615 2.55773 17.2979 3.51953L16.2041 4.61328C14.964 3.90599 13.5298 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 13.5298 3.90599 14.964 4.61328 16.2041L3.51953 17.2979C2.55773 15.7615 2 13.9462 2 12C2 6.47715 6.47715 2 12 2ZM8.55762 6.16699C8.87171 5.27836 10.1286 5.27769 10.4434 6.16602L10.9023 7.46094C11.0081 7.75925 11.2427 7.99386 11.541 8.09961L12.4102 8.40723L8.40723 12.4102L8.10059 11.541C7.99487 11.242 7.75999 11.0061 7.46094 10.9004L6.16699 10.4434C5.27813 10.1291 5.27816 8.87196 6.16699 8.55762L7.46094 8.09961C7.75988 7.99389 7.99486 7.75889 8.10059 7.45996L8.55762 6.16699Z" 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_off_24_regular.svg";

Details