Color

Carbon Icons

Calendar 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 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/319631.svg" alt="Calendar icon" width="24" height="24">

React JSX

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

Vue template

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

CSS background

.icon-calendar {
  background-image: url('https://proicons.com/icon/319631.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_1_" d="M30,31.36H2c-0.199,0-0.36-0.161-0.36-0.36V4c0-0.199,0.161-0.36,0.36-0.36h5.64V1h0.72v2.64h7.28V1h0.72
	v2.64h7.28V1h0.721v2.64H30c0.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.28V7
	h-0.72V4.36h-7.28V7h-0.72V4.36H8.36V7H7.64V4.36H2.36V30.64z M25,27.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2
	c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2C25.36,27.199,25.199,27.36,25,27.36z M23.36,26.64h1.279v-1.28
	H23.36V26.64z M17,27.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2
	C17.36,27.199,17.199,27.36,17,27.36z M15.36,26.64h1.28v-1.28h-1.28V26.64z M9,27.36H7c-0.199,0-0.36-0.161-0.36-0.36v-2
	c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2C9.36,27.199,9.199,27.36,9,27.36z M7.36,26.64h1.28v-1.28H7.36
	V26.64z M25,20.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2
	C25.36,20.199,25.199,20.36,25,20.36z M23.36,19.64h1.279v-1.28H23.36V19.64z M17,20.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2
	c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2C17.36,20.199,17.199,20.36,17,20.36z M15.36,19.64h1.28v-1.28
	h-1.28V19.64z M9,20.36H7c-0.199,0-0.36-0.161-0.36-0.36v-2c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2
	C9.36,20.199,9.199,20.36,9,20.36z M7.36,19.64h1.28v-1.28H7.36V19.64z M25,13.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2
	c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2C25.36,13.199,25.199,13.36,25,13.36z M23.36,12.64h1.279v-1.28
	H23.36V12.64z M17,13.36h-2c-0.199,0-0.36-0.161-0.36-0.36v-2c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2
	C17.36,13.199,17.199,13.36,17,13.36z M15.36,12.64h1.28v-1.28h-1.28V12.64z M9,13.36H7c-0.199,0-0.36-0.161-0.36-0.36v-2
	c0-0.199,0.161-0.36,0.36-0.36h2c0.199,0,0.36,0.161,0.36,0.36v2C9.36,13.199,9.199,13.36,9,13.36z M7.36,12.64h1.28v-1.28H7.36
	V12.64z"/>
<rect id="_Transparent_Rectangle" style="fill:none;" width="32" height="32"/>
</svg>

Calendar in other icon packs

Tabler Icons Filled

Tabler Icons Outline

Bootstrap Icons

Phosphor Icons

Eva Icons Filled

Feather Icons

Copied!

Calendar Icon

More from Carbon Icons

Calendar in other icon packs