Arrow Flow Up Right icon

Used for scenarios involving connection points. The Arrow Flow Up Right icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 32 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

Filled

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_arrow_flow_up_right_24_regular.svg

npm install @fluentui/react-icons

import { ArrowFlowUpRight24Regular } from "@fluentui/react-icons";

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

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

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

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_flow_up_right_24_regular.svg" width="24" height="24" alt="Arrow Flow 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="M17.5303 3.21967C17.2374 2.92678 16.7626 2.92678 16.4697 3.21967C16.1768 3.51256 16.1768 3.98744 16.4697 4.28033L19.4393 7.25H14.5C12.7051 7.25 11.25 8.70507 11.25 10.5V13.5C11.25 14.3218 10.6836 15.0113 9.91985 15.1993C9.54896 13.3739 7.93492 12 6 12C3.79086 12 2 13.7909 2 16C2 18.2091 3.79086 20 6 20C7.96294 20 9.59563 18.5861 9.93517 16.7211C11.5243 16.5085 12.75 15.1474 12.75 13.5V10.5C12.75 9.5335 13.5335 8.75 14.5 8.75H19.4393L16.4697 11.7197C16.1768 12.0126 16.1768 12.4874 16.4697 12.7803C16.7626 13.0732 17.2374 13.0732 17.5303 12.7803L21.7803 8.53033C22.0732 8.23744 22.0732 7.76256 21.7803 7.46967L17.5303 3.21967ZM3.5 16C3.5 14.6193 4.61929 13.5 6 13.5C7.38071 13.5 8.5 14.6193 8.5 16C8.5 17.3807 7.38071 18.5 6 18.5C4.61929 18.5 3.5 17.3807 3.5 16Z" fill="currentColor"/></svg>

Details

Name	Arrow Flow Up Right
Styles	Regular (outlined), Filled
Sizes	16 px, 20 px, 24 px, 32 px
Regular (outlined) file	`ic_fluent_arrow_flow_up_right_24_regular.svg`
Filled file	`ic_fluent_arrow_flow_up_right_24_filled.svg`
React (Regular)	`ArrowFlowUpRight16Regular, ArrowFlowUpRight20Regular, ArrowFlowUpRight24Regular, ArrowFlowUpRight32Regular`
React (Filled)	`ArrowFlowUpRight16Filled, ArrowFlowUpRight20Filled, ArrowFlowUpRight24Filled, ArrowFlowUpRight32Filled`
License	MIT (© Microsoft Corporation)

Keywords

arrow direction

Arrow Flow Up Right icon

Every size and style