The Phosphor calendar icon visually represents a date or a schedule, commonly used in user interfaces to indicate actions related to viewing, selecting, or managing dates and events.
Common uses
- Date picker input
- Event listing
- Calendar view toggle
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Calendar } from '@phosphor-icons/react';
<Calendar size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Calendar size={24} />thin
<Calendar size={24} weight="thin" />light
<Calendar size={24} weight="light" />bold
<Calendar size={24} weight="bold" />fill
<Calendar size={24} weight="fill" />duotone
<Calendar size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- datestimeseventsschedule12officesystemcalendardateeventplanner
FAQ
- What is the calendar icon used for?
- It's used to represent dates, schedules, or events. It typically triggers actions like opening a date picker or navigating to a calendar view.
- How do I use the calendar icon in React?
- You can import it from the Phosphor React library and use it as a component: import { Calendar } from '@phosphor-icons/react'.
- What is the license for the Phosphor calendar icon?
- The Phosphor icon library, including the calendar 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 →