The Phosphor map pin area icon visually represents a geographical region or zone associated with a specific location, often used to highlight an area of interest on a map.
Common uses
- Displaying a search radius around a location
- Indicating a neighborhood or district on a map
- Marking a service area for a business
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { MapPinArea } from '@phosphor-icons/react';
<MapPinArea size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<MapPinArea size={24} />thin
<MapPinArea size={24} weight="thin" />light
<MapPinArea size={24} weight="light" />bold
<MapPinArea size={24} weight="bold" />fill
<MapPinArea size={24} weight="fill" />duotone
<MapPinArea size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- maps & travel
- Keywords
- *new*mapsplacesmarkerspinslocationspoipoint of interestmaps & travelmappinareamap zonelocation radiusmap regionarea marker
FAQ
- What does the map pin area icon represent?
- This icon depicts a map pin with a surrounding area, suggesting a zone or region rather than a single point. It's useful for representing broader locations like districts or service areas.
- How do I use the map pin area icon in React?
- You can import and use it in your React application with the following statement: `import { MapPinArea } from '@phosphor-icons/react'`. Then, render it as a component: `<MapPinArea />`.
- What is the license for the map pin area icon?
- The Phosphor icon set, including the map pin area 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 →