Bench icon

Use the Bench 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 { Bench24Regular, Bench24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Bench24Regular aria-label="Bench" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_bench_24_regular.svg" width="24" height="24" alt="Bench">

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.75 4C4.23122 4 3 5.23122 3 6.75V12.05C1.85888 12.2816 1 13.2905 1 14.5C1 15.7095 1.85888 16.7184 3 16.95V19.25C3 19.6642 3.33579 20 3.75 20C4.16421 20 4.5 19.6642 4.5 19.25V17H19.5V19.25C19.5 19.6642 19.8358 20 20.25 20C20.6642 20 21 19.6642 21 19.25V16.95C22.1411 16.7184 23 15.7095 23 14.5C23 13.2905 22.1411 12.2816 21 12.05V6.75C21 5.23122 19.7688 4 18.25 4H5.75ZM19.5 12H4.5V6.75C4.5 6.05964 5.05964 5.5 5.75 5.5H18.25C18.9404 5.5 19.5 6.05964 19.5 6.75V12ZM20.5 15.5H3.5C2.94772 15.5 2.5 15.0523 2.5 14.5C2.5 13.9477 2.94772 13.5 3.5 13.5H20.5C21.0523 13.5 21.5 13.9477 21.5 14.5C21.5 15.0523 21.0523 15.5 20.5 15.5Z" 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/bench_24_regular.svg";

Details

Keywords

sitbenchrelax