Zoom Out

Animated zoom out icon

Use the Zoom Out icon for zoom in and zoom out controls: it plays on hover and reverses on mouse leave and takes 1 s. Hover icons typically mark navigation items, delete buttons, settings, zoom controls and social links.

magnifiermagnify

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 zoomOut from 'react-useanimations/lib/zoomOut';

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

npx shadcn@latest add https://useanimations.com/r/zoom-out.json

import { AnimatedZoomOut } from '@/components/animations/zoom-out';

<AnimatedZoomOut size={24} />

<div id="zoom-out-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('zoom-out-icon');
  const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/zoom-out.json' });
  el.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });
  el.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });
</script>

Zoom Out runs on the light build, lottie_light.min.js.

React Native

import LottieView from 'lottie-react-native';

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

iOS (SwiftUI)

import Lottie

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

Android (Compose)

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

Flutter

import 'package:lottie/lottie.dart';

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

Bundle zoom-out.json with the app to use it offline.

Questions about the Zoom Out icon

›Does Zoom Out 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 1 s. Keyboard focus plays it as well; a tap on a touch screen does not.

›Is Zoom Out decorative?

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

›Can Zoom Out 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 →

Zoom Out

Use it

Questions about the Zoom Out icon

Related icons