Document Table icon

Use the Document Table 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 { DocumentTable24Regular, DocumentTable24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M8.75 11.5H15.25C16.2165 11.5 17 12.2835 17 13.25V17.25C17 18.2165 16.2165 19 15.25 19H8.75C7.7835 19 7 18.2165 7 17.25V13.25C7 12.2835 7.7835 11.5 8.75 11.5ZM8.5 13.25V14.5H10V13H8.75C8.61193 13 8.5 13.1119 8.5 13.25ZM8.5 16V17.25C8.5 17.3881 8.61193 17.5 8.75 17.5H10V16H8.5ZM11.5 16V17.5H15.25C15.3881 17.5 15.5 17.3881 15.5 17.25V16H11.5ZM15.5 14.5V13.25C15.5 13.1119 15.3881 13 15.25 13H11.5V14.5H15.5ZM13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V20C4 21.104 4.896 22 6 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586ZM18 20.5H6C5.724 20.5 5.5 20.275 5.5 20V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20C18.5 20.275 18.276 20.5 18 20.5ZM17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621L17.378 8.5Z" 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_table_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontaldataspreadsheet