Checkmark Circle Sparkle icon

Use the Checkmark Circle 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 { CheckmarkCircleSparkle24Regular, CheckmarkCircleSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CheckmarkCircleSparkle24Regular aria-label="Checkmark Circle Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_checkmark_circle_sparkle_24_regular.svg" width="24" height="24" alt="Checkmark Circle 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 2C12.9558 2 13.8795 2.13634 14.7549 2.38672C14.6399 2.45687 14.5178 2.51559 14.3896 2.55859L13.0498 2.99902C12.7621 3.10169 12.5176 3.28026 12.3369 3.50781C12.2251 3.50345 12.1128 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.2135 20.5 19.7085 17.4337 20.3809 13.4111C20.6008 13.78 20.9217 14.0498 21.46 14.0498C21.5837 14.0498 21.6958 14.035 21.7979 14.0088C20.8679 18.5689 16.8348 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.2197 8.96973C15.5126 8.67683 15.9874 8.67683 16.2803 8.96973C16.5465 9.23599 16.5704 9.65268 16.3525 9.94629L16.2803 10.0303L11.2803 15.0303C11.014 15.2965 10.5973 15.3204 10.3037 15.1025L10.2197 15.0303L7.71973 12.5303C7.42683 12.2374 7.42683 11.7626 7.71973 11.4697C7.98599 11.2035 8.40268 11.1796 8.69629 11.3975L8.78027 11.4697L10.75 13.4395L15.2197 8.96973ZM21.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/checkmark_circle_sparkle_24_regular.svg";

Details