Free Calendar SVG Icon

Download as SVG or copy the code for HTML, React, and more.

Download

Download SVG

How to use

All snippets use a self-contained data URI — no external URL required.

HTML

Drop into any HTML page as a standard image element.

<img
  src="data:image/svg+xml;base64,…"
  alt="Calendar icon"
  width="24"
  height="24"
/>

React / Next.js

Use in any React component or Next.js page.

<img
  src="data:image/svg+xml;base64,…"
  alt="Calendar icon"
  width={24}
  height={24}
/>

CSS background

Use as a background image — no external assets needed.

.icon-calendar {
  background-image: url("data:image/svg+xml;base64,…");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

Inline SVG

Paste directly into HTML for full CSS control over strokes, fills, and colors.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <c
…

Related SVG icons