Arrow Fit In icon
Used to scale content to fit. Shared with Arrow Fit & similar to Auto Fit. The Arrow Fit In 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 Fit 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 { ArrowFitIn24Regular, ArrowFitIn24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowFitIn24Regular aria-label="Arrow Fit In" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_fit_in_24_regular.svg" width="24" height="24" alt="Arrow Fit 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="M6.23826 7.45171C5.93545 7.73434 5.91908 8.20893 6.20171 8.51174L8.52409 11H2.75C2.33579 11 2 11.3358 2 11.75C2 12.1642 2.33579 12.5 2.75 12.5H8.52409L6.20171 14.9883C5.91908 15.2911 5.93545 15.7657 6.23826 16.0483C6.54107 16.3309 7.01567 16.3146 7.29829 16.0117L10.7983 12.2617C11.0672 11.9736 11.0672 11.5264 10.7983 11.2383L7.29829 7.48826C7.01567 7.18545 6.54107 7.16909 6.23826 7.45171ZM17.7617 7.45171C18.0646 7.73434 18.0809 8.20893 17.7983 8.51174L15.4759 11H21.25C21.6642 11 22 11.3358 22 11.75C22 12.1642 21.6642 12.5 21.25 12.5H15.4759L17.7983 14.9883C18.0809 15.2911 18.0646 15.7657 17.7617 16.0483C17.4589 16.3309 16.9843 16.3146 16.7017 16.0117L13.2017 12.2617C12.9328 11.9736 12.9328 11.5264 13.2017 11.2383L16.7017 7.48826C16.9843 7.18545 17.4589 7.16909 17.7617 7.45171Z" 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_fit_in_24_regular.svg";Details
| Name | Arrow Fit In |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_fit_in_24_regular.svg |
| Filled file | ic_fluent_arrow_fit_in_24_filled.svg |
| React components | ArrowFitIn24Regular, ArrowFitIn24Filled |
| License | MIT (© Microsoft Corporation) |