Arrow Turn Right icon

Use the Arrow Turn 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 { ArrowTurnRight24Regular, ArrowTurnRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowTurnRight24Regular aria-label="Arrow Turn Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_turn_right_24_regular.svg" width="24" height="24" alt="Arrow Turn 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="M16.2803 3.21964C15.9874 2.92676 15.5125 2.92679 15.2196 3.2197C14.9268 3.51261 14.9268 3.98748 15.2197 4.28036L18.4397 7.5H10.75C8.40279 7.5 6.5 9.40279 6.5 11.75V20C6.5 20.4142 6.83579 20.75 7.25 20.75C7.66421 20.75 8 20.4142 8 20V11.75C8 10.2312 9.23122 9 10.75 9H18.439L15.2196 12.2197C14.9268 12.5126 14.9268 12.9875 15.2197 13.2804C15.5126 13.5732 15.9875 13.5732 16.2804 13.2803L20.7804 8.77985C20.921 8.63919 21 8.44842 21 8.2495C21 8.05059 20.921 7.85983 20.7803 7.71919L16.2803 3.21964Z" 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_turn_right_24_regular.svg";

Details

Keywords

pointdirectionverticalhorizontalcorner