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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>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_flow_up_right_24_regular.svg";Details
| Name | Arrow Flow Up Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_flow_up_right_24_regular.svg |
| Filled file | ic_fluent_arrow_flow_up_right_24_filled.svg |
| React components | ArrowFlowUpRight24Regular, ArrowFlowUpRight24Filled |
| License | MIT (© Microsoft Corporation) |