The Heroicons bookmark square icon depicts a square shape with a bookmark symbol, commonly used to represent saving or marking content for later reference.
Common uses
- Save article for later
- Bookmark a user profile
- Mark a favorite item
Use it in React
Install
npm i @heroicons/reactImport & render
import { BookmarkSquareIcon } from '@heroicons/react/24/outline';
<BookmarkSquareIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<BookmarkSquareIcon className="size-6" />24/solid
<BookmarkSquareIcon className="size-6" />20/solid
<BookmarkSquareIcon className="size-6" />16/solid
<BookmarkSquareIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- bookmarksquaresave iconmark iconfavorite square
FAQ
- What is the bookmark square icon used for?
- It's typically used to indicate an action for saving or marking content, like saving an article or bookmarking a page.
- How do I use the bookmark square icon in React?
- You can import it from the Heroicons library like this: import { BookmarkSquareIcon } from '@heroicons/react/24/outline'.
- What is the license for Heroicons?
- Heroicons are available under the MIT license, allowing for free use in both personal and commercial projects.
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 →