The Phosphor navigation arrow icon visually represents a direction or path, commonly used in user interfaces to indicate navigation, location, or movement.
Common uses
- Indicating a route on a map
- Signaling the next step in a guided tour
- Marking a user's current location
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { NavigationArrow } from '@phosphor-icons/react';
<NavigationArrow size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<NavigationArrow size={24} />thin
<NavigationArrow size={24} weight="thin" />light
<NavigationArrow size={24} weight="light" />bold
<NavigationArrow size={24} weight="bold" />fill
<NavigationArrow size={24} weight="fill" />duotone
<NavigationArrow size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- maps & travel
- Keywords
- locationdirectionscompassgpsmaps & travelnavigationarrowdirection iconroute iconmap marker arrowwayfinding icon
FAQ
- What is the navigation arrow icon used for?
- It's used to signify direction, location, or movement within an interface, often related to maps or navigation systems.
- How do I use the navigation arrow icon in React?
- Import it directly from the library: `import { NavigationArrow } from '@phosphor-icons/react'`. Then use it as a component: `<NavigationArrow />`.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, which allows for free usage in both personal and commercial projects.
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 →