Arrow Step In Left icon

Use the Arrow Step In Left 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 { ArrowStepInLeft24Regular, ArrowStepInLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowStepInLeft24Regular aria-label="Arrow Step In Left" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_step_in_left_24_regular.svg" width="24" height="24" alt="Arrow Step In Left">

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="M15.2945 16.2342C15.5793 16.5349 15.5665 17.0096 15.2658 17.2945C14.9651 17.5793 14.4904 17.5665 14.2055 17.2658L9.70553 12.5158C9.43149 12.2265 9.43149 11.7735 9.70553 11.4842L14.2055 6.73419C14.4904 6.43349 14.9651 6.42066 15.2658 6.70554C15.5665 6.99041 15.5793 7.46511 15.2945 7.76581L11.9936 11.25H21.25C21.6642 11.25 22 11.5858 22 12C22 12.4142 21.6642 12.75 21.25 12.75H11.9937L15.2945 16.2342ZM2 12C2 10.3431 3.34315 9 5 9C6.65685 9 8 10.3431 8 12C8 13.6569 6.65685 15 5 15C3.34315 15 2 13.6569 2 12ZM3.5 12C3.5 12.8284 4.17157 13.5 5 13.5C5.82843 13.5 6.5 12.8284 6.5 12C6.5 11.1716 5.82843 10.5 5 10.5C4.17157 10.5 3.5 11.1716 3.5 12Z" 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_left_24_regular.svg";

Details

Keywords

arrowdirectiondebuggingcodesteps