The Phosphor flow arrow icon, also known as flow-arrow, depicts a curved arrow with a distinct arrowhead, commonly used to indicate direction or progression in flowcharts and user interface elements.
Common uses
- Indicating the next step in a multi-step process.
- Representing a connection between two elements in a diagram.
- Showing a directional flow in a user interface.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { FlowArrow } from '@phosphor-icons/react';
<FlowArrow size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<FlowArrow size={24} />thin
<FlowArrow size={24} weight="thin" />light
<FlowArrow size={24} weight="light" />bold
<FlowArrow size={24} weight="bold" />fill
<FlowArrow size={24} weight="fill" />duotone
<FlowArrow size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- *updated*flowchartarrowheadarrowsdesignofficeflowarrowcurved arrowprocess arrowflowchart arrownext step arrow
FAQ
- What is the flow arrow icon typically used for?
- It's used to show direction or progression, especially in flowcharts, diagrams, and UI elements that guide users through a process.
- How do I use the flow arrow icon in React?
- You can import it directly from the library using: import { FlowArrow } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the flow arrow icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →