Calendar Date Range icon - Free SVG for React, Vue, Svelte, Angular, Solid & Preact - Customizable interface vector icon

Install with shadcn CLI

npx shadcn@latest add https://www.shadcn.io/registry/heroicons-calendar-date-range.json
npx shadcn@latest add https://www.shadcn.io/registry/heroicons-calendar-date-range.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/heroicons-calendar-date-range.json
bunx shadcn@latest add https://www.shadcn.io/registry/heroicons-calendar-date-range.json
Category:interface
Tags:calendardaterangeperiodspanselectionpicker

The calendar-date-range icon represents date range selection and period picking in modern scheduling interfaces.

Featuring a calendar with range indication markers, this symbol indicates date range pickers, period selection tools, span selectors, and multi-date range functionality across digital applications and booking platforms.

Frequently Asked Questions

Common questions about the Calendar Date Range icon

Similar Icons

Calculator 20 Solid - interface icon from HeroIcons
calculator 20 solid
Clock 16 Solid - interface icon from HeroIcons
clock 16 solid
Archive Box X Mark 16 Solid - actions icon from HeroIcons
archive box x mark 16 solid
No Symbol 16 Solid - status icon from HeroIcons
no symbol 16 solid
Arrow Trending Up 20 Solid - data icon from HeroIcons
arrow trending up 20 solid
Arrow Up Circle 20 Solid - navigation icon from HeroIcons
arrow up circle 20 solid
Server - system icon from HeroIcons
server
Question Mark Circle 20 Solid - communication icon from HeroIcons
question mark circle 20 solid
Signal - status icon from HeroIcons
signal