Navigation Briefcase icon

Use the Navigation 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 { NavigationBriefcase24Regular, NavigationBriefcase24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_navigation_briefcase_24_regular.svg" width="24" height="24" alt="Navigation 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="M2.75086 17.9997H12V19.4997H2.75086C2.33665 19.4997 2.00086 19.1639 2.00086 18.7497C2.00086 18.37 2.28301 18.0562 2.64909 18.0065L2.75086 17.9997ZM2.75086 13.0027H14.1028C14.2757 12.3886 14.6566 11.8617 15.1646 11.5027H2.75086L2.64909 11.5095C2.28301 11.5592 2.00086 11.873 2.00086 12.2527C2.00086 12.6669 2.33665 13.0027 2.75086 13.0027ZM2.75 5.00293H21.25C21.6642 5.00293 22 5.33872 22 5.75293C22 6.13263 21.7178 6.44642 21.3518 6.49608L21.25 6.50293H2.75C2.33579 6.50293 2 6.16714 2 5.75293C2 5.37323 2.28215 5.05944 2.64823 5.00978L2.75 5.00293ZM15 15.0001V13.75C15 12.7835 15.7835 12 16.75 12H20.25C21.2165 12 22 12.7835 22 13.75V15.0001H22.5C23.3284 15.0001 24 15.6716 24 16.5001V21.5C24 22.3284 23.3284 23 22.5 23H14.5C13.6716 23 13 22.3284 13 21.5V16.5001C13 15.6716 13.6716 15.0001 14.5 15.0001H15ZM16.5 13.75V15.0001H20.5V13.75C20.5 13.6119 20.3881 13.5 20.25 13.5H16.75C16.6119 13.5 16.5 13.6119 16.5 13.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/navigation_briefcase_24_regular.svg";

Details