Clock Sparkle icon

Use the Clock 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 { ClockSparkle24Regular, ClockSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clock_sparkle_24_regular.svg" width="24" height="24" alt="Clock 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="M11.9604 20.549C11.9604 20.5324 11.9602 20.5161 11.9598 20.4999L12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C8.33641 3.5 5.21416 5.81777 4.01961 9.06697C3.56509 9.2074 3.1752 9.55163 3 9.99903L2.54 11.399C2.44141 11.7138 2.25044 11.9937 2.00213 12.2084C2.00071 12.1391 2 12.0696 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C11.5368 22 11.0809 21.9685 10.6345 21.9075C10.6995 21.8889 10.7648 21.8721 10.8285 21.8557C10.9133 21.8338 10.9953 21.8126 11.07 21.789C11.3339 21.7001 11.5619 21.5282 11.72 21.299C11.8764 21.0802 11.9604 20.818 11.9604 20.549ZM11.9931 6.64827C11.9435 6.28233 11.6295 6 11.25 6C10.836 6 10.5 6.336 10.5 6.75V12.75L10.5069 12.8517C10.5565 13.2177 10.8705 13.5 11.25 13.5H15.25L15.3517 13.4931C15.7177 13.4435 16 13.1295 16 12.75C16 12.336 15.664 12 15.25 12H12V6.75L11.9931 6.64827ZM3.08828 16.4123C3.01598 16.3189 2.93772 16.2298 2.85387 16.1457C2.54169 15.8326 2.16058 15.5967 1.74097 15.4568L0.363172 15.0094C0.256979 14.972 0.165021 14.9025 0.0999761 14.8107C0.0349307 14.7188 0 14.6091 0 14.4966C0 14.384 0.0349307 14.2743 0.0999761 14.1824C0.165021 14.0906 0.256979 14.0212 0.363172 13.9837L1.74097 13.5363C2.15474 13.3935 2.52987 13.1571 2.837 12.8454C3.13572 12.5422 3.36226 12.1759 3.5 11.7737L3.51143 11.7396L3.95922 10.3629C3.99668 10.2568 4.06616 10.1649 4.15808 10.0999C4.25 10.0349 4.35984 10 4.47244 10C4.58505 10 4.69489 10.0349 4.78681 10.0999C4.87873 10.1649 4.94821 10.2568 4.98567 10.3629L5.43346 11.7396C5.5727 12.1582 5.80772 12.5385 6.11985 12.8504C6.43198 13.1623 6.8126 13.3971 7.23148 13.5363L8.60927 13.9837L8.63683 13.9906C8.74302 14.028 8.83498 14.0975 8.90002 14.1893C8.96507 14.2812 9 14.3909 9 14.5034C9 14.616 8.96507 14.7257 8.90002 14.8176C8.83498 14.9094 8.74302 14.9788 8.63683 15.0163L7.25903 15.4637C6.84016 15.6029 6.45953 15.8377 6.1474 16.1496C5.83528 16.4615 5.60025 16.8418 5.46101 17.2604L5.01323 18.6371C5.00919 18.6486 5.00477 18.6598 5 18.6709C4.96052 18.7627 4.89637 18.8421 4.81436 18.9001C4.72244 18.9651 4.61261 19 4.5 19C4.38739 19 4.27756 18.9651 4.18564 18.9001C4.09372 18.8351 4.02423 18.7432 3.98677 18.6371L3.53899 17.2604C3.43782 16.9533 3.28514 16.6666 3.08828 16.4123ZM10.7829 20.2132L10.0175 19.9646C9.78478 19.8873 9.57332 19.7568 9.39992 19.5836C9.22651 19.4103 9.09594 19.199 9.01859 18.9665L8.76982 18.2016C8.74901 18.1427 8.7104 18.0916 8.65934 18.0555C8.60827 18.0194 8.54725 18 8.48469 18C8.42213 18 8.36111 18.0194 8.31004 18.0555C8.25898 18.0916 8.22038 18.1427 8.19956 18.2016L7.9508 18.9665C7.87498 19.1974 7.74675 19.4076 7.57611 19.5808C7.40548 19.7539 7.19708 19.8853 6.9672 19.9646L6.20176 20.2132C6.14277 20.234 6.09168 20.2725 6.05554 20.3236C6.01941 20.3746 6 20.4356 6 20.4981C6 20.5606 6.01941 20.6216 6.05554 20.6726C6.09168 20.7236 6.14277 20.7622 6.20176 20.783L6.9672 21.0316C7.20032 21.1093 7.41205 21.2403 7.58548 21.4143C7.75891 21.5882 7.88926 21.8003 7.9661 22.0335L8.21487 22.7984C8.23569 22.8573 8.27429 22.9084 8.32535 22.9445C8.37642 22.9806 8.43744 23 8.5 23C8.56256 23 8.62358 22.9806 8.67465 22.9445C8.72571 22.9084 8.76431 22.8573 8.78513 22.7984L9.0339 22.0335C9.11125 21.801 9.24182 21.5897 9.41522 21.4164C9.58863 21.2432 9.80009 21.1127 10.0328 21.0354L10.7982 20.7868C10.8572 20.766 10.9083 20.7275 10.9445 20.6764C10.9806 20.6254 11 20.5644 11 20.5019C11 20.4394 10.9806 20.3784 10.9445 20.3274C10.9083 20.2764 10.8572 20.2378 10.7982 20.217L10.7829 20.2132Z" 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/clock_sparkle_24_regular.svg";

Details