Search Sparkle icon

Use the Search 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 { SearchSparkle24Regular, SearchSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_search_sparkle_24_regular.svg" width="24" height="24" alt="Search 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.86426 3.08105C9.34259 3.34449 9.00168 3.87291 9 4.4707C9.00034 4.5815 9.01394 4.69263 9.03809 4.80176C6.40719 5.63374 4.5 8.09396 4.5 11C4.5 14.5899 7.41015 17.5 11 17.5C13.8915 17.5 16.3406 15.6115 17.1846 13.001C17.3987 13.5463 17.7164 14.0209 18.3984 14.0479C18.0898 14.7963 17.671 15.4875 17.1621 16.1016L21.7803 20.7197C22.0731 21.0126 22.0731 21.4874 21.7803 21.7803C21.4874 22.0732 21.0126 22.0732 20.7197 21.7803L16.1016 17.1621C14.7168 18.3098 12.9391 19 11 19C6.58172 19 3 15.4183 3 11C3 6.96733 5.98395 3.6326 9.86426 3.08105ZM18.4844 8C18.5469 8 18.6081 8.01957 18.6592 8.05566C18.7101 8.09167 18.7487 8.14242 18.7695 8.20117L19.0186 8.9668C19.0959 9.19921 19.2271 9.41079 19.4004 9.58398C19.5737 9.75703 19.7851 9.88761 20.0176 9.96484L20.7832 10.2129L20.7979 10.2168C20.8568 10.2376 20.9082 10.2762 20.9443 10.3271C20.9805 10.3782 21 10.4394 21 10.502C21 10.5645 20.9805 10.6257 20.9443 10.6768C20.9082 10.7276 20.8567 10.7664 20.7979 10.7871L20.0332 11.0352C19.8005 11.1124 19.5884 11.2428 19.415 11.416C19.2417 11.5892 19.1116 11.8008 19.0342 12.0332L18.7852 12.7988C18.7643 12.8575 18.7257 12.9083 18.6748 12.9443C18.6237 12.9804 18.5626 13 18.5 13C18.4374 13 18.3763 12.9804 18.3252 12.9443C18.2743 12.9083 18.2357 12.8575 18.2148 12.7988L17.9658 12.0332C17.889 11.8002 17.7592 11.5879 17.5859 11.4141C17.4125 11.2401 17.1999 11.1089 16.9668 11.0312L16.2021 10.7832C16.1432 10.7624 16.0918 10.7238 16.0557 10.6729C16.0195 10.6218 16 10.5606 16 10.498C16 10.4355 16.0195 10.3743 16.0557 10.3232C16.0918 10.2724 16.1433 10.2337 16.2021 10.2129L16.9668 9.96484C17.1966 9.88555 17.4056 9.75415 17.5762 9.58105C17.7468 9.40795 17.8753 9.19762 17.9512 8.9668L18.1992 8.20117C18.22 8.14249 18.2588 8.0917 18.3096 8.05566C18.3606 8.01962 18.4219 8.00006 18.4844 8ZM14.4727 0C14.5852 4.37205e-05 14.6952 0.0346543 14.7871 0.0996094C14.879 0.164603 14.9479 0.257194 14.9854 0.363281L15.4336 1.73926C15.5728 2.15781 15.808 2.5387 16.1201 2.85059C16.4322 3.16235 16.8127 3.39703 17.2314 3.53613L18.6094 3.9834L18.6367 3.99023C18.7429 4.02767 18.8353 4.0976 18.9004 4.18945C18.9653 4.28125 19 4.39149 19 4.50391C18.9999 4.61615 18.9652 4.72572 18.9004 4.81738C18.8353 4.90923 18.7429 4.97917 18.6367 5.0166L17.2588 5.46387C16.8401 5.603 16.4595 5.83765 16.1475 6.14941C15.8353 6.4613 15.6002 6.84219 15.4609 7.26074L15.0137 8.63672C15.0096 8.64816 15.0048 8.65981 15 8.6709C14.9605 8.7627 14.8965 8.84241 14.8145 8.90039C14.7225 8.96535 14.6126 9 14.5 9C14.3874 9 14.2775 8.96535 14.1855 8.90039C14.0936 8.83539 14.0238 8.74283 13.9863 8.63672L13.5391 7.26074C13.4379 6.95368 13.2848 6.66647 13.0879 6.41211C13.0157 6.3188 12.9373 6.22953 12.8535 6.14551C12.5415 5.83257 12.1606 5.59683 11.7412 5.45703L10.3633 5.00977C10.2571 4.97233 10.1647 4.9024 10.0996 4.81055C10.0347 4.71875 10 4.60851 10 4.49609C10.0001 4.38386 10.0348 4.27428 10.0996 4.18262C10.1647 4.09077 10.2571 4.02083 10.3633 3.9834L11.7412 3.53613C12.1548 3.39339 12.5299 3.15721 12.8369 2.8457C13.1356 2.54257 13.3623 2.17566 13.5 1.77344L13.5117 1.73926L13.959 0.363281C13.9964 0.257169 14.0663 0.164605 14.1582 0.0996094C14.2501 0.0347125 14.3601 0 14.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/search_sparkle_24_regular.svg";

Details

Keywords

searchfindaisparkle