The Phosphor lighthouse icon depicts a tall, tower-like structure with a light at its top, commonly used to signify navigation, guidance, or a point of interest in maps and travel-related interfaces.
Common uses
- Indicate a user's current location on a map.
- Mark a destination or point of interest.
- Represent a 'beacon' or 'guide' feature in an app.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Lighthouse } from '@phosphor-icons/react';
<Lighthouse size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Lighthouse size={24} />thin
<Lighthouse size={24} weight="thin" />light
<Lighthouse size={24} weight="light" />bold
<Lighthouse size={24} weight="bold" />fill
<Lighthouse size={24} weight="fill" />duotone
<Lighthouse size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- maps & travel
- Keywords
- buildingsnauticalnavigationboatsshipssafetymaps & travellighthousebeacontowernavigation lightcoastal marker
FAQ
- What is the lighthouse icon used for?
- It's used to represent navigation, guidance, or a landmark, especially in map or travel contexts.
- How do I use the lighthouse icon in React?
- You can import and use it like this: `import { Lighthouse } from '@phosphor-icons/react'`. Then render it as `<Lighthouse />`.
- What is the license for the Phosphor lighthouse icon?
- The Phosphor icon library, including the lighthouse 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 →