Document Sparkle icon

Use the Document 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 { DocumentSparkle24Regular, DocumentSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_sparkle_24_regular.svg" width="24" height="24" alt="Document 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="M4 4C4 2.89543 4.89543 2 6 2H12.1722C12.7027 2 13.2114 2.21071 13.5864 2.58579L19.4142 8.41355C19.7893 8.78863 20 9.29733 20 9.82777V20C20 21.1046 19.1046 22 18 22H11.879C11.9326 21.8566 11.9604 21.7039 11.9604 21.549C11.9604 21.0242 11.7672 20.7145 11.4748 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V10.4011C5.21848 10.1508 4.85128 9.99805 4.47 9.99805C4.30961 9.99805 4.15109 10.0243 4 10.0732V4ZM14 8.5H17.3793L13.5 4.62066V8C13.5 8.27614 13.7239 8.5 14 8.5ZM3.08828 17.4123C3.01598 17.3189 2.93772 17.2298 2.85387 17.1457C2.54169 16.8326 2.16058 16.5967 1.74097 16.4568L0.363172 16.0094C0.256979 15.972 0.165021 15.9025 0.0999761 15.8107C0.0349307 15.7188 0 15.6091 0 15.4966C0 15.384 0.0349307 15.2743 0.0999761 15.1824C0.165021 15.0906 0.256979 15.0212 0.363172 14.9837L1.74097 14.5363C2.15474 14.3935 2.52987 14.1571 2.837 13.8454C3.13572 13.5422 3.36226 13.1759 3.5 12.7737L3.51143 12.7396L3.95922 11.3629C3.99668 11.2568 4.06616 11.1649 4.15808 11.0999C4.25 11.0349 4.35984 11 4.47244 11C4.58505 11 4.69489 11.0349 4.78681 11.0999C4.87873 11.1649 4.94821 11.2568 4.98567 11.3629L5.43346 12.7396C5.5727 13.1582 5.80772 13.5385 6.11985 13.8504C6.43198 14.1623 6.8126 14.3971 7.23148 14.5363L8.60927 14.9837L8.63683 14.9906C8.74302 15.028 8.83498 15.0975 8.90002 15.1893C8.96507 15.2812 9 15.3909 9 15.5034C9 15.616 8.96507 15.7257 8.90002 15.8176C8.83498 15.9094 8.74302 15.9788 8.63683 16.0163L7.25903 16.4637C6.84016 16.6029 6.45953 16.8377 6.1474 17.1496C5.83528 17.4615 5.60025 17.8418 5.46101 18.2604L5.01323 19.6371C5.00919 19.6486 5.00477 19.6598 5 19.6709C4.96052 19.7627 4.89637 19.8421 4.81436 19.9001C4.72244 19.9651 4.61261 20 4.5 20C4.38739 20 4.27756 19.9651 4.18564 19.9001C4.09372 19.8351 4.02423 19.7432 3.98677 19.6371L3.53899 18.2604C3.43782 17.9533 3.28514 17.6666 3.08828 17.4123ZM10.7829 21.2132L10.0175 20.9646C9.78478 20.8873 9.57332 20.7568 9.39992 20.5836C9.22651 20.4103 9.09594 20.199 9.01859 19.9665L8.76982 19.2016C8.74901 19.1427 8.7104 19.0916 8.65934 19.0555C8.60827 19.0194 8.54725 19 8.48469 19C8.42213 19 8.36111 19.0194 8.31004 19.0555C8.25898 19.0916 8.22038 19.1427 8.19956 19.2016L7.9508 19.9665C7.87498 20.1974 7.74675 20.4076 7.57611 20.5808C7.40548 20.7539 7.19708 20.8853 6.9672 20.9646L6.20176 21.2132C6.14277 21.234 6.09168 21.2725 6.05554 21.3236C6.01941 21.3746 6 21.4356 6 21.4981C6 21.5606 6.01941 21.6216 6.05554 21.6726C6.09168 21.7236 6.14277 21.7622 6.20176 21.783L6.9672 22.0316C7.20032 22.1093 7.41205 22.2403 7.58548 22.4143C7.75891 22.5882 7.88926 22.8003 7.9661 23.0335L8.21487 23.7984C8.23569 23.8573 8.27429 23.9084 8.32535 23.9445C8.37642 23.9806 8.43744 24 8.5 24C8.56256 24 8.62358 23.9806 8.67465 23.9445C8.72571 23.9084 8.76431 23.8573 8.78513 23.7984L9.0339 23.0335C9.11125 22.801 9.24182 22.5897 9.41522 22.4164C9.58863 22.2432 9.80009 22.1127 10.0328 22.0354L10.7982 21.7868C10.8572 21.766 10.9083 21.7275 10.9445 21.6764C10.9806 21.6254 11 21.5644 11 21.5019C11 21.4394 10.9806 21.3784 10.9445 21.3274C10.9083 21.2764 10.8572 21.2378 10.7982 21.217L10.7829 21.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/document_sparkle_24_regular.svg";

Details