The Phosphor puzzle piece icon visually represents a single component or element, often used in UIs to signify customization, modularity, or the act of fitting things together.
Common uses
- Indicate a plugin or extension setting.
- Represent a game level or component.
- Symbolize a missing or required part of a system.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { PuzzlePiece } from '@phosphor-icons/react';
<PuzzlePiece size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<PuzzlePiece size={24} />thin
<PuzzlePiece size={24} weight="thin" />light
<PuzzlePiece size={24} weight="light" />bold
<PuzzlePiece size={24} weight="bold" />fill
<PuzzlePiece size={24} weight="fill" />duotone
<PuzzlePiece size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- games
- Keywords
- board gameelementcomponentextensionplugingamestechnology & developmentpuzzlepiecepart
FAQ
- What does the puzzle piece icon represent?
- It typically represents a component, element, or a part of a larger whole. It's commonly used for concepts like plugins, extensions, or modular design.
- How do I use the puzzle piece icon in React?
- You can import it directly from the '@phosphor-icons/react' library and use it as a component: import { PuzzlePiece } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the puzzle piece 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 →