Creating Calendar Icons Using Pure HTML and CSS | cal.css

A calendar icon is a basic design for creating calendar icons using pure HTML and CSS to create simple regular calendar icons representing any dates.

calendar icon with dynamic date, calendar icon font awesome, input with calendar icon, calendar icon png, calendar svg free, css calendar icon

How to make use of it:

1. Insert the cal.css stylesheet into the HTML web page.

<link rel="stylesheet" href="cal.css" />

2. Create a calendar icon and change the month & date as follows:

// Jan 1st
<div class="cal">
  <div class="month">January</div>
  <div class="date">1</div>

3. Override the default styles to create your individual icon styles.

.cal {
  display: inline-block;
  border: .1px solid #CCCAC5;
  background-color: #FFF;
  width: 250px;
  font-family: Arial, sans-serif;
  text-align: center;

.cal .month {
  height: 50px;
  line-height: 50px;
  font-size: 2rem;
  text-transform: uppercase;
  background-color: #E75951;
  color: #FFF;

.cal .date {
  font-size: 10rem;
  color: #585858;
  line-height: 175px;

Create Plain Calendar Icons Using CSS, Calendar Icon Plugin/Github, calendar icon with date

See Demo And Download

Official Website(TheCoolBlackCat): Click Here

This superior jQuery/javascript plugin is developed by TheCoolBlackCat. For extra Advanced Usage, please go to the official website.