Document Briefcase icon

Use the Document Briefcase 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 { DocumentBriefcase24Regular, DocumentBriefcase24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.5 20C18.5 20.275 18.276 20.5 18 20.5H13V21.5C13 21.6712 12.9828 21.8384 12.95 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V11.1035C4.23842 11.0361 4.48999 11 4.75 11H5.5V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM3 15.0001H2.5C1.67157 15.0001 1 15.6716 1 16.5001V21.5C1 22.3284 1.67157 23 2.5 23H10.5C11.3284 23 12 22.3284 12 21.5V16.5001C12 15.6716 11.3284 15.0001 10.5 15.0001H10V13.75C10 12.7835 9.21653 12 8.25003 12H4.75C3.7835 12 3 12.7835 3 13.75V15.0001ZM4.5 13.75C4.5 13.6119 4.61193 13.5 4.75 13.5H8.25003C8.3881 13.5 8.50002 13.6119 8.50002 13.75V15.0001H4.5V13.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_briefcase_24_regular.svg";

Details

Keywords

paperworkfileanalogorganizationbusinessverticalinformationbarriers