The Phosphor hexagon icon depicts a six-sided polygon, commonly used to represent abstract shapes, geometric concepts, or as a structural element in UI design.
Common uses
- Representing geometric data points
- As a background element for hexagonal grids
- Indicating a 'six-sided' or 'hexagonal' option
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Hexagon } from '@phosphor-icons/react';
<Hexagon size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Hexagon size={24} />thin
<Hexagon size={24} weight="thin" />light
<Hexagon size={24} weight="light" />bold
<Hexagon size={24} weight="bold" />fill
<Hexagon size={24} weight="fill" />duotone
<Hexagon size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- 6shapespolygonsdesignhexagonshapepolygonsix sidesgeometry
FAQ
- What is the hexagon icon used for?
- It's used to visually represent a six-sided shape, often in contexts related to geometry, data, or abstract design elements.
- How do I use the hexagon icon in React?
- You can import and use it like this: `import { Hexagon } from '@phosphor-icons/react';` and then render `<Hexagon />`.
- What is the license for the Phosphor hexagon icon?
- The Phosphor icon library, including the hexagon 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 →