Arrow Step In Right icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M8.70554 16.2342C8.42066 16.5349 8.43349 17.0096 8.73419 17.2945C9.03489 17.5793 9.50959 17.5665 9.79447 17.2658L14.2945 12.5158C14.5685 12.2265 14.5685 11.7735 14.2945 11.4842L9.79447 6.73419C9.50959 6.43349 9.03489 6.42066 8.73419 6.70554C8.43349 6.99041 8.42066 7.46511 8.70554 7.76581L12.0064 11.25H2.75C2.33579 11.25 2 11.5858 2 12C2 12.4142 2.33579 12.75 2.75 12.75H12.0063L8.70554 16.2342ZM22 12C22 10.3431 20.6569 9 19 9C17.3431 9 16 10.3431 16 12C16 13.6569 17.3431 15 19 15C20.6569 15 22 13.6569 22 12ZM20.5 12C20.5 12.8284 19.8284 13.5 19 13.5C18.1716 13.5 17.5 12.8284 17.5 12C17.5 11.1716 18.1716 10.5 19 10.5C19.8284 10.5 20.5 11.1716 20.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_right_24_regular.svg";

Details

Keywords

arrowdirectiondebuggingcodesteps