The Phosphor calendar heart icon depicts a calendar with a heart symbol, commonly used to represent important dates, anniversaries, or favorited events within an application.
Common uses
- Marking a user's birthday on a calendar.
- Indicating a favorite or saved event.
- Highlighting a special date or holiday.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CalendarHeart } from '@phosphor-icons/react';
<CalendarHeart size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CalendarHeart size={24} />thin
<CalendarHeart size={24} weight="thin" />light
<CalendarHeart size={24} weight="light" />bold
<CalendarHeart size={24} weight="bold" />fill
<CalendarHeart size={24} weight="fill" />duotone
<CalendarHeart size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- office
- Keywords
- *new*datestimeseventsschedulefavoritestarofficesystemcalendarheartfavorite datespecial eventsaved calendaranniversary
FAQ
- What is the calendar heart icon used for?
- It's used to signify special dates, favorited events, or important calendar entries.
- How do I use the calendar heart icon in React?
- Import it from the library like this: import { CalendarHeart } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including this 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 →