---
title: "Flip photo animated icon"
description: "Flip photo animated icon (Photos & camera). Original to mirrored: the photo turns over about its vertical axis. Light: the axis marks reach in toward the photo first, then the photo turns over through edge-on, its landscape and sun crossing to the other side, lands a touch wide and settles flat; the axis marks let go. Strong: the axis marks grip harder, the photo whips over faster, lands wider and rebounds twice before it settles, and the marks spring back with a recoil. Reverse turns it back the same way."
canonical: https://generativeicons.lottiefiles.com/icons/flip-photo/
---

# Flip photo animated icon

Original to mirrored: the photo turns over about its vertical axis. Light: the axis marks reach in toward the photo first, then the photo turns over through edge-on, its landscape and sun crossing to the other side, lands a touch wide and settles flat; the axis marks let go. Strong: the axis marks grip harder, the photo whips over faster, lands wider and rebounds twice before it settles, and the marks spring back with a recoil. Reverse turns it back the same way.

- Id: `flip-photo`
- Category: Photos & camera
- Search terms: mirror, mirror image, mirrored, flip horizontal, flip horizontally, horizontal flip, flip image, flip picture, reflect, reverse image
- Two states: original to mirrored, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.lottiefiles.com/assets/flip-photo.lottie (dotLottie, 10835 bytes, sha256 33333ec4e0a03fa155e8163d7f7e2d63dde11e78ff482d98ee800f848e9e9bfd)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add flip-photo
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/flip-photo.mjs';

export function FlipPhotoIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/flip-photo.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.lottiefiles.com/icons/flip-photo/ · https://generativeicons.lottiefiles.com/api/icons/flip-photo