The Phosphor calendar dots icon visually represents scheduled events or important dates marked on a calendar, commonly used to indicate a day with appointments or activities.
Common uses
- Highlighting days with upcoming events in a calendar view.
- Indicating a deadline or important date in a task list.
- Signifying a scheduled meeting or appointment.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CalendarDots } from '@phosphor-icons/react';
<CalendarDots size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CalendarDots size={24} />thin
<CalendarDots size={24} weight="thin" />light
<CalendarDots size={24} weight="light" />bold
<CalendarDots size={24} weight="bold" />fill
<CalendarDots size={24} weight="fill" />duotone
<CalendarDots size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- *new*datestimeseventsscheduleofficesystemcalendardotsevent markerscheduled daydate indicatorappointment icon
FAQ
- What is the purpose of the calendar dots icon?
- This icon is used to draw attention to specific dates that have associated events, appointments, or deadlines.
- How do I use the calendar dots icon in React?
- You can import and use it in your React application with: import { CalendarDots } from '@phosphor-icons/react'.
- What is the license for the Phosphor calendar dots icon?
- The Phosphor icon library, including the calendar dots 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 →