The Phosphor notebook icon visually represents a book or journal, commonly used in user interfaces to signify features related to note-taking, editing, or accessing saved information.
Common uses
- Button to open a notes editor
- Link to a user's journal entries
- Indicator for saved drafts or logs
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Notebook } from '@phosphor-icons/react';
<Notebook size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Notebook size={24} />thin
<Notebook size={24} weight="thin" />light
<Notebook size={24} weight="light" />bold
<Notebook size={24} weight="bold" />fill
<Notebook size={24} weight="fill" />duotone
<Notebook size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- notesnote-takingmemorandumjournaldiarylogslogbookofficeeditornotebook
FAQ
- What is the notebook icon typically used for?
- It's used to represent features for writing, editing, or viewing notes, journals, logs, or other text-based content.
- How do I use the notebook icon in React?
- Import it from the library like this: import { Notebook } from '@phosphor-icons/react'. Then use it as a React component: <Notebook size={24} />.
- What is the license for the Phosphor notebook icon?
- The Phosphor icon library, including the notebook icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →