calendar date range icon

Common uses

• Date range picker component
• Event schedule display
• Booking system calendar

Use it in React

npm i @heroicons/react

import { CalendarDateRangeIcon } from '@heroicons/react/24/outline';

<CalendarDateRangeIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<CalendarDateRangeIcon className="size-6" />

<CalendarDateRangeIcon className="size-6" />

<CalendarDateRangeIcon className="size-6" />

<CalendarDateRangeIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

calendardaterangedate spancalendar periodtime frameschedule

FAQ

What is the purpose of the calendar date range icon?

This icon signifies a span of time, typically used in UI elements where users select or view a period between two specific dates.

How do I use this icon in React?

Import it using: import { CalendarDateRangeIcon } from '@heroicons/react/24/outline' and then use it as a React component.

What is the license for this icon?

The Heroicons library, including this icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.