Color

Carbon Icons

Calendar Date Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: calendar date schedule event time plan

The Calendar Date icon is commonly used in booking systems, scheduling apps and event listings. Available as a free SVG - copy the code or download directly.

img tag

<img src="https://proicons.com/icon/319629.svg" alt="Calendar Date icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/319629.svg" alt="Calendar Date icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/319629.svg"
  alt="Calendar Date icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-calendar-date {
  background-image: url('https://proicons.com/icon/319629.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path id="calendar--date_1_" d="M11.608,17.531c0.757,0,1.326-0.172,1.704-0.518c0.378-0.345,0.568-0.788,0.568-1.33v-0.111
	c0-0.584-0.184-1.022-0.552-1.314s-0.851-0.438-1.448-0.438c-0.576,0-1.046,0.125-1.408,0.376c-0.363,0.25-0.662,0.589-0.896,1.016
	l-0.992-0.768c0.139-0.224,0.307-0.445,0.504-0.662s0.43-0.41,0.696-0.578s0.576-0.305,0.928-0.411
	c0.352-0.105,0.752-0.158,1.2-0.158c0.469,0,0.912,0.061,1.328,0.183s0.776,0.303,1.08,0.542c0.304,0.239,0.544,0.534,0.72,0.884
	c0.176,0.351,0.264,0.749,0.264,1.194c0,0.361-0.056,0.685-0.168,0.971c-0.112,0.287-0.264,0.537-0.456,0.749
	c-0.192,0.213-0.419,0.393-0.68,0.541c-0.261,0.149-0.542,0.261-0.84,0.335v0.064c0.298,0.064,0.589,0.169,0.872,0.313
	c0.282,0.145,0.533,0.332,0.752,0.562c0.218,0.23,0.395,0.508,0.528,0.835s0.2,0.699,0.2,1.116c0,0.482-0.091,0.924-0.272,1.326
	c-0.182,0.401-0.438,0.744-0.768,1.027c-0.331,0.285-0.731,0.507-1.2,0.668c-0.469,0.16-0.987,0.24-1.552,0.24
	c-0.48,0-0.907-0.053-1.28-0.158c-0.374-0.104-0.704-0.246-0.992-0.426c-0.288-0.179-0.542-0.38-0.76-0.602
	c-0.219-0.223-0.414-0.457-0.584-0.702l1.008-0.769c0.138,0.225,0.291,0.428,0.456,0.608c0.165,0.182,0.349,0.336,0.552,0.464
	s0.432,0.227,0.688,0.296S11.363,23,11.704,23c0.789,0,1.387-0.18,1.792-0.541c0.405-0.359,0.608-0.872,0.608-1.539v-0.129
	c0-0.666-0.203-1.18-0.608-1.539c-0.405-0.36-1.003-0.54-1.792-0.54h-1.312v-1.185h1.216V17.531z M18.071,23.996v-1.185h3.119V13.82
	h-0.111l-2.816,2.624l-0.784-0.848l2.96-2.768h2.097v9.984h2.88v1.185L18.071,23.996L18.071,23.996z M30,31.36H2
	c-0.199,0-0.36-0.161-0.36-0.36V4c0-0.199,0.161-0.36,0.36-0.36h5.64V1h0.72v2.64h15.28V1h0.721v2.64H30
	c0.199,0,0.36,0.161,0.36,0.36v27C30.36,31.199,30.199,31.36,30,31.36z M2.36,30.64h27.28V4.36h-5.28V7h-0.72V4.36H8.36V7H7.64V4.36
	H2.36V30.64z"/>
<rect id="_Transparent_Rectangle" style="fill:none;" width="32" height="32"/>
</svg>

Calendar Date in other icon packs

Bootstrap Icons

Atlas Icons

Streamline Vectors Outline

Solar Icons Filled

Solar Icons

Copied!

Calendar Date Icon

More from Carbon Icons

Calendar Date in other icon packs