Document One Page Sparkle icon

Use the Document One Page 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 { DocumentOnePageSparkle24Regular, DocumentOnePageSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_one_page_sparkle_24_regular.svg" width="24" height="24" alt="Document One Page 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="M16.25 11H7.75C7.34 11 7 11.34 7 11.75C7 12.16 7.34 12.5 7.75 12.5H16.25C16.66 12.5 17 12.16 17 11.75C17 11.34 16.66 11 16.25 11ZM16.25 15.5H7.75C7.34 15.5 7 15.84 7 16.25C7 16.66 7.34 17 7.75 17H16.25C16.66 17 17 16.66 17 16.25C17 15.84 16.66 15.5 16.25 15.5ZM7 7.25001C7 7.66001 7.34 8.00001 7.75 8.00001H15.2L15.11 7.72001C15.06 7.58001 14.99 7.45001 14.9 7.33001C14.86 7.28001 14.83 7.24001 14.79 7.20001C14.64 7.05001 14.46 6.94001 14.27 6.88001L13.1 6.50001H7.75C7.34 6.50001 7 6.84001 7 7.25001ZM19.8 13.29L19.54 12.5L18.74 12.21C18.65 12.18 18.58 12.13 18.5 12.09V19.75C18.5 20.16 18.16 20.5 17.75 20.5H6.25C5.84 20.5 5.5 20.16 5.5 19.75V4.25001C5.5 3.84001 5.84 3.50001 6.25 3.50001H11.78C11.81 3.44001 11.83 3.37001 11.87 3.31001C12.11 2.97001 12.45 2.71001 12.86 2.57001L14.27 2.11001C14.34 2.08001 14.42 2.04001 14.49 2.00001H6.25C5.01 2.00001 4 3.01001 4 4.25001V19.75C4 20.99 5.01 22 6.25 22H17.75C18.99 22 20 20.99 20 19.75V13.67C19.92 13.55 19.85 13.43 19.8 13.29ZM15.85 6.15001C15.93 6.23001 16.01 6.32001 16.08 6.42001C16.28 6.67001 16.43 6.96001 16.53 7.27001L16.98 8.65001C17.02 8.76001 17.09 8.85001 17.18 8.91001C17.27 8.98001 17.38 9.01001 17.49 9.01001C17.6 9.01001 17.71 8.98001 17.8 8.91001C17.88 8.85001 17.95 8.77001 17.99 8.68001V8.65001L18.45 7.27001C18.59 6.85001 18.82 6.47001 19.14 6.16001C19.45 5.85001 19.83 5.61001 20.25 5.47001L21.63 5.02001C21.74 4.98001 21.83 4.91001 21.89 4.82001C21.96 4.73001 21.99 4.62001 21.99 4.51001C21.99 4.40001 21.96 4.29001 21.89 4.20001C21.82 4.11001 21.73 4.04001 21.63 4.00001H21.6L20.22 3.55001C19.8 3.41001 19.42 3.18001 19.11 2.86001C18.8 2.55001 18.56 2.17001 18.42 1.75001L17.97 0.37001C17.93 0.26001 17.86 0.17001 17.77 0.11001C17.68 0.0500098 17.57 0.0100098 17.46 0.0100098C17.35 0.0100098 17.24 0.0400098 17.15 0.11001C17.06 0.17001 16.99 0.27001 16.95 0.37001L16.5 1.75001V1.78001C16.35 2.18001 16.12 2.55001 15.83 2.85001C15.52 3.16001 15.15 3.40001 14.73 3.54001L13.35 3.99001C13.24 4.03001 13.15 4.10001 13.09 4.19001C13.02 4.28001 12.99 4.39001 12.99 4.50001C12.99 4.61001 13.02 4.72001 13.09 4.81001C13.15 4.90001 13.25 4.97001 13.35 5.01001L14.73 5.46001C15.15 5.60001 15.53 5.84001 15.84 6.15001H15.85ZM23.78 10.22C23.8438 10.22 23.9105 10.2806 23.95 10.33C23.99 10.38 24 10.44 24 10.5C24 10.56 23.99 10.62 23.95 10.67C23.91 10.72 23.86 10.76 23.8 10.78L23.03 11.03C22.8 11.11 22.59 11.24 22.41 11.41C22.24 11.58 22.11 11.79 22.03 12.03L21.78 12.79C21.76 12.85 21.72 12.9 21.67 12.94C21.62 12.98 21.56 13 21.5 13C21.44 13 21.38 12.98 21.33 12.94C21.28 12.9 21.24 12.85 21.22 12.79L20.97 12.03C20.89 11.8 20.76 11.58 20.59 11.41C20.42 11.24 20.2 11.1 19.97 11.03L19.2 10.78C19.14 10.76 19.09 10.72 19.05 10.67C19.01 10.62 18.99 10.56 18.99 10.5C18.99 10.44 19.01 10.38 19.05 10.33C19.09 10.28 19.14 10.24 19.2 10.22L19.97 9.97001C20.2 9.89001 20.41 9.76001 20.58 9.59001C20.75 9.42001 20.88 9.21001 20.95 8.98001L21.2 8.22001C21.22 8.16001 21.26 8.11001 21.31 8.07001C21.36 8.03001 21.42 8.01001 21.48 8.01001C21.54 8.01001 21.6 8.03001 21.65 8.07001C21.7 8.11001 21.74 8.16001 21.76 8.22001L22.01 8.98001C22.09 9.21001 22.22 9.42001 22.39 9.60001C22.56 9.77001 22.77 9.90001 23.01 9.98001L23.78 10.22Z" 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_one_page_sparkle_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontalaisummary