Arrow Outline Up Right icon

Use the Arrow Outline Up 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 { ArrowOutlineUpRight24Regular, ArrowOutlineUpRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowOutlineUpRight24Regular aria-label="Arrow Outline Up Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_outline_up_right_24_regular.svg" width="24" height="24" alt="Arrow Outline Up 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="M20.4951 4C20.5269 3.71339 20.2848 3.47121 19.9982 3.50306L7.93654 4.84324C7.56152 4.8849 7.40123 5.34187 7.66804 5.60868L9.4658 7.40645C9.75869 7.69934 9.75869 8.17421 9.4658 8.46711L3.6318 14.3011C3.45607 14.4768 3.45607 14.7618 3.6318 14.9375L9.06093 20.3666C9.23667 20.5424 9.52159 20.5424 9.69733 20.3666L15.5313 14.5326C15.8242 14.2397 16.2991 14.2397 16.592 14.5326L18.3895 16.3301C18.6563 16.5969 19.1133 16.4366 19.1549 16.0616L20.4951 4ZM19.8325 2.01223C21.0745 1.87423 22.1239 2.92366 21.9859 4.16565L20.6457 16.2273C20.4652 17.8524 18.485 18.547 17.3288 17.3908L16.0617 16.1236L10.758 21.4273C9.99647 22.1888 8.7618 22.1888 8.00027 21.4273L2.57114 15.9982C1.80962 15.2366 1.80962 14.002 2.57114 13.2404L7.87481 7.93678L6.60738 6.66934C5.4512 5.51317 6.1458 3.53298 7.77089 3.35241L19.8325 2.01223Z" 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_outline_up_right_24_regular.svg";

Details

Keywords

pointdirectiondiagonalshape