The Lucide calendar range icon depicts a calendar with a highlighted date range, commonly used to represent selection of multiple days, a period, or an event spanning time.
Common uses
- Date range picker
- Event scheduling
- Time period selection
Use it in React
Install
npm i lucide-reactImport & render
import { CalendarRange } from 'lucide-react';
<CalendarRange size={24} />Details
- Library
- Lucide (1,713 icons)
- License
- ISC
- viewBox
0 0 24 24- Keywords
- datedaymonthyeareventrangeperiodcalendardate rangecalendar periodevent durationmonth view
FAQ
- What is the calendar range icon used for?
- It's used in UIs to signify the selection of a span of dates, like a vacation period or a specific month.
- How do I use the calendar range icon in React?
- You can import and use it like this: import { CalendarRange } from 'lucide-react'. Then render it as <CalendarRange />.
- What is the license for the Lucide calendar range icon?
- The Lucide icon library, including the calendar range icon, is available under the ISC license.
Related icons
The same idea in other libraries, and near matches in Lucide.
Looking for something else? Search Lucide 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 →