Arrow Autofit Content icon
Duplicate metaphor. Use Arrow Autofit instead. The Arrow Autofit Content 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 Content 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 { ArrowAutofitContent24Regular, ArrowAutofitContent24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowAutofitContent24Regular aria-label="Arrow Autofit Content" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_content_24_regular.svg" width="24" height="24" alt="Arrow Autofit Content"> 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.99388 4.18558C6.30561 4.45834 6.33719 4.93217 6.06443 5.24389L5.40284 5.99999H8.26456C8.67877 5.99999 9.01456 6.33578 9.01456 6.74999C9.01456 7.1642 8.67877 7.49999 8.26456 7.49999H5.40281L6.06444 8.25613C6.33719 8.56786 6.3056 9.04169 5.99388 9.31445C5.68215 9.58721 5.20833 9.55561 4.93557 9.24389L3.18557 7.24386C2.93814 6.96109 2.93815 6.53888 3.18557 6.25611L4.93557 4.25613C5.20833 3.9444 5.68216 3.91282 5.99388 4.18558ZM17.9502 5.24389C17.6775 4.93217 17.709 4.45834 18.0208 4.18558C18.3325 3.91282 18.8063 3.9444 19.0791 4.25613L20.8291 6.25611C21.0765 6.53888 21.0765 6.96109 20.8291 7.24386L19.0791 9.24389C18.8063 9.55561 18.3325 9.58721 18.0208 9.31445C17.709 9.04169 17.6775 8.56786 17.9502 8.25613L18.6118 7.49999H15.7501C15.3359 7.49999 15.0001 7.1642 15.0001 6.74999C15.0001 6.33578 15.3359 5.99999 15.7501 5.99999H18.6118L17.9502 5.24389ZM6 15.75C6 15.3358 6.33579 15 6.75 15H17.25C17.6642 15 18 15.3358 18 15.75C18 16.1642 17.6642 16.5 17.25 16.5H6.75C6.33579 16.5 6 16.1642 6 15.75ZM5.75 11C4.23122 11 3 12.2312 3 13.75V17.75C3 19.2688 4.23122 20.5 5.75 20.5H18.25C19.7688 20.5 21 19.2688 21 17.75V13.75C21 12.2312 19.7688 11 18.25 11H5.75ZM4.5 13.75C4.5 13.0596 5.05964 12.5 5.75 12.5H18.25C18.9404 12.5 19.5 13.0596 19.5 13.75V17.75C19.5 18.4404 18.9404 19 18.25 19H5.75C5.05964 19 4.5 18.4404 4.5 17.75V13.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_content_24_regular.svg";Details
| Name | Arrow Autofit Content |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_autofit_content_24_regular.svg |
| Filled file | ic_fluent_arrow_autofit_content_24_filled.svg |
| React components | ArrowAutofitContent24Regular, ArrowAutofitContent24Filled |
| License | MIT (© Microsoft Corporation) |