Arrow Autofit Height In icon

Use the Arrow Autofit Height In 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 { ArrowAutofitHeightIn24Regular, ArrowAutofitHeightIn24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowAutofitHeightIn24Regular aria-label="Arrow Autofit Height In" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_height_in_24_regular.svg" width="24" height="24" alt="Arrow Autofit Height In">

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.7803 9.78033L19.2803 7.28033C19.5732 6.98744 19.5732 6.51256 19.2803 6.21967C18.9874 5.92678 18.5126 5.92678 18.2197 6.21967L17 7.43934V3.75C17 3.33579 16.6642 3 16.25 3C15.8358 3 15.5 3.33579 15.5 3.75V7.43934L14.2803 6.21967C13.9874 5.92678 13.5126 5.92678 13.2197 6.21967C12.9268 6.51256 12.9268 6.98744 13.2197 7.28033L15.7197 9.78033C16.0126 10.0732 16.4874 10.0732 16.7803 9.78033ZM4 6.25C4 5.00736 5.00736 4 6.25 4H10.25C10.6642 4 11 4.33579 11 4.75C11 5.16421 10.6642 5.5 10.25 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V17.75C5.5 18.1642 5.83579 18.5 6.25 18.5H10.25C10.6642 18.5 11 18.8358 11 19.25C11 19.6642 10.6642 20 10.25 20H6.25C5.00736 20 4 18.9926 4 17.75V6.25ZM19.2803 16.7197L16.7803 14.2197C16.4874 13.9268 16.0126 13.9268 15.7197 14.2197L13.2197 16.7197C12.9268 17.0126 12.9268 17.4874 13.2197 17.7803C13.5126 18.0732 13.9874 18.0732 14.2803 17.7803L15.5 16.5607V20.25C15.5 20.6642 15.8358 21 16.25 21C16.6642 21 17 20.6642 17 20.25V16.5607L18.2197 17.7803C18.5126 18.0732 18.9874 18.0732 19.2803 17.7803C19.5732 17.4874 19.5732 17.0126 19.2803 16.7197Z" 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_in_24_regular.svg";

Details

Keywords

heightresizefillininward