Calendar Cross Icon
Free SVG icon from the Mage Icons collection. Download or copy for use in any project.
The Calendar Cross 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/310583.svg" alt="Calendar Cross icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/310583.svg" alt="Calendar Cross icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/310583.svg" alt="Calendar Cross icon" :width="24" :height="24" />
CSS background
.icon-calendar-cross {
background-image: url('https://proicons.com/icon/310583.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="M17 4.625H7C4.79086 4.625 3 6.41586 3 8.625V17.375C3 19.5841 4.79086 21.375 7 21.375H17C19.2091 21.375 21 19.5841 21 17.375V8.625C21 6.41586 19.2091 4.625 17 4.625Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 9.625H21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 2.625V6.625" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7 2.625V6.625" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 13L10.0002 16.9913" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/> <path d="M10 13.0087L13.9998 17" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/> </svg>
Copied!