Brain Sparkle icon

Use the Brain 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 { BrainSparkle24Regular, BrainSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_brain_sparkle_24_regular.svg" width="24" height="24" alt="Brain 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="M9.5 2C10.6822 2 11.7164 2.63146 12.2852 3.5752C12.1045 3.82998 12.0009 4.13905 12 4.46875C12.0017 5.00848 12.3016 5.55275 12.75 5.85938V18.25C12.75 19.4909 13.7615 20.5 15.0059 20.5C16.1641 20.4998 17.1471 19.5956 17.2529 18.4316C17.2883 18.0455 17.6122 17.75 18 17.75C19.3807 17.75 20.5 16.6307 20.5 15.25V14.25C20.5 13.9694 20.4643 13.6972 20.3975 13.4375C20.617 13.7924 20.9348 14.0498 21.46 14.0498C21.6664 14.0498 21.8395 14.0077 21.9883 13.9385C21.995 14.0415 22 14.1453 22 14.25V15.25C22 17.2437 20.5412 18.8958 18.6328 19.1992C18.2015 20.8129 16.7319 21.9998 15.0059 22C13.7782 22 12.686 21.4091 12 20.4961C11.314 21.4091 10.2218 22 8.99414 22C7.26809 21.9998 5.79853 20.8129 5.36719 19.1992C3.45883 18.8958 2 17.2437 2 15.25V15C2 13.4384 2.89526 12.0865 4.2002 11.4277C3.46102 10.7221 3 9.7276 3 8.625C3 6.68645 4.42349 5.08024 6.28223 4.79492C6.50358 3.21548 7.85955 2 9.5 2ZM9.5 3.5C8.5335 3.5 7.75 4.2835 7.75 5.25V5.5C7.75 5.91421 7.41421 6.25 7 6.25H6.875C5.56332 6.25 4.5 7.31332 4.5 8.625C4.5 9.93668 5.56332 11 6.875 11H7.25C7.66421 11 8 11.3358 8 11.75C8 12.1642 7.66421 12.5 7.25 12.5C6.83322 12.5 6.4169 12.5 6 12.5C4.61929 12.5 3.5 13.6193 3.5 15V15.25C3.5 16.6307 4.61929 17.75 6 17.75C6.38775 17.75 6.71175 18.0455 6.74707 18.4316C6.85289 19.5956 7.83586 20.4998 8.99414 20.5C10.2385 20.5 11.25 19.4909 11.25 18.25V5.25C11.25 4.2835 10.4665 3.5 9.5 3.5ZM21.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/brain_sparkle_24_regular.svg";

Details