The Phosphor calendar blank icon depicts an empty calendar page, commonly used to represent actions related to scheduling, dates, or events where no specific date is yet selected.
Common uses
- Date input field placeholder
- Button to open a date picker
- Placeholder for an upcoming event
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CalendarBlank } from '@phosphor-icons/react';
<CalendarBlank size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CalendarBlank size={24} />thin
<CalendarBlank size={24} weight="thin" />light
<CalendarBlank size={24} weight="light" />bold
<CalendarBlank size={24} weight="bold" />fill
<CalendarBlank size={24} weight="fill" />duotone
<CalendarBlank size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- datestimeseventsschedulenoneofficesystemcalendarblankempty calendarschedule icondate iconplanning
FAQ
- What is the calendar blank icon used for?
- It's typically used to signify an empty calendar or a placeholder for date-related selections, such as choosing a specific date or viewing a schedule.
- How do I use the calendar blank icon in React?
- You can import and use it like this: `import { CalendarBlank } from '@phosphor-icons/react'`. Then render it as `<CalendarBlank />`.
- What is the license for this icon?
- The Phosphor icon library, including the calendar blank 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 →