Phone Briefcase icon

Use the Phone 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 { PhoneBriefcase24Regular, PhoneBriefcase24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_phone_briefcase_24_regular.svg" width="24" height="24" alt="Phone 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="M13.75 2C14.9926 2 16 3.00736 16 4.25V11H15.75C15.2999 11 14.875 11.1081 14.5 11.2999V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H11V21.5C11 21.6712 11.0172 21.8384 11.05 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H13.75ZM8.74887 17.5038L11 17.5004V19.0004L8.75113 19.0038C8.33692 19.0044 8.00062 18.6691 8 18.2549C7.99938 17.8407 8.33466 17.5044 8.74887 17.5038ZM14 13.7499V15H13.5C12.6716 15 12 15.6716 12 16.5V21.4999C12 22.3284 12.6716 22.9999 13.5 22.9999H21.5C22.3284 22.9999 23 22.3284 23 21.4999V16.5C23 15.6716 22.3284 15 21.5 15H21V13.7499C21 12.7834 20.2165 11.9999 19.25 11.9999H15.75C14.7835 11.9999 14 12.7834 14 13.7499ZM15.5 13.7499C15.5 13.6119 15.6119 13.4999 15.75 13.4999H19.25C19.3881 13.4999 19.5 13.6119 19.5 13.7499V15H15.5V13.7499Z" 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/phone_briefcase_24_regular.svg";

Details

Keywords

phonedeviceworkdeviceworkprofileorg