Auto Fit Width icon
Used to scale content to fit. Similar to Arrow Fit. Contains directional variants. The Auto Fit 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 Auto Fit 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 { AutoFitWidth24Regular, AutoFitWidth24Filled } from "@fluentui/react-icons";
export function Example() {
return <AutoFitWidth24Regular aria-label="Auto Fit Width" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_auto_fit_width_24_regular.svg" width="24" height="24" alt="Auto Fit 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="M3 18.25C3 18.6642 3.33579 19 3.75 19C4.16421 19 4.5 18.6642 4.5 18.25V5.75C4.5 5.33579 4.16421 5 3.75 5C3.33579 5 3 5.33579 3 5.75V18.25ZM19.5 18.25C19.5 18.6642 19.8358 19 20.25 19C20.6642 19 21 18.6642 21 18.25V5.75C21 5.33579 20.6642 5 20.25 5C19.8358 5 19.5 5.33579 19.5 5.75V18.25ZM14.1462 14.0535C13.9284 14.3472 13.9526 14.7638 14.2188 15.0301C14.5117 15.323 14.9866 15.323 15.2795 15.0301L17.6496 12.6627C17.858 12.537 18 12.2869 18 11.9988C18 11.7107 17.8578 11.4606 17.6493 11.335L15.2795 8.96778L15.1954 8.89517C14.9018 8.67731 14.4851 8.70152 14.2188 8.96778L14.1462 9.0519C13.9284 9.34551 13.9526 9.76218 14.2188 10.0284L15.44 11.2498H11.6562L11.6308 11.2517H8.56L9.78115 10.0304L9.86094 9.93645C10.0498 9.67306 10.0474 9.31484 9.85377 9.05386L9.78115 8.96974L9.6872 8.88995C9.42381 8.70108 9.0656 8.70347 8.80461 8.89712L8.72049 8.96974L6.35073 11.337L6.27578 11.3897C6.10886 11.5257 6 11.7487 6 12.0008C6 12.2888 6.14201 12.5389 6.35039 12.6646L8.72049 15.032L8.80461 15.1047C9.09822 15.3225 9.51488 15.2983 9.78115 15.032C10.0474 14.7658 10.0716 14.3491 9.85377 14.0555L9.78115 13.9714L8.56 12.7517H12.3437L12.3691 12.7498H15.44L14.2188 13.9694L14.1462 14.0535Z" 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/auto_fit_width_24_regular.svg";Details
| Name | Auto Fit Width |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_auto_fit_width_24_regular.svg |
| Filled file | ic_fluent_auto_fit_width_24_filled.svg |
| React components | AutoFitWidth24Regular, AutoFitWidth24Filled |
| License | MIT (© Microsoft Corporation) |