Document Text Toolbox icon

Use the Document Text Toolbox 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 { DocumentTextToolbox24Regular, DocumentTextToolbox24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentTextToolbox24Regular aria-label="Document Text Toolbox" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_text_toolbox_24_regular.svg" width="24" height="24" alt="Document Text Toolbox">

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="M10.8126 13C10.553 12.3354 10.0424 11.7965 9.39727 11.5H15.25C15.6642 11.5 16 11.8358 16 12.25C16 12.6642 15.6642 13 15.25 13H10.8126ZM11.591 14.25C12.2048 14.5482 12.6783 15.0901 12.8855 15.75H15.25C15.6642 15.75 16 15.4142 16 15C16 14.5858 15.6642 14.25 15.25 14.25H11.591ZM15.25 17H13V18.5H15.25C15.6642 18.5 16 18.1642 16 17.75C16 17.3358 15.6642 17 15.25 17ZM5.5 4V11.25H4.75C4.48999 11.25 4.23842 11.2861 4 11.3535V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H12.95C12.9828 21.8384 13 21.6712 13 21.5V20.5H18C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4ZM17.378 8.5L13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378ZM3 15H2.5C1.67157 15 1 15.6716 1 16.5V18H3.5V17.75C3.5 17.3358 3.83579 17 4.25 17C4.66421 17 5 17.3358 5 17.75V18H8V17.75C8 17.3358 8.33579 17 8.75 17C9.16421 17 9.5 17.3358 9.5 17.75V18H12V16.5C12 15.6716 11.3284 15 10.5 15H10V14C10 13.0335 9.21653 12.25 8.25003 12.25H4.75C3.7835 12.25 3 13.0335 3 14V15ZM4.5 14C4.5 13.8619 4.61193 13.75 4.75 13.75H8.25003C8.3881 13.75 8.50003 13.8619 8.50003 14V15H4.5V14ZM1 21.5V19.5H3.5V20.25C3.5 20.6642 3.83579 21 4.25 21C4.66421 21 5 20.6642 5 20.25V19.5H8V20.25C8 20.6642 8.33579 21 8.75 21C9.16421 21 9.5 20.6642 9.5 20.25V19.5H12V21.5C12 22.3284 11.3284 23 10.5 23H2.5C1.67157 23 1 22.3284 1 21.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_text_toolbox_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal