Sparkle Info icon

Use the Sparkle Info 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 { SparkleInfo24Regular, SparkleInfo24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.0829 12.0758C9.42311 11.6391 8.67903 11.3196 7.88028 11.1469L7.86632 11.1329C7.54951 10.815 7.16295 10.5753 6.73732 10.4329L4.98332 9.86389C4.6941 9.76573 4.44321 9.57887 4.26632 9.32989C4.13652 9.14741 4.05095 8.93724 4.01636 8.716C3.98176 8.49475 3.9991 8.2685 4.067 8.05511C4.1349 7.84172 4.25149 7.64704 4.40757 7.48647C4.56365 7.32589 4.75494 7.20382 4.96632 7.12989L6.74332 6.55889C7.1543 6.4146 7.52715 6.17888 7.83376 5.8695C8.14037 5.56012 8.37273 5.18515 8.51332 4.77289L9.09632 2.98089C9.19255 2.69628 9.37504 2.44871 9.61844 2.27258C9.86184 2.09645 10.1541 2.00051 10.4545 1.99809C10.7549 1.99567 11.0486 2.0869 11.2949 2.25908C11.5411 2.43127 11.7275 2.67586 11.8283 2.95889L12.4063 4.73589C12.5473 5.1605 12.7855 5.54637 13.1018 5.86283C13.418 6.1793 13.8038 6.41763 14.2283 6.55889L15.9833 7.12889C16.2733 7.21858 16.5277 7.39744 16.7102 7.64003C16.8926 7.88262 16.994 8.17659 16.9997 8.48009C17.0055 8.7836 16.9154 9.0812 16.7422 9.33054C16.5691 9.57988 16.3217 9.76826 16.0353 9.86889L14.2573 10.4469C13.8347 10.5873 13.4505 10.8241 13.1351 11.1386C12.8198 11.4531 12.5819 11.8366 12.4403 12.2589L11.9047 13.8877C11.5821 13.4061 11.197 12.97 10.7608 12.5911L11.0203 11.7939C11.2349 11.1474 11.5975 10.56 12.079 10.0782C12.5606 9.59648 13.1479 9.23375 13.7943 9.01889L15.3833 8.50389L13.7643 7.98189C13.1167 7.76837 12.528 7.40643 12.0452 6.92497C11.5623 6.44351 11.1987 5.85585 10.9833 5.20889L10.4673 3.62189L9.95232 5.20389C9.73949 5.84487 9.38349 6.42897 8.91132 6.91189C8.43708 7.39176 7.85885 7.75615 7.22132 7.97689L5.61032 8.50089L7.21032 9.00889C7.8585 9.22466 8.44744 9.58864 8.93032 10.0719H8.92732C9.05754 10.2012 9.17882 10.3392 9.29032 10.4849C9.59634 10.8772 9.83308 11.3189 9.99032 11.7909L10.0829 12.0758ZM17.331 19.7819C17.1405 19.6461 16.9971 19.4541 16.921 19.2329L16.593 18.2259C16.5292 18.0344 16.4221 17.8602 16.28 17.7169C16.1375 17.574 15.9635 17.4664 15.772 17.4029L14.781 17.0799C14.5506 17.0026 14.3507 16.8541 14.21 16.6559C14.0727 16.4636 13.9993 16.2331 14 15.9969C14.0003 15.7591 14.0748 15.5274 14.213 15.3339C14.3503 15.1394 14.5456 14.9934 14.771 14.9169L15.777 14.5909C15.964 14.5245 16.1333 14.4162 16.272 14.2742C16.4107 14.1322 16.515 13.9604 16.577 13.7719L16.901 12.7799C16.9772 12.5557 17.1212 12.3606 17.3131 12.2218C17.505 12.0829 17.7352 12.0071 17.9721 12.0048C18.2089 12.0025 18.4406 12.0738 18.6351 12.2089C18.8297 12.344 18.9774 12.5362 19.058 12.7589L19.387 13.7729C19.4514 13.963 19.559 14.1356 19.7012 14.2771C19.8435 14.4187 20.0166 14.5254 20.207 14.5889L21.199 14.9119C21.4277 14.9834 21.628 15.1251 21.7717 15.3169C21.9153 15.5086 21.9949 15.7408 21.9992 15.9803C22.0036 16.2199 21.9324 16.4547 21.7957 16.6516C21.6591 16.8484 21.464 16.9972 21.238 17.0769L20.224 17.4059C20.0339 17.4707 19.8612 17.5781 19.719 17.7199C19.5767 17.8627 19.4695 18.0366 19.406 18.2279L19.084 19.2169C19.0065 19.4472 18.8576 19.6469 18.659 19.7869C18.467 19.9249 18.2365 19.9991 18 19.9989C17.7597 19.9989 17.5256 19.9229 17.331 19.7819ZM16.3004 15.999C16.6934 16.1386 17.0501 16.3646 17.3442 16.6602C17.6384 16.956 17.8625 17.314 18 17.7079C18.1389 17.3158 18.3636 16.9597 18.6577 16.6656C18.9518 16.3715 19.3079 16.1468 19.7 16.0079C19.3016 15.8685 18.9396 15.6412 18.641 15.3429C18.3459 15.049 18.1207 14.6926 17.982 14.2999C17.8439 14.6898 17.6213 15.0444 17.3302 15.3383C17.0397 15.6316 16.6881 15.8572 16.3004 15.999ZM6.5 16.5C7.05228 16.5 7.5 16.0523 7.5 15.5C7.5 14.9477 7.05228 14.5 6.5 14.5C5.94772 14.5 5.5 14.9477 5.5 15.5C5.5 16.0523 5.94772 16.5 6.5 16.5ZM6.5 17.25C6.91421 17.25 7.25 17.5858 7.25 18V19.75C7.25 20.1642 6.91421 20.5 6.5 20.5C6.08579 20.5 5.75 20.1642 5.75 19.75V18C5.75 17.5858 6.08579 17.25 6.5 17.25ZM6.5 23C9.53757 23 12 20.5376 12 17.5C12 14.4624 9.53757 12 6.5 12C3.46243 12 1 14.4624 1 17.5C1 20.5376 3.46243 23 6.5 23ZM6.5 21.5C4.29086 21.5 2.5 19.7091 2.5 17.5C2.5 15.2909 4.29086 13.5 6.5 13.5C8.70914 13.5 10.5 15.2909 10.5 17.5C10.5 19.7091 8.70914 21.5 6.5 21.5Z" 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_info_24_regular.svg";

Details