The Phosphor x square icon depicts a stylized 'X' within a square, commonly used to represent closing, canceling, or dismissing an element.
Common uses
- Close modal window
- Cancel an action
- Dismiss a notification
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { XSquare } from '@phosphor-icons/react';
<XSquare size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<XSquare size={24} />thin
<XSquare size={24} weight="thin" />light
<XSquare size={24} weight="light" />bold
<XSquare size={24} weight="bold" />fill
<XSquare size={24} weight="fill" />duotone
<XSquare size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- closedcancelleddismissedsystemxsquareclose squarecancel icondismiss buttonsystem close
FAQ
- What is the x square icon used for?
- It's typically used for actions like closing windows, canceling operations, or dismissing messages.
- How do I use the x square icon in React?
- Import it as XSquare from '@phosphor-icons/react' and use it like <XSquare size={32} />.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free use.
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 →