Arrow Autofit Height icon
Used for adjusting content size. Dotted versions are used for autofit. Contains height & width variants. The Arrow Autofit Height 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 Height 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 { ArrowAutofitHeight24Regular, ArrowAutofitHeight24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowAutofitHeight24Regular aria-label="Arrow Autofit Height" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_height_24_regular.svg" width="24" height="24" alt="Arrow Autofit Height"> 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="M16.75 14C17.1642 14 17.4999 14.3358 17.5 14.75V18.4395L18.7197 17.2197C19.0126 16.9269 19.4874 16.9269 19.7803 17.2197C20.0731 17.5126 20.0731 17.9874 19.7803 18.2803L17.2803 20.7803C17.1396 20.9209 16.9489 21 16.75 21C16.5511 21 16.3604 20.9209 16.2197 20.7803L13.7197 18.2803C13.4269 17.9874 13.4269 17.5126 13.7197 17.2197C14.0126 16.9269 14.4874 16.9269 14.7803 17.2197L16 18.4395V14.75C16.0001 14.3358 16.3358 14 16.75 14ZM11.25 3.99999C11.6642 3.99999 11.9999 4.33584 12 4.74999C12 5.1642 11.6642 5.49999 11.25 5.49999H6.25C5.83583 5.49999 5.50007 5.83584 5.5 6.24999V17.75C5.5 18.1642 5.83579 18.5 6.25 18.5H11.25C11.6642 18.5 11.9999 18.8358 12 19.25C12 19.6642 11.6642 20 11.25 20H6.25C5.00736 20 4 18.9926 4 17.75V6.24999C4.00007 5.00741 5.0074 3.99999 6.25 3.99999H11.25ZM16.2764 3.16796C16.5709 2.92772 17.0057 2.9452 17.2803 3.21972L19.7803 5.71972C20.0731 6.01259 20.0731 6.48737 19.7803 6.78026C19.4874 7.07316 19.0126 7.07316 18.7197 6.78026L17.5 5.56054V9.24999C17.5 9.66421 17.1642 9.99999 16.75 9.99999C16.3358 9.99999 16 9.66421 16 9.24999V5.56054L14.7803 6.78026C14.4874 7.07316 14.0126 7.07316 13.7197 6.78026C13.4269 6.48737 13.4269 6.01259 13.7197 5.71972L16.2197 3.21972L16.2764 3.16796Z" 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_height_24_regular.svg";Details
| Name | Arrow Autofit Height |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_autofit_height_24_regular.svg |
| Filled file | ic_fluent_arrow_autofit_height_24_filled.svg |
| React components | ArrowAutofitHeight24Regular, ArrowAutofitHeight24Filled |
| License | MIT (© Microsoft Corporation) |