Arrow Autofit Width icon
Used for adjusting content size. Dotted versions are used for autofit. Contains height & width variants. The Arrow Autofit Width icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Autofit 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 { ArrowAutofitWidth24Regular, ArrowAutofitWidth24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowAutofitWidth24Regular aria-label="Arrow Autofit Width" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_width_24_regular.svg" width="24" height="24" alt="Arrow Autofit 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="M5.71973 13.7197C6.01262 13.4269 6.4874 13.4269 6.78027 13.7197C7.07306 14.0126 7.07308 14.4874 6.78027 14.7803L5.56055 16H9.25C9.66414 16.0001 10 16.3358 10 16.75C9.99998 17.1641 9.66413 17.4999 9.25 17.5H5.56055L6.78027 18.7197C7.07306 19.0126 7.07308 19.4874 6.78027 19.7803C6.48741 20.0731 6.01263 20.0731 5.71973 19.7803L3.21973 17.2803C3.07908 17.1396 3.00001 16.9489 3 16.75C3 16.5511 3.07907 16.3604 3.21973 16.2197L5.71973 13.7197ZM17.2197 13.7197C17.5126 13.4269 17.9874 13.4269 18.2803 13.7197L20.7803 16.2197L20.832 16.2764C21.0722 16.5709 21.0548 17.0057 20.7803 17.2803L18.2803 19.7803C17.9874 20.0731 17.5126 20.0731 17.2197 19.7803C16.9268 19.4874 16.9268 19.0126 17.2197 18.7197L18.4395 17.5H14.75C14.3358 17.5 14 17.1642 14 16.75C14 16.3358 14.3358 16 14.75 16H18.4395L17.2197 14.7803C16.9268 14.4874 16.9268 14.0126 17.2197 13.7197ZM17.75 4C18.9926 4.00008 20 5.00741 20 6.25V11.25C20 11.6641 19.6641 11.9999 19.25 12C18.8358 12 18.5 11.6642 18.5 11.25V6.25C18.5 5.83584 18.1641 5.50008 17.75 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V11.25C5.49998 11.6641 5.16413 11.9999 4.75 12C4.3358 12 4.00002 11.6642 4 11.25V6.25C4 5.00736 5.00736 4 6.25 4H17.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/arrow_autofit_width_24_regular.svg";Details
| Name | Arrow Autofit Width |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_autofit_width_24_regular.svg |
| Filled file | ic_fluent_arrow_autofit_width_24_filled.svg |
| React components | ArrowAutofitWidth24Regular, ArrowAutofitWidth24Filled |
| License | MIT (© Microsoft Corporation) |