Fixed Width icon

Use the Fixed Width 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 { FixedWidth24Regular, FixedWidth24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FixedWidth24Regular aria-label="Fixed Width" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_fixed_width_24_regular.svg" width="24" height="24" alt="Fixed Width">

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="M4.5 4.6875C4.5 4.3078 4.16421 4 3.75 4C3.33579 4 3 4.3078 3 4.6875V8.8125C3 9.1922 3.33579 9.5 3.75 9.5C4.16421 9.5 4.5 9.1922 4.5 8.8125V7.5H11.25V8.8125C11.25 9.1922 11.5858 9.5 12 9.5C12.4142 9.5 12.75 9.1922 12.75 8.8125V7.5H19.5V8.8125C19.5 9.1922 19.8358 9.5 20.25 9.5C20.6642 9.5 21 9.1922 21 8.8125V4.6875C21 4.3078 20.6642 4 20.25 4C19.8358 4 19.5 4.3078 19.5 4.6875V6H12.75V4.6875C12.75 4.3078 12.4142 4 12 4C11.5858 4 11.25 4.3078 11.25 4.6875V6H4.5V4.6875ZM5.75 11C4.23122 11 3 12.2312 3 13.75V17.75C3 19.2688 4.23122 20.5 5.75 20.5H18.25C19.7688 20.5 21 19.2688 21 17.75V13.75C21 12.2312 19.7688 11 18.25 11H5.75ZM11.25 12.5V19H5.75C5.05964 19 4.5 18.4404 4.5 17.75V13.75C4.5 13.0596 5.05964 12.5 5.75 12.5H11.25ZM12.75 19V12.5H18.25C18.9404 12.5 19.5 13.0596 19.5 13.75V17.75C19.5 18.4404 18.9404 19 18.25 19H12.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/fixed_width_24_regular.svg";

Details

Keywords

sizehorizontalscalefit