Document Data icon

Use the Document Data 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 { DocumentData24Regular, DocumentData24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 11C9.16421 11 9.5 11.3358 9.5 11.75V18.25C9.5 18.6642 9.16421 19 8.75 19C8.33579 19 8 18.6642 8 18.25V11.75C8 11.3358 8.33579 11 8.75 11ZM12.75 15.75C12.75 15.3358 12.4142 15 12 15C11.5858 15 11.25 15.3358 11.25 15.75L11.25 18.25C11.25 18.6642 11.5858 19 12 19C12.4142 19 12.75 18.6642 12.75 18.25V15.75ZM15.25 13C15.6642 13 16 13.3358 16 13.75V18.25C16 18.6642 15.6642 19 15.25 19C14.8358 19 14.5 18.6642 14.5 18.25V13.75C14.5 13.3358 14.8358 13 15.25 13ZM12.4828 2C12.8144 2 13.1323 2.1317 13.3667 2.36612L16.2203 5.21967C16.2286 5.22801 16.2367 5.23649 16.2446 5.24511L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H6C4.896 22 4 21.104 4 20V4C4 2.896 4.896 2 6 2H12.4828ZM6 3.5C5.724 3.5 5.5 3.725 5.5 4V20C5.5 20.275 5.724 20.5 6 20.5H18C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6ZM13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378L13.5 4.621Z" 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_data_24_regular.svg";

Details

Keywords

paperworkfileanalogverticaldataviz