Document Landscape icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 5.5C3.725 5.5 3.5 5.724 3.5 6L3.5 18C3.5 18.276 3.725 18.5 4 18.5H20C20.275 18.5 20.5 18.276 20.5 18V12L16 12C14.896 12 14 11.104 14 10V5.5L4 5.5ZM19.379 10.5L15.5 6.622V10C15.5 10.276 15.725 10.5 16 10.5H19.379ZM15.586 4.586L21.414 10.415C21.7812 10.7822 22 11.3093 22 11.828V18C22 19.104 21.104 20 20 20H4C2.896 20 2 19.104 2 18L2 6C2 4.896 2.896 4 4 4L14.172 4C14.702 4 15.211 4.211 15.586 4.586Z" 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_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal