Document Landscape Split Hint icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M7 4.75C7 4.33579 7.33579 4 7.75 4H8.25C8.66421 4 9 4.33579 9 4.75C9 5.16421 8.66421 5.5 8.25 5.5H7.75C7.33579 5.5 7 5.16421 7 4.75ZM2.75 9.5C3.16421 9.5 3.5 9.83579 3.5 10.25V13.75C3.5 14.1642 3.16421 14.5 2.75 14.5C2.33579 14.5 2 14.1642 2 13.75V10.25C2 9.83579 2.33579 9.5 2.75 9.5ZM7.75 18.5C7.33579 18.5 7 18.8358 7 19.25C7 19.6642 7.33579 20 7.75 20H8.25C8.66421 20 9 19.6642 9 19.25C9 18.8358 8.66421 18.5 8.25 18.5H7.75ZM2 6C2 4.89543 2.89543 4 4 4H4.75C5.16421 4 5.5 4.33579 5.5 4.75C5.5 5.16421 5.16421 5.5 4.75 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V7.25C3.5 7.66421 3.16421 8 2.75 8C2.33579 8 2 7.66421 2 7.25V6ZM4 20C2.89543 20 2 19.1046 2 18V16.75C2 16.3358 2.33579 16 2.75 16C3.16421 16 3.5 16.3358 3.5 16.75V18C3.5 18.2761 3.72386 18.5 4 18.5H4.75C5.16421 18.5 5.5 18.8358 5.5 19.25C5.5 19.6642 5.16421 20 4.75 20H4ZM10.5 5.25C10.5 4.55964 11.0596 4 11.75 4H14.3358C14.7999 4 15.245 4.18437 15.5732 4.51256L21.4874 10.4268C21.8156 10.755 22 11.2001 22 11.6642V18C22 19.1046 21.1046 20 20 20H11.75C11.0596 20 10.5 19.4404 10.5 18.75V5.25ZM12 5.5V18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V12H16C14.8954 12 14 11.1046 14 10V5.5H12ZM15.5 6.56066V10C15.5 10.2761 15.7239 10.5 16 10.5H19.4393L15.5 6.56066Z" 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_hint_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal