The Heroicons book open icon depicts an open book, commonly used to represent reading, learning, documentation, or educational content.
Common uses
- Link to documentation or help section
- Button to read an article or blog post
- Indicator for educational resources
Use it in React
Install
npm i @heroicons/reactImport & render
import { BookOpenIcon } from '@heroicons/react/24/outline';
<BookOpenIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<BookOpenIcon className="size-6" />24/solid
<BookOpenIcon className="size-6" />20/solid
<BookOpenIcon className="size-6" />16/solid
<BookOpenIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- bookopenreading icondocumentation iconmanual iconguide icon
FAQ
- What is the book open icon used for?
- It's typically used to signify reading, learning, documentation, or educational content within a user interface.
- How do I use the book open icon in React?
- Import it from Heroicons and use it like this: import { BookOpenIcon } from '@heroicons/react/24/outline'.
- What is the license for this icon?
- The Heroicons library, including the book open 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 →