Calendar

Animated calendar icon

Calendar is a 0.27 s micro animation from the action set that plays on hover and reverses on mouse leave, like Trash V2 and Settings. Hover icons typically mark navigation items, delete buttons, settings, zoom controls and social links.

Also known asdate pickerschedule

date

Download ZIP Lottie JSON

Free under the MIT license · Markdown version · About the files

Use it

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import calendar from 'react-useanimations/lib/calendar';

<UseAnimations animation={calendar} size={32} />

npx shadcn@latest add https://useanimations.com/r/calendar.json

import { AnimatedCalendar } from '@/components/animations/calendar';

<AnimatedCalendar size={24} />

<div id="calendar-icon" style="width: 48px; height: 48px"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie_light.min.js"></script>
<script>
  const el = document.getElementById('calendar-icon');
  const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/calendar.json' });
  el.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });
  el.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });
</script>

Calendar runs on the light build, lottie_light.min.js.

React Native

import LottieView from 'lottie-react-native';

<LottieView source={{ uri: 'https://useanimations.com/icons/calendar.json' }} autoPlay loop={false} style={{ width: 48, height: 48 }} />

iOS (SwiftUI)

import Lottie

LottieView {
  await LottieAnimation.loadedFrom(url: URL(string: "https://useanimations.com/icons/calendar.json")!)
}
.playing(loopMode: .playOnce)
.frame(width: 48, height: 48)

Android (Compose)

val composition by rememberLottieComposition(LottieCompositionSpec.Url("https://useanimations.com/icons/calendar.json"))
LottieAnimation(composition, iterations = 1, modifier = Modifier.size(48.dp))

Flutter

import 'package:lottie/lottie.dart';

Lottie.network('https://useanimations.com/icons/calendar.json', width: 48, height: 48, repeat: false)

Bundle calendar.json with the app to use it offline.

Questions about the Calendar icon

›Does Calendar finish its animation after mouse leave?

It reverses from the frame it reached back to the start, so a quick pass of the pointer gives a short nudge rather than the full 0.27 s. Keyboard focus plays it as well; a tap on a touch screen does not.

›Is Calendar decorative?

By default it is aria-hidden. Pass aria-label="Calendar" to announce it as an image, or leave it hidden when the link or button it sits in has its own text.

›Can Calendar play on click instead?

Yes: pass interaction="click-replay". It then replays once from the start on every click unless reduced motion is preferred.

All action icons →

Calendar

Use it

Questions about the Calendar icon

Related icons