The Phosphor selection icon depicts a dashed square, commonly used in UI design to represent an active selection area or a placeholder for content.
Common uses
- Highlighting selected items in a list or grid.
- Indicating a draggable or resizable bounding box.
- Representing a placeholder for image uploads or content areas.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Selection } from '@phosphor-icons/react';
<Selection size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Selection size={24} />thin
<Selection size={24} weight="thin" />light
<Selection size={24} weight="light" />bold
<Selection size={24} weight="bold" />fill
<Selection size={24} weight="fill" />duotone
<Selection size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- marquisselectsquare dasheddesigneditorselectiondashed squareeditor selection
FAQ
- What is the selection icon used for?
- It visually indicates an active selection or a designated area within an interface, often seen in design tools or editors.
- How do I use the selection icon in React?
- Import it from the library and use it as a component: import { Selection } from '@phosphor-icons/react'; <Selection />.
- What is the license for the Phosphor selection icon?
- The Phosphor icon library, including the selection 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 →