---
title: "Layer stack animated icon"
description: "Layer stack animated icon (Motion design). A layer is set down on the stack. Light: the top layer lifts and drops back onto the stack with a dead stop; the impact passes down, the middle layer dipping 60 ms later and the bottom one after it, and each settles. Strong: the top layer lifts higher and tilts as it is carried, lands flat with a harder hit, and the impact passes down the stack in deeper, decaying beats. The layers stay rigid."
canonical: https://generativeicons.lottiefiles.com/icons/layer-stack/
---

# Layer stack animated icon

A layer is set down on the stack. Light: the top layer lifts and drops back onto the stack with a dead stop; the impact passes down, the middle layer dipping 60 ms later and the bottom one after it, and each settles. Strong: the top layer lifts higher and tilts as it is carried, lands flat with a harder hit, and the impact passes down the stack in deeper, decaying beats. The layers stay rigid.

- Id: `layer-stack`
- Category: Motion design
- Search terms: layers, layers panel, layer order, stacking order, z-index, z order, depth order, arrange layers, bring to front, send to back
- One action, back to rest
- 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/layer-stack.lottie (dotLottie, 3459 bytes, sha256 f75703cdf8c3be297a13199eb8a94b4b5ba50d5321c1c00d30fe6a677f43e21a)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add layer-stack
```

## React

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

export function LayerStackIcon() {
  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/layer-stack.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/layer-stack/ · https://generativeicons.lottiefiles.com/api/icons/layer-stack