Document Landscape Split icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M3.5 6C3.5 5.724 3.725 5.5 4 5.5L10.5 5.5V18.5H4C3.725 18.5 3.5 18.276 3.5 18L3.5 6ZM12 18.5V5.5L14 5.5V10C14 11.104 14.896 12 16 12L20.5 12V18C20.5 18.276 20.275 18.5 20 18.5H12ZM15.5 6.622L19.379 10.5H16C15.725 10.5 15.5 10.276 15.5 10V6.622ZM21.414 10.415L15.586 4.586C15.211 4.211 14.702 4 14.172 4H4C2.896 4 2 4.896 2 6V18C2 19.104 2.896 20 4 20H20C21.104 20 22 19.104 22 18V11.828C22 11.3135 21.7796 10.7807 21.414 10.415Z" 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_split_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal