Menu

Beta
Sign in
Calendar SVG icon, rounded

Calendar SVG icon, rounded

A calendar symbol points to dates, events, or planned appointments. Add it to a booking website or a mobile app schedule view to help people choose or review dates.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/G_M-rUBDUlxe/amnt.svg" alt="Calendar" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M16 15L48 15C50.21 15 52 16.79 52 19L52 49C52 51.21 50.21 53 48 53L16 53C13.79 53 12 51.21 12 49L12 19C12 16.79 13.79 15 16 15Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 26L52 26M22 11L22 19M42 11L42 19" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 35L25 35M30 35L34 35M39 35L43 35M21 44L25 44M30 44L34 44M39 44L43 44" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.calendar {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/G_M-rUBDUlxe/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.calendar {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/G_M-rUBDUlxe/amnt.svg") center / contain no-repeat;
}
React
import CalendarSvg from "./calendar.jsx"; // from the React tab above

<CalendarSvg width={48} height={48} />

Tags

calendardateeventschedule

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Calendar. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings