Arrow Up Right icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_up_right_24_regular.svg" width="24" height="24" alt="Arrow 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="M10.7507 3C10.3365 3 10.0007 3.33579 10.0007 3.75C10.0007 4.16421 10.3365 4.5 10.7507 4.5H18.4198L3.22003 19.6998C2.92145 19.9983 2.92145 20.4824 3.22003 20.781C3.5186 21.0796 4.00269 21.0796 4.30126 20.781L19.5007 5.58158V13.25C19.5007 13.6642 19.8365 14 20.2507 14C20.6649 14 21.0007 13.6642 21.0007 13.25V3.75C21.0007 3.33579 20.6649 3 20.2507 3H10.7507Z" 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_up_right_24_regular.svg";

Details