Calendar icon

fa:calendar

The Calendar icon (fa:calendar) is a free SVG icon from the Font Awesome 4 set by Dave Gandy. It is drawn on a 1664 × 1792 grid. Font Awesome 4 icons are released under the Open Font License, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Font Awesome 4
Author: Dave Gandy
License: OFL-1.1
Size: 1664 × 1792

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1664" height="1792" viewBox="0 0 1664 1792"><path fill="currentColor" d="M128 1664h288v-288H128zm352 0h320v-288H480zm-352-352h288V992H128zm352 0h320V992H480zM128 928h288V640H128zm736 736h320v-288H864zM480 928h320V640H480zm768 736h288v-288h-288zm-384-352h320V992H864zM512 448V160q0-13-9.5-22.5T480 128h-64q-13 0-22.5 9.5T384 160v288q0 13 9.5 22.5T416 480h64q13 0 22.5-9.5T512 448m736 864h288V992h-288zM864 928h320V640H864zm384 0h288V640h-288zm32-480V160q0-13-9.5-22.5T1248 128h-64q-13 0-22.5 9.5T1152 160v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5m384-64v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V384q0-52 38-90t90-38h128v-96q0-66 47-113T416 0h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90"/></svg>

How to use the Calendar icon

React

import { Icon } from "@iconify/react";

<Icon icon="fa:calendar" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fa:calendar" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fa:calendar" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fa--calendar]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fa -->
<div class="i-fa:calendar"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fa:calendar"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fa/calendar.svg" alt="Calendar icon" width="24" height="24">

Related icons in Font Awesome 4

Calendar icon in other icon sets

Calendar icon FAQ

Is the Calendar icon free for commercial use?

Yes. Font Awesome 4 icons are released under the Open Font License, which allows use in personal and commercial projects.

How do I use the Calendar icon in React?

Install @iconify/react and render <Icon icon="fa:calendar" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Calendar icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fa/calendar.svg" alt="Calendar icon">, or paste the SVG code inline to style it with CSS.

Browse all Font Awesome 4 icons →