Person Briefcase icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_briefcase_24_regular.svg" width="24" height="24" alt="Person 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="M19.25 12C20.2165 12 21 12.7835 21 13.75V15H21.5C22.3284 15 23 15.6716 23 16.5V21.5C23 22.3284 22.3284 23 21.5 23H13.5C12.6716 23 12 22.3284 12 21.5V16.5C12 15.6716 12.6716 15 13.5 15H14V13.75C14 12.7835 14.7835 12 15.75 12H19.25ZM15.75 13.5C15.6119 13.5 15.5 13.6119 15.5 13.75V15H19.5V13.75C19.5 13.6119 19.3881 13.5 19.25 13.5H15.75ZM13 14.0498C12.1946 14.2133 11.5314 14.7649 11.21 15.5H4.25195C3.83857 15.5003 3.50391 15.8356 3.50391 16.249V16.8262C3.50391 17.3618 3.69514 17.8798 4.04297 18.2871C5.29628 19.7548 7.2617 20.501 10 20.501C10.3456 20.501 10.6788 20.4886 11 20.4648V21.5C11 21.6586 11.0157 21.8135 11.0439 21.9639C10.7058 21.9873 10.3579 22.001 10 22.001C6.85414 22.001 4.46767 21.096 2.90137 19.2617C2.32171 18.5828 2.00391 17.7189 2.00391 16.8262V16.249C2.00391 15.0072 3.01015 14.0003 4.25195 14H13V14.0498ZM10 2.00488C12.7614 2.00488 15 4.24346 15 7.00488C14.9999 9.76619 12.7613 12.0049 10 12.0049C7.23866 12.0049 5.00013 9.76619 5 7.00488C5 4.24346 7.23858 2.00488 10 2.00488ZM10 3.50488C8.067 3.50488 6.5 5.07189 6.5 7.00488C6.50013 8.93777 8.06708 10.5049 10 10.5049C11.9329 10.5049 13.4999 8.93777 13.5 7.00488C13.5 5.07189 11.933 3.50488 10 3.50488Z" 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/person_briefcase_24_regular.svg";

Details