Calendar Checkmark Sparkle icon

Use the Calendar Checkmark 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 { CalendarCheckmarkSparkle24Regular, CalendarCheckmarkSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_checkmark_sparkle_24_regular.svg" width="24" height="24" alt="Calendar Checkmark 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.0469 3C11.4234 3.22385 11.0019 3.80366 11 4.46875C11 4.47907 10.9998 4.48968 11 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H14.2539C14.4031 7.15926 14.5211 7.34387 14.5898 7.54883L14.8594 8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V13.5869C19.7141 13.8622 20.0119 14.0498 20.46 14.0498C20.6713 14.0498 20.849 14.0078 21 13.9355V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H12.0469ZM15.2197 10.7197C15.5126 10.4268 15.9874 10.4268 16.2803 10.7197C16.5732 11.0126 16.5732 11.4874 16.2803 11.7803L11.2803 16.7803C10.9874 17.0732 10.5126 17.0732 10.2197 16.7803L7.71973 14.2803C7.42683 13.9874 7.42683 13.5126 7.71973 13.2197C7.99433 12.9451 8.42905 12.9277 8.72363 13.168L8.78027 13.2197L10.75 15.1895L15.2197 10.7197ZM20.4844 8C20.5469 8 20.6081 8.01957 20.6592 8.05566C20.7101 8.09167 20.7487 8.14242 20.7695 8.20117L21.0186 8.9668C21.0959 9.19921 21.2271 9.41079 21.4004 9.58398C21.5737 9.75703 21.7851 9.88761 22.0176 9.96484L22.7832 10.2129L22.7979 10.2168C22.8568 10.2376 22.9082 10.2762 22.9443 10.3271C22.9805 10.3782 23 10.4394 23 10.502C23 10.5645 22.9805 10.6257 22.9443 10.6768C22.9082 10.7276 22.8567 10.7664 22.7979 10.7871L22.0332 11.0352C21.8005 11.1124 21.5884 11.2428 21.415 11.416C21.2417 11.5892 21.1116 11.8008 21.0342 12.0332L20.7852 12.7988C20.7643 12.8575 20.7257 12.9083 20.6748 12.9443C20.6237 12.9804 20.5626 13 20.5 13C20.4374 13 20.3763 12.9804 20.3252 12.9443C20.2743 12.9083 20.2357 12.8575 20.2148 12.7988L19.9658 12.0332C19.889 11.8002 19.7592 11.5879 19.5859 11.4141C19.4125 11.2401 19.1999 11.1089 18.9668 11.0312L18.2021 10.7832C18.1432 10.7624 18.0918 10.7238 18.0557 10.6729C18.0195 10.6218 18 10.5606 18 10.498C18 10.4355 18.0195 10.3743 18.0557 10.3232C18.0918 10.2724 18.1433 10.2337 18.2021 10.2129L18.9668 9.96484C19.1966 9.88555 19.4056 9.75415 19.5762 9.58105C19.7468 9.40795 19.8753 9.19762 19.9512 8.9668L20.1992 8.20117C20.22 8.14249 20.2588 8.0917 20.3096 8.05566C20.3606 8.01962 20.4219 8.00006 20.4844 8ZM16.4727 0C16.5852 4.37205e-05 16.6952 0.0346543 16.7871 0.0996094C16.879 0.164603 16.9479 0.257194 16.9854 0.363281L17.4336 1.73926C17.5728 2.15781 17.808 2.5387 18.1201 2.85059C18.4322 3.16235 18.8127 3.39703 19.2314 3.53613L20.6094 3.9834L20.6367 3.99023C20.7429 4.02767 20.8353 4.0976 20.9004 4.18945C20.9653 4.28125 21 4.39149 21 4.50391C20.9999 4.61615 20.9652 4.72572 20.9004 4.81738C20.8353 4.90923 20.7429 4.97917 20.6367 5.0166L19.2588 5.46387C18.8401 5.603 18.4595 5.83765 18.1475 6.14941C17.8353 6.4613 17.6002 6.84219 17.4609 7.26074L17.0137 8.63672C17.0096 8.64816 17.0048 8.65981 17 8.6709C16.9605 8.7627 16.8965 8.84241 16.8145 8.90039C16.7225 8.96535 16.6126 9 16.5 9C16.3874 9 16.2775 8.96535 16.1855 8.90039C16.0936 8.83539 16.0238 8.74283 15.9863 8.63672L15.5391 7.26074C15.4379 6.95368 15.2848 6.66647 15.0879 6.41211C15.0157 6.3188 14.9373 6.22953 14.8535 6.14551C14.5415 5.83257 14.1606 5.59683 13.7412 5.45703L12.3633 5.00977C12.2571 4.97233 12.1647 4.9024 12.0996 4.81055C12.0347 4.71875 12 4.60851 12 4.49609C12.0001 4.38386 12.0348 4.27428 12.0996 4.18262C12.1647 4.09077 12.2571 4.02083 12.3633 3.9834L13.7412 3.53613C14.1548 3.39339 14.5299 3.15721 14.8369 2.8457C15.1356 2.54257 15.3623 2.17566 15.5 1.77344L15.5117 1.73926L15.959 0.363281C15.9964 0.257169 16.0663 0.164605 16.1582 0.0996094C16.2501 0.0347125 16.3601 0 16.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/calendar_checkmark_sparkle_24_regular.svg";

Details