The Phosphor exclude square icon visually represents the concept of set difference or exclusion, often used in UI to denote removing an item from a selection or a group.
Common uses
- Removing an item from a list or group.
- Deselecting an option in a multi-select interface.
- Indicating a 'not included' or 'excluded' status.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ExcludeSquare } from '@phosphor-icons/react';
<ExcludeSquare size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ExcludeSquare size={24} />thin
<ExcludeSquare size={24} weight="thin" />light
<ExcludeSquare size={24} weight="light" />bold
<ExcludeSquare size={24} weight="bold" />fill
<ExcludeSquare size={24} weight="fill" />duotone
<ExcludeSquare size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- venn-diagramdifferenceintersectiondesigneditorexcludesquareremoveminussubtractnot
FAQ
- What is the exclude square icon used for?
- It's used to signify exclusion, removal, or set difference in UI elements, like deselecting items or showing something is not part of a group.
- How do I use the exclude square icon in React?
- You can import and use it like this: import { ExcludeSquare } from '@phosphor-icons/react'.
- What is the license for the Phosphor exclude square icon?
- The Phosphor icon library, including the exclude square 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 →