Arrow Step Out icon

Use the Arrow Step Out 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 { ArrowStepOut24Regular, ArrowStepOut24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowStepOut24Regular aria-label="Arrow Step Out" />;
}

Use it in HTML

Reference the SVG file directly:

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

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.75 13.75C12.75 14.1642 12.4142 14.5 12 14.5C11.5858 14.5 11.25 14.1642 11.25 13.75V4.49365L7.76581 7.79446C7.46511 8.07934 6.99041 8.06651 6.70554 7.76581C6.42066 7.46511 6.43349 6.99041 6.73419 6.70554L11.4842 2.20554C11.7735 1.93149 12.2265 1.93149 12.5158 2.20554L17.2658 6.70554C17.5665 6.99041 17.5793 7.46511 17.2945 7.76581C17.0096 8.06651 16.5349 8.07934 16.2342 7.79446L12.75 4.49365V13.75ZM15 19C15 20.6569 13.6569 22 12 22C10.3431 22 9 20.6569 9 19C9 17.3431 10.3431 16 12 16C13.6569 16 15 17.3431 15 19ZM10.5 19C10.5 19.8284 11.1716 20.5 12 20.5C12.8284 20.5 13.5 19.8284 13.5 19C13.5 18.1716 12.8284 17.5 12 17.5C11.1716 17.5 10.5 18.1716 10.5 19Z" 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_out_24_regular.svg";

Details

Keywords

arrowdirectiondebuggingcodesteps