Document One Page Columns icon

Use the Document One Page Columns 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 { DocumentOnePageColumns24Regular, DocumentOnePageColumns24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentOnePageColumns24Regular aria-label="Document One Page Columns" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_one_page_columns_24_regular.svg" width="24" height="24" alt="Document One Page Columns">

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 4.25C4 3.00736 5.00736 2 6.25 2H17.75C18.9926 2 20 3.00736 20 4.25V19.75C20 20.9926 18.9926 22 17.75 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25ZM6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H17.75C18.1642 20.5 18.5 20.1642 18.5 19.75V4.25C18.5 3.83579 18.1642 3.5 17.75 3.5H6.25ZM9.25 5C9.66421 5 10 5.33579 10 5.75V18.25C10 18.6642 9.66421 19 9.25 19C8.83579 19 8.5 18.6642 8.5 18.25V5.75C8.5 5.33579 8.83579 5 9.25 5ZM15.5 5.75C15.5 5.33579 15.1642 5 14.75 5C14.3358 5 14 5.33579 14 5.75V18.25C14 18.6642 14.3358 19 14.75 19C15.1642 19 15.5 18.6642 15.5 18.25V5.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_one_page_columns_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal