Lightbulb Sparkle icon

Use the Lightbulb 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 { LightbulbSparkle24Regular, LightbulbSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_lightbulb_sparkle_24_regular.svg" width="24" height="24" alt="Lightbulb 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="M12 2.00098C12.383 2.00098 12.759 2.03067 13.126 2.08789C12.9227 2.29978 12.6696 2.46465 12.3897 2.55859L11.0498 2.99902C10.6459 3.14316 10.3264 3.43647 10.1504 3.80566C7.94855 4.55333 6.34569 6.59813 6.25391 9.03027C6.22024 10.9324 7.11563 12.6041 8.46289 13.9199C8.72684 14.1778 8.92263 14.4959 9.03418 14.8457L9.08301 15.0234L9.53809 16.999H14.4609L14.9189 15.0225C15.002 14.6633 15.1716 14.3307 15.4121 14.0537L15.5381 13.9199C16.2218 13.2518 16.7425 12.5629 17.1074 11.8525C17.4599 11.9421 17.8682 12.0568 17.9805 12.3994C18.0429 12.597 18.1069 12.8035 18.1846 13.001C17.7706 13.6912 17.2384 14.3565 16.5869 14.9932C16.5102 15.0682 16.4507 15.1585 16.4121 15.2578L16.3799 15.3604L15.249 20.2559C15.0263 21.2197 14.2036 21.9185 13.2305 21.9932L13.0566 22H10.9434C9.95384 22 9.08752 21.3545 8.7959 20.4229L8.75098 20.2559L7.6211 15.3604C7.58881 15.2208 7.51744 15.0933 7.41504 14.9932C5.77383 13.3903 4.71614 11.3253 4.75391 9.01172C4.88017 5.11843 8.07602 2.00098 12 2.00098ZM10.2129 19.918C10.2836 20.2242 10.5356 20.45 10.8398 20.4922L10.9434 20.5H13.0566C13.3708 20.5 13.6483 20.3045 13.7578 20.0176L13.7881 19.918L14.1152 18.499H9.88379L10.2129 19.918ZM19.4844 8C19.5469 8 19.6081 8.01957 19.6592 8.05566C19.7101 8.09167 19.7487 8.14242 19.7695 8.20117L20.0186 8.9668C20.0959 9.19921 20.2271 9.41079 20.4004 9.58398C20.5737 9.75703 20.7851 9.88761 21.0176 9.96484L21.7832 10.2129L21.7979 10.2168C21.8568 10.2376 21.9082 10.2762 21.9443 10.3271C21.9805 10.3782 22 10.4394 22 10.502C22 10.5645 21.9805 10.6257 21.9443 10.6768C21.9082 10.7276 21.8567 10.7664 21.7979 10.7871L21.0332 11.0352C20.8006 11.1124 20.5884 11.2428 20.415 11.416C20.2417 11.5892 20.1116 11.8008 20.0342 12.0332L19.7852 12.7988C19.7643 12.8575 19.7257 12.9083 19.6748 12.9443C19.6237 12.9804 19.5626 13 19.5 13C19.4374 13 19.3763 12.9804 19.3252 12.9443C19.2743 12.9083 19.2357 12.8575 19.2148 12.7988L18.9658 12.0332C18.889 11.8002 18.7592 11.5879 18.5859 11.4141C18.4125 11.2401 18.1999 11.1089 17.9668 11.0312L17.2022 10.7832C17.1432 10.7624 17.0918 10.7238 17.0557 10.6729C17.0195 10.6218 17 10.5606 17 10.498C17 10.4355 17.0195 10.3743 17.0557 10.3232C17.0918 10.2724 17.1433 10.2337 17.2022 10.2129L17.9668 9.96484C18.1966 9.88555 18.4056 9.75415 18.5762 9.58105C18.7468 9.40795 18.8754 9.19762 18.9512 8.9668L19.1992 8.20117C19.22 8.14249 19.2588 8.0917 19.3096 8.05566C19.3606 8.01962 19.4219 8.00006 19.4844 8ZM15.4727 0C15.5852 4.37205e-05 15.6952 0.0346543 15.7871 0.0996094C15.879 0.164603 15.9479 0.257194 15.9854 0.363281L16.4336 1.73926C16.5728 2.15781 16.808 2.5387 17.1201 2.85059C17.4322 3.16235 17.8127 3.39703 18.2314 3.53613L19.6094 3.9834L19.6367 3.99023C19.7429 4.02767 19.8353 4.0976 19.9004 4.18945C19.9653 4.28125 20 4.39149 20 4.50391C19.9999 4.61615 19.9652 4.72572 19.9004 4.81738C19.8353 4.90923 19.7429 4.97917 19.6367 5.0166L18.2588 5.46387C17.8401 5.603 17.4595 5.83765 17.1475 6.14941C16.8353 6.4613 16.6002 6.84219 16.4609 7.26074L16.0137 8.63672C16.0096 8.64816 16.0048 8.65981 16 8.6709C15.9605 8.7627 15.8965 8.84241 15.8145 8.90039C15.7225 8.96535 15.6126 9 15.5 9C15.3874 9 15.2775 8.96535 15.1855 8.90039C15.0936 8.83539 15.0238 8.74283 14.9863 8.63672L14.5391 7.26074C14.4379 6.95368 14.2848 6.66647 14.0879 6.41211C14.0157 6.3188 13.9373 6.22953 13.8535 6.14551C13.5415 5.83257 13.1606 5.59683 12.7412 5.45703L11.3633 5.00977C11.2571 4.97233 11.1647 4.9024 11.0996 4.81055C11.0347 4.71875 11 4.60851 11 4.49609C11.0001 4.38386 11.0348 4.27428 11.0996 4.18262C11.1647 4.09077 11.2571 4.02083 11.3633 3.9834L12.7412 3.53613C13.1548 3.39339 13.5299 3.15721 13.8369 2.8457C14.1356 2.54257 14.3623 2.17566 14.5 1.77344L14.5117 1.73926L14.959 0.363281C14.9965 0.257169 15.0663 0.164605 15.1582 0.0996094C15.2501 0.0347125 15.3601 0 15.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/lightbulb_sparkle_24_regular.svg";

Details