Calendar Icons

Calendar represents a date or a span of time (a specific day, a scheduled event), while clock represents a specific time of day. Booking flows often use both together — a calendar icon for date selection and a clock icon for time selection — since they represent different, complementary pieces of scheduling information.

Some libraries include a variant with a small number or highlighted date on the grid, useful for representing 'today' or a specific event date, while a fully generic version (no numbers) works better as a general navigation icon that doesn't imply any specific date. Pick based on whether the icon needs to convey a specific moment or just the general concept of scheduling.

A calendar icon with a small plus sign overlay is the standard convention for 'add to calendar' or 'create event' actions, distinguishing it from a plain calendar icon used for general navigation or viewing an existing schedule.

Not necessarily in shape, but sizing and weight often differ — a date-picker trigger icon is typically small and sits inline within or next to an input field, while a navbar calendar icon (for accessing a full scheduling view) can be bolder or larger to match other navigation icons around it.

Each icon keeps the license from its source library attached to it, and terms can differ depending on which library a specific icon comes from. Check the license shown on the individual icon's page before using it commercially.

This distinction is usually communicated through a separate small badge or a different icon (like a looping arrow) layered near the calendar, rather than modifying the calendar icon itself, since recurrence is more of a property of the event than a visual feature of the date icon.