Briefcase Search icon

Use the Briefcase Search 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 { BriefcaseSearch24Regular, BriefcaseSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.5 12C7.98528 12 10 14.0147 10 16.5C10 17.4719 9.69181 18.3718 9.16797 19.1074L11.7803 21.7197C12.0732 22.0126 12.0732 22.4874 11.7803 22.7803C11.4874 23.0732 11.0126 23.0732 10.7197 22.7803L8.10742 20.168C7.37181 20.6918 6.47187 21 5.5 21C3.01472 21 1 18.9853 1 16.5C1 14.0147 3.01472 12 5.5 12ZM13.75 2C14.9926 2 16 3.00736 16 4.25V6H18.75C20.5449 6 22 7.45507 22 9.25V17.75C22 19.5449 20.5449 21 18.75 21H12.4746L10.9756 19.5H18.75C19.7165 19.5 20.5 18.7165 20.5 17.75V13.4873C19.9947 13.811 19.3947 14 18.75 14H14C14 14.5523 13.5523 15 13 15H11C10.9258 15 10.8538 14.9909 10.7842 14.9756C10.6135 14.3828 10.3465 13.8312 10 13.3389V12C10 11.4477 10.4477 11 11 11H13C13.5523 11 14 11.4477 14 12V12.5H18.75C19.7165 12.5 20.5 11.7165 20.5 10.75V9.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 10.9558 3.53732 11.1526 3.60254 11.3359C3.01477 11.552 2.47398 11.8654 2 12.2568V9.25C2 7.45507 3.45507 6 5.25 6H8V4.25C8 3.00736 9.00736 2 10.25 2H13.75ZM5.5 13.5C3.84315 13.5 2.5 14.8431 2.5 16.5C2.5 18.1569 3.84315 19.5 5.5 19.5C7.15685 19.5 8.5 18.1569 8.5 16.5C8.5 14.8431 7.15685 13.5 5.5 13.5ZM10.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_search_24_regular.svg";

Details

Keywords

organizationbusinessmagnifyingglass