The Phosphor calendar star icon depicts a calendar with a star, commonly used to highlight important dates, events, or favorites within a schedule or system.
Common uses
- Marking a favorite event on a calendar.
- Indicating a new or upcoming important date.
- Representing a scheduled task or reminder.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CalendarStar } from '@phosphor-icons/react';
<CalendarStar size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CalendarStar size={24} />thin
<CalendarStar size={24} weight="thin" />light
<CalendarStar size={24} weight="light" />bold
<CalendarStar size={24} weight="bold" />fill
<CalendarStar size={24} weight="fill" />duotone
<CalendarStar size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- *new*datestimeseventsschedulefavoritestarofficesystemcalendarfavorite dateimportant eventscheduled itemnew event
FAQ
- What is the calendar star icon used for?
- It's typically used to signify important dates, events, or items marked as favorites within a calendar or scheduling interface.
- How do I use the calendar star icon in React?
- You can import and use it like this: import { CalendarStar } from '@phosphor-icons/react'. Then, render it as a React component: <CalendarStar />.
- What is the license for the Phosphor calendar star icon?
- The Phosphor icon library, including the calendar star icon, is distributed 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 →