Arrow Fit icon
Used to scale content to fit. Shared with Arrow Fit In & similar to Auto Fit. The Arrow Fit 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 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 { ArrowFit24Regular, ArrowFit24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowFit24Regular aria-label="Arrow Fit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_fit_24_regular.svg" width="24" height="24" alt="Arrow Fit"> 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.76174 7.45171C7.06455 7.73434 7.08092 8.20893 6.79829 8.51174L4.47591 11H10.25C10.6642 11 11 11.3358 11 11.75C11 12.1642 10.6642 12.5 10.25 12.5H4.47591L6.79829 14.9883C7.08092 15.2911 7.06455 15.7657 6.76174 16.0483C6.45893 16.3309 5.98433 16.3146 5.70171 16.0117L2.20171 12.2617C1.93276 11.9736 1.93276 11.5264 2.20171 11.2383L5.70171 7.48826C5.98433 7.18545 6.45893 7.16909 6.76174 7.45171ZM17.2383 7.45171C16.9354 7.73434 16.9191 8.20893 17.2017 8.51174L19.5241 11H13.75C13.3358 11 13 11.3358 13 11.75C13 12.1642 13.3358 12.5 13.75 12.5H19.5241L17.2017 14.9883C16.9191 15.2911 16.9354 15.7657 17.2383 16.0483C17.5411 16.3309 18.0157 16.3146 18.2983 16.0117L21.7983 12.2617C22.0672 11.9736 22.0672 11.5264 21.7983 11.2383L18.2983 7.48826C18.0157 7.18545 17.5411 7.16909 17.2383 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_24_regular.svg";Details
| Name | Arrow Fit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_fit_24_regular.svg |
| Filled file | ic_fluent_arrow_fit_24_filled.svg |
| React components | ArrowFit24Regular, ArrowFit24Filled |
| License | MIT (© Microsoft Corporation) |