The Phosphor compass icon depicts a navigational instrument used to indicate direction, commonly employed in UI for features related to navigation, location, or exploration.
Common uses
- Map application direction indicator
- User location marker
- Travel or adventure section header
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Compass } from '@phosphor-icons/react';
<Compass size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Compass size={24} />thin
<Compass size={24} weight="thin" />light
<Compass size={24} weight="light" />bold
<Compass size={24} weight="bold" />fill
<Compass size={24} weight="fill" />duotone
<Compass size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- maps & travel
- Keywords
- navigationdirectionsmapssafariapplemaps & travelobjectscompasslocation
FAQ
- What is the compass icon used for?
- It's used to represent navigation, directions, maps, and the concept of finding one's way. It's suitable for travel or location-based features.
- How do I use the compass icon in React?
- You can import it directly from the library like this: import { Compass } from '@phosphor-icons/react'.
- What is the license for the Phosphor compass icon?
- The Phosphor icon library, including the compass 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 →