The Tabler square x icon depicts a stylized 'X' within a square, commonly used to signify actions like closing a modal, deleting an item, or canceling an operation.
Common uses
- Close button for dialogs
- Delete item confirmation
- Cancel operation
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconSquareX } from '@tabler/icons-react';
<IconSquareX size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconSquareX size={24} stroke={2} />filled
<IconSquareXFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Shapes
- Keywords
- cancelclosedeleteremovetimesclearnosquarerectangulargeometryshapesxclose squarecancel squaredelete squaretimes square
FAQ
- What does the square x icon represent?
- It represents an 'X' or a cross symbol within a square, typically used for closing, deleting, or canceling actions in a user interface.
- How do I use the square x icon in React?
- You can import and use it in React with: import { IconSquareX } from '@tabler/icons-react'. Then render it as <IconSquareX />.
- What is the license for the square x icon?
- The Tabler icon library, including the square x icon, is distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler 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 →