A calendar marked with its days, for a date picker, a month view and choosing a day. On a 24×24 grid in stroke, two-tone, duotone and fill, free under MIT.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 5L18 5C19.6569 5 21 6.34315 21 8L21 18C21 19.6569 19.6569 21 18 21L6 21C4.34315 21 3 19.6569 3 18L3 8C3 6.34315 4.34315 5 6 5ZM8 3L8 7M16 3L16 7" fill="none"/>
<path d="M9 12C9 12.5523 8.5523 13 8 13C7.4477 13 7 12.5523 7 12C7 11.4477 7.4477 11 8 11C8.5523 11 9 11.4477 9 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12ZM17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12ZM9 16C9 16.5523 8.5523 17 8 17C7.4477 17 7 16.5523 7 16C7 15.4477 7.4477 15 8 15C8.5523 15 9 15.4477 9 16ZM13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16ZM17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" stroke="none"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- date picker
- days
- month view
- calendar dots
- schedule
- day grid
- planner
- date
- event
- agenda
Related icons
The rest of the calendar family first, then the Time shelf.
FAQ
Answered from calendar-days's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the calendar-days icon for?
- A calendar marked with its days, for a date picker, a month view and choosing a day. It is filed under Time in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as date picker, days, month view, calendar dots, schedule, day grid, planner, date, event and agenda, and the browser's search matches all of those.
- What styles does the calendar-days icon come in?
- All four: stroke, two-tone, duotone and fill. They are drawn from the same geometry, so swapping style never moves anything.
- Is there a square or circle version of calendar-days?
- No. calendar-days is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with calendar-days?
- calendar, calendar-arrow-down, calendar-arrow-left, calendar-arrow-right, calendar-arrow-up and calendar-check, and 12 more, all shown below. The calendar family is listed first, then the rest of the Time shelf, so the row under this one is the useful one even where a shelf runs long.
- How do I import calendar-days in React?
- <CalendarDays /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", two-tone from "@keyline-icons/react/two-tone", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <CalendarDays size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the calendar-days SVG?
- icons/stroke/calendar-days.svg, icons/two-tone/calendar-days.svg, icons/duotone/calendar-days.svg and icons/fill/calendar-days.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was calendar-days added to the set?
- Added 28 Sept 2026. It ships in v1.4.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.