The Heroicons bookmark slash icon depicts a bookmark with a diagonal line through it, commonly used to indicate that a bookmark has been removed or is no longer active.
Common uses
- Unsaved bookmark button
- Remove bookmark action
- Disabled bookmark state
Use it in React
Install
npm i @heroicons/reactImport & render
import { BookmarkSlashIcon } from '@heroicons/react/24/outline';
<BookmarkSlashIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<BookmarkSlashIcon className="size-6" />24/solid
<BookmarkSlashIcon className="size-6" />20/solid
<BookmarkSlashIcon className="size-6" />16/solid
<BookmarkSlashIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- bookmarkslashunbookmarkremove bookmarkno bookmarkbookmark off
FAQ
- What does the bookmark slash icon represent?
- It signifies the removal or deactivation of a bookmark. It's used when an item is no longer bookmarked.
- How do I use this icon in React?
- Import it from Heroicons like this: import { BookmarkSlashIcon } from '@heroicons/react/24/outline'. Then use it as a React component.
- What is the license for this icon?
- The Heroicons bookmark slash icon is available under the MIT license.
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 →