What does the backspace icon represent?

It represents the action of deleting the preceding character or item, similar to the backspace key on a keyboard.

How do I use the backspace icon in React?

You can import and use it like this: import { BackspaceIcon } from '@heroicons/react/24/outline'.

What is the license for this icon?

The Heroicons backspace icon is available under the MIT license.

backspace icon

Heroicons · backspace · MIT

The Heroicons backspace icon depicts a left-pointing arrow over a horizontal line, commonly used to represent the action of deleting the last character or item.

Common uses

Deleting text input
Removing the last selected item
Clearing a form field

Use it in React

Install

npm i @heroicons/react

Import & render

import { BackspaceIcon } from '@heroicons/react/24/outline';

<BackspaceIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

24/outline

<BackspaceIcon className="size-6" />

24/solid

<BackspaceIcon className="size-6" />

20/solid

<BackspaceIcon className="size-6" />

16/solid

<BackspaceIcon className="size-6" />

Details

Library: Heroicons (324 icons)
License: MIT
viewBox: 0 0 24 24
Keywords: backspacedeleteundoclearremove

FAQ

What does the backspace icon represent?: It represents the action of deleting the preceding character or item, similar to the backspace key on a keyboard.
How do I use the backspace icon in React?: You can import and use it like this: import { BackspaceIcon } from '@heroicons/react/24/outline'.
What is the license for this icon?: The Heroicons backspace icon is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.

phosphor tabler

Looking for something else? Search Heroicons 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 →