Document Lightning icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_lightning_24_regular.svg" width="24" height="24" alt="Document Lightning">

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="M6 2C4.89543 2 4 2.89543 4 4V11.0339C4.10301 11.0116 4.20931 11 4.31741 11H5.5V4C5.5 3.72386 5.72386 3.5 6 3.5H12V8C12 9.10457 12.8954 10 14 10H18.5V20C18.5 20.2761 18.2761 20.5 18 20.5H8.28801L6.97427 22H18C19.1046 22 20 21.1046 20 20V9.82777C20 9.29733 19.7893 8.78863 19.4142 8.41355L13.5864 2.58579C13.2114 2.21071 12.7027 2 12.1722 2H6ZM17.3793 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V4.62066L17.3793 8.5ZM4.31767 12H9.14528C9.52769 12 9.76855 12.4118 9.58107 12.7451L7.7502 16H9.24634C9.89088 16 10.2352 16.7593 9.81054 17.2441L4.98666 22.7519C4.48211 23.328 3.54401 22.8375 3.72916 22.0945L4.5002 19H1.49767C1.13127 19 0.889307 18.6189 1.04516 18.2873L3.86516 12.2873C3.94758 12.112 4.1239 12 4.31767 12Z" 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_lightning_24_regular.svg";

Details

Keywords

templatepaperboltfile