Document One Page Multiple icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.74689 5.5C7.33439 5.5 7 5.83579 7 6.25C7 6.66421 7.33439 7 7.74689 7H13.7531C14.1656 7 14.5 6.66421 14.5 6.25C14.5 5.83579 14.1656 5.5 13.7531 5.5H7.74689ZM7 15.25C7 14.8358 7.33439 14.5 7.74689 14.5H13.7531C14.1656 14.5 14.5 14.8358 14.5 15.25C14.5 15.6642 14.1656 16 13.7531 16H7.74689C7.33439 16 7 15.6642 7 15.25ZM7.74689 10C7.33439 10 7 10.3358 7 10.75C7 11.1642 7.33439 11.5 7.74689 11.5H13.7531C14.1656 11.5 14.5 11.1642 14.5 10.75C14.5 10.3358 14.1656 10 13.7531 10H7.74689ZM6.25 2C5.00736 2 4 3.00736 4 4.25V17.25C4 18.4926 5.00736 19.5 6.25 19.5H15.25C16.4926 19.5 17.5 18.4926 17.5 17.25L17.5 4.25C17.5 3.00736 16.4926 2 15.25 2H6.25ZM5.5 4.25C5.5 4.22411 5.50131 4.19853 5.50387 4.17332C5.54228 3.79512 5.86167 3.5 6.25 3.5L15.25 3.5C15.6642 3.5 16 3.83579 16 4.25L16 17.25C16 17.6642 15.6642 18 15.25 18H6.25C5.83579 18 5.5 17.6642 5.5 17.25V4.25ZM6.62891 20.5C6.93778 21.3739 7.77121 22 8.75088 22H15.2509C17.8742 22 20.0009 19.8734 20.0009 17.25V11.3689C20.0009 11.3479 20.0006 11.3269 20 11.306V6.7499C20 5.77024 19.3739 4.93681 18.5 4.62793L18.5009 17.25C18.5009 19.0449 17.0458 20.5 15.2509 20.5H6.62891Z" 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_multiple_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontalstack