Arrow Step In icon
Used for debugging scenarios. Contains direction variants. The Arrow Step 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 Step 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 { ArrowStepIn24Regular, ArrowStepIn24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowStepIn24Regular aria-label="Arrow Step In" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_step_in_24_regular.svg" width="24" height="24" alt="Arrow Step 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="M12 2C12.4142 2 12.75 2.33579 12.75 2.75V12.0064L16.2342 8.70554C16.5349 8.42066 17.0096 8.43349 17.2945 8.73419C17.5793 9.03489 17.5665 9.50959 17.2658 9.79447L12.5158 14.2945C12.2265 14.5685 11.7735 14.5685 11.4842 14.2945L6.73419 9.79447C6.43349 9.50959 6.42066 9.03489 6.70554 8.73419C6.99041 8.43349 7.46511 8.42066 7.76581 8.70554L11.25 12.0063V2.75C11.25 2.33579 11.5858 2 12 2ZM12 22C13.6569 22 15 20.6569 15 19C15 17.3431 13.6569 16 12 16C10.3431 16 9 17.3431 9 19C9 20.6569 10.3431 22 12 22ZM12 20.5C11.1716 20.5 10.5 19.8284 10.5 19C10.5 18.1716 11.1716 17.5 12 17.5C12.8284 17.5 13.5 18.1716 13.5 19C13.5 19.8284 12.8284 20.5 12 20.5Z" 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_step_in_24_regular.svg";Details
| Name | Arrow Step In |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_step_in_24_regular.svg |
| Filled file | ic_fluent_arrow_step_in_24_filled.svg |
| React components | ArrowStepIn24Regular, ArrowStepIn24Filled |
| License | MIT (© Microsoft Corporation) |