The Phosphor crosshair icon depicts a targeting reticle, commonly used in UI to indicate a focal point, a selected location on a map, or an aiming mechanism.
Common uses
- Map marker for current location
- Zoom control center point
- Aiming reticle in a game interface
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Crosshair } from '@phosphor-icons/react';
<Crosshair size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Crosshair size={24} />thin
<Crosshair size={24} weight="thin" />light
<Crosshair size={24} weight="light" />bold
<Crosshair size={24} weight="bold" />fill
<Crosshair size={24} weight="fill" />duotone
<Crosshair size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- maps & travel
- Keywords
- geolocationgpsaimingtargetingmaps & travelsystemcrosshairtargeting reticlegps markeraim iconmap center
FAQ
- What is the crosshair icon used for?
- It's typically used to represent a precise point, like a GPS location on a map, a target, or the center of an aiming system.
- How do I use the crosshair icon in React?
- Import it from the library like this: import { Crosshair } from '@phosphor-icons/react'. Then use it as a React component: <Crosshair size={32} />.
- What is the license for the Phosphor crosshair icon?
- The Phosphor icon library, including the crosshair 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 →