Document Landscape Data icon

Use the Document Landscape Data 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 { DocumentLandscapeData24Regular, DocumentLandscapeData24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentLandscapeData24Regular aria-label="Document Landscape Data" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_landscape_data_24_regular.svg" width="24" height="24" alt="Document Landscape Data">

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="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9V15C14 16.1046 13.1046 17 12 17C10.8954 17 10 16.1046 10 15V9ZM12 8.5C11.7239 8.5 11.5 8.72386 11.5 9V15C11.5 15.2761 11.7239 15.5 12 15.5C12.2761 15.5 12.5 15.2761 12.5 15V9C12.5 8.72386 12.2761 8.5 12 8.5ZM5 14C5 12.8954 5.89543 12 7 12C8.10457 12 9 12.8954 9 14V15C9 16.1046 8.10457 17 7 17C5.89543 17 5 16.1046 5 15V14ZM7.5 14C7.5 13.7239 7.27614 13.5 7 13.5C6.72386 13.5 6.5 13.7239 6.5 14V15C6.5 15.2761 6.72386 15.5 7 15.5C7.27614 15.5 7.5 15.2761 7.5 15V14ZM17 10C15.8954 10 15 10.8954 15 12V15C15 16.1046 15.8954 17 17 17C18.1046 17 19 16.1046 19 15V12C19 10.8954 18.1046 10 17 10ZM17.5 12V15C17.5 15.2761 17.2761 15.5 17 15.5C16.7239 15.5 16.5 15.2761 16.5 15V12C16.5 11.7239 16.7239 11.5 17 11.5C17.2761 11.5 17.5 11.7239 17.5 12ZM2 6.75C2 5.23122 3.23122 4 4.75 4H19.25C20.7688 4 22 5.23122 22 6.75V17.25C22 18.7688 20.7688 20 19.25 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75ZM4.75 5.5C4.05964 5.5 3.5 6.05964 3.5 6.75V17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H19.25C19.9404 18.5 20.5 17.9404 20.5 17.25V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5H4.75Z" 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_landscape_data_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal