Arrow Autofit Down icon

Use the Arrow Autofit Down 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 { ArrowAutofitDown24Regular, ArrowAutofitDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowAutofitDown24Regular aria-label="Arrow Autofit Down" />;
}

Use it in HTML

Reference the SVG file directly:

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

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 3C17.1642 3 17.5 3.33579 17.5 3.75V18.4395L18.7197 17.2197C19.0126 16.9268 19.4874 16.9268 19.7803 17.2197C20.0731 17.5126 20.0731 17.9874 19.7803 18.2803L17.2803 20.7803C17.0057 21.0548 16.5709 21.0722 16.2764 20.832L16.2197 20.7803L13.7197 18.2803C13.4269 17.9874 13.4269 17.5126 13.7197 17.2197C14.0126 16.9268 14.4874 16.9268 14.7803 17.2197L16 18.4395V3.75C16 3.33579 16.3358 3 16.75 3ZM13.25 4C13.6642 4 14 4.33579 14 4.75C13.9999 5.16413 13.6642 5.5 13.25 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V17.75C5.5001 18.1641 5.83585 18.5 6.25 18.5H11.25C11.6642 18.5 12 18.8358 12 19.25C11.9999 19.6641 11.6642 20 11.25 20H6.25C5.00742 20 4.0001 18.9926 4 17.75V6.25C4 5.00736 5.00736 4 6.25 4H13.25Z" 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_down_24_regular.svg";

Details

Keywords

widthheightresizefill