Briefcase Person icon

Use the Briefcase Person 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 { BriefcasePerson24Regular, BriefcasePerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M21.2275 17C22.2065 17.0001 23 17.7935 23 18.7725V18.875C23 20.4315 21.7143 22 18.5 22C15.2857 22 14 20.4374 14 18.875V18.7725C14 17.7935 14.7935 17.0001 15.7725 17H21.2275ZM13.75 2C14.9926 2 16 3.00736 16 4.25V6H18.75C20.5449 6 22 7.45507 22 9.25V13.5C22 12.3107 21.4066 11.2604 20.5 10.6279V9.25C20.5 8.2835 19.7165 7.5 18.75 7.5H5.25C4.2835 7.5 3.5 8.2835 3.5 9.25V10.75C3.5 11.7165 4.2835 12.5 5.25 12.5H10V12C10 11.4477 10.4477 11 11 11H13C13.5523 11 14 11.4477 14 12V12.5H15.1455C15.0512 12.8169 15 13.1525 15 13.5C15 13.6698 15.0128 13.8367 15.0361 14H14C14 14.5523 13.5523 15 13 15H11C10.4477 15 10 14.5523 10 14H5.25C4.60533 14 4.00532 13.811 3.5 13.4873V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H13.0527C13.1408 20.0252 13.3413 20.5371 13.665 21H5.25C3.45507 21 2 19.5449 2 17.75V9.25C2 7.45507 3.45507 6 5.25 6H8V4.25C8 3.00736 9.00736 2 10.25 2H13.75ZM18.5 11C19.8807 11 21 12.1193 21 13.5C21 14.8807 19.8807 16 18.5 16C17.1193 16 16 14.8807 16 13.5C16 12.1193 17.1193 11 18.5 11ZM10.25 3.5C9.83579 3.5 9.5 3.83579 9.5 4.25V6H14.5V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H10.25Z" 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/briefcase_person_24_regular.svg";

Details

Keywords

organizationorgbusinesspersonpeopleitadmin