The Heroicons minus icon depicts a horizontal line, commonly used to indicate subtraction, removal, or collapsing an expandable element.
Common uses
- Remove item from list
- Collapse accordion section
- Decrement quantity
Use it in React
Install
npm i @heroicons/reactImport & render
import { MinusIcon } from '@heroicons/react/24/outline';
<MinusIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<MinusIcon className="size-6" />24/solid
<MinusIcon className="size-6" />20/solid
<MinusIcon className="size-6" />16/solid
<MinusIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- minusremovesubtractcollapsenegative
FAQ
- What is the minus icon used for?
- It's used for actions like removing items, collapsing sections, or indicating a negative value.
- How do I use the minus icon in React?
- Import it using: `import { MinusIcon } from '@heroicons/react/24/outline'`. Then render it as `<MinusIcon className="h-6 w-6" />`.
- What is the license for Heroicons?
- Heroicons are provided under the MIT license, allowing for free use.
Related icons
The same idea in other libraries, and near matches in Heroicons.
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 →