Calendar Add Svg Icon
Free SVG icon from the IconaMoon collection. Download or copy for use in any project.
The Calendar Add Svg 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/308247.svg" alt="Calendar Add Svg icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/308247.svg" alt="Calendar Add Svg icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/308247.svg" alt="Calendar Add Svg icon" :width="24" :height="24" />
CSS background
.icon-calendar-add---svg {
background-image: url('https://proicons.com/icon/308247.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20V7H4V4Z" fill="#FF7878"/> <path d="M4 4V3C3.44772 3 3 3.44772 3 4H4ZM20 4H21C21 3.44772 20.5523 3 20 3V4ZM20 7V8H21V7H20ZM4 7H3V8H4V7ZM4 5H20V3H4V5ZM19 4V7H21V4H19ZM20 6H4V8H20V6ZM5 7V4H3V7H5Z" fill="#FF7878"/> <path d="M4 9H20V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V9Z" fill="#FF4B4B"/> <path d="M4 9V8H3V9H4ZM20 9H21V8H20V9ZM4 10H20V8H4V10ZM19 9V18H21V9H19ZM18 19H6V21H18V19ZM5 18V9H3V18H5ZM6 19C5.44772 19 5 18.5523 5 18H3C3 19.6569 4.34315 21 6 21V19ZM19 18C19 18.5523 18.5523 19 18 19V21C19.6569 21 21 19.6569 21 18H19Z" fill="#FF4B4B"/> <path d="M16 3V5" stroke="#EA2B2B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3V5" stroke="#EA2B2B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 12V16" stroke="#FFB2B2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 14H14" stroke="#EBE3E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
More from IconaMoon
View all
Copied!