Target Sparkle icon

Use the Target Sparkle 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 { TargetSparkle24Regular, TargetSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.998 1.99805C12.9552 1.99805 13.8804 2.13471 14.7568 2.38574C14.6414 2.45644 14.5185 2.51537 14.3896 2.55859L13.0498 2.99902C12.7631 3.10136 12.5194 3.27935 12.3389 3.50586C12.2258 3.50141 12.1122 3.49805 11.998 3.49805C7.30253 3.49813 3.49609 7.30447 3.49609 12C3.49615 16.6955 7.30257 20.5019 11.998 20.502C16.2127 20.502 19.7084 17.4348 20.3809 13.4111C20.6009 13.7798 20.9218 14.0498 21.46 14.0498C21.5837 14.0498 21.6958 14.035 21.7979 14.0088C20.8678 18.5699 16.8339 22.002 11.998 22.002C6.47414 22.0019 1.99615 17.5239 1.99609 12C1.99609 6.47604 6.47411 1.99813 11.998 1.99805ZM11.998 6C13.1474 6 14.2213 6.32334 15.1338 6.88379C15.3394 7.06703 15.5036 7.29167 15.5898 7.54883L16 8.99902C16.2128 9.62182 16.8014 10.0468 17.46 10.0488C17.5295 10.0497 17.5985 10.0432 17.667 10.0342C17.8806 10.6502 17.998 11.3113 17.998 12C17.998 15.3137 15.3117 18 11.998 18C8.68443 17.9999 5.9981 15.3136 5.99805 12C5.99805 8.68633 8.68439 6.00007 11.998 6ZM11.998 7.5C9.51282 7.50007 7.49805 9.51476 7.49805 12C7.4981 14.4852 9.51285 16.4999 11.998 16.5C14.4833 16.5 16.498 14.4852 16.498 12C16.498 9.51472 14.4833 7.5 11.998 7.5ZM11.998 10C13.1026 10 13.998 10.8954 13.998 12C13.998 13.1045 13.1026 14 11.998 14C10.8936 13.9999 9.9981 13.1045 9.99805 12C9.99805 10.8955 10.8935 10.0001 11.998 10ZM21.4844 8C21.5469 8 21.6081 8.01957 21.6592 8.05566C21.7101 8.09167 21.7487 8.14242 21.7695 8.20117L22.0186 8.9668C22.0959 9.19921 22.2271 9.41079 22.4004 9.58398C22.5737 9.75703 22.7851 9.88761 23.0176 9.96484L23.7832 10.2129L23.7979 10.2168C23.8568 10.2376 23.9082 10.2762 23.9443 10.3271C23.9805 10.3782 24 10.4394 24 10.502C24 10.5645 23.9805 10.6257 23.9443 10.6768C23.9082 10.7276 23.8567 10.7664 23.7979 10.7871L23.0332 11.0352C22.8005 11.1124 22.5884 11.2428 22.415 11.416C22.2417 11.5892 22.1116 11.8008 22.0342 12.0332L21.7852 12.7988C21.7643 12.8575 21.7257 12.9083 21.6748 12.9443C21.6237 12.9804 21.5626 13 21.5 13C21.4374 13 21.3763 12.9804 21.3252 12.9443C21.2743 12.9083 21.2357 12.8575 21.2148 12.7988L20.9658 12.0332C20.889 11.8002 20.7592 11.5879 20.5859 11.4141C20.4125 11.2401 20.1999 11.1089 19.9668 11.0312L19.2021 10.7832C19.1432 10.7624 19.0918 10.7238 19.0557 10.6729C19.0195 10.6218 19 10.5606 19 10.498C19 10.4355 19.0195 10.3743 19.0557 10.3232C19.0918 10.2724 19.1433 10.2337 19.2021 10.2129L19.9668 9.96484C20.1966 9.88555 20.4056 9.75415 20.5762 9.58105C20.7468 9.40795 20.8753 9.19762 20.9512 8.9668L21.1992 8.20117C21.22 8.14249 21.2588 8.0917 21.3096 8.05566C21.3606 8.01962 21.4219 8.00006 21.4844 8ZM17.4727 0C17.5852 4.37205e-05 17.6952 0.0346543 17.7871 0.0996094C17.879 0.164603 17.9479 0.257194 17.9854 0.363281L18.4336 1.73926C18.5728 2.15781 18.808 2.5387 19.1201 2.85059C19.4322 3.16235 19.8127 3.39703 20.2314 3.53613L21.6094 3.9834L21.6367 3.99023C21.7429 4.02767 21.8353 4.0976 21.9004 4.18945C21.9653 4.28125 22 4.39149 22 4.50391C21.9999 4.61615 21.9652 4.72572 21.9004 4.81738C21.8353 4.90923 21.7429 4.97917 21.6367 5.0166L20.2588 5.46387C19.8401 5.603 19.4595 5.83765 19.1475 6.14941C18.8353 6.4613 18.6002 6.84219 18.4609 7.26074L18.0137 8.63672C18.0096 8.64816 18.0048 8.65981 18 8.6709C17.9605 8.7627 17.8965 8.84241 17.8145 8.90039C17.7225 8.96535 17.6126 9 17.5 9C17.3874 9 17.2775 8.96535 17.1855 8.90039C17.0936 8.83539 17.0238 8.74283 16.9863 8.63672L16.5391 7.26074C16.4379 6.95368 16.2848 6.66647 16.0879 6.41211C16.0157 6.3188 15.9373 6.22953 15.8535 6.14551C15.5415 5.83257 15.1606 5.59683 14.7412 5.45703L13.3633 5.00977C13.2571 4.97233 13.1647 4.9024 13.0996 4.81055C13.0347 4.71875 13 4.60851 13 4.49609C13.0001 4.38386 13.0348 4.27428 13.0996 4.18262C13.1647 4.09077 13.2571 4.02083 13.3633 3.9834L14.7412 3.53613C15.1548 3.39339 15.5299 3.15721 15.8369 2.8457C16.1356 2.54257 16.3623 2.17566 16.5 1.77344L16.5117 1.73926L16.959 0.363281C16.9964 0.257169 17.0663 0.164605 17.1582 0.0996094C17.2501 0.0347125 17.3601 0 17.4727 0Z" 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/target_sparkle_24_regular.svg";

Details