---
title: "Grid / list view animated icon"
description: "Grid / list view animated icon (Everyday controls). Four grid tiles puff, flatten into bars in place, then stretch across the window into four list rows. Reverse rebuilds the 2x2 grid."
canonical: https://generativeicons.com/icons/grid-list-view/
---

# Grid / list view animated icon

Four grid tiles puff, flatten into bars in place, then stretch across the window into four list rows. Reverse rebuilds the 2x2 grid.

- Id: `grid-list-view`
- Category: Everyday controls
- Search terms: view toggle, layout toggle, toggle layout, switch layout, change layout, display mode, view mode, tiles, gallery view, card view, compact view, layout options
- Two states: grid to list, 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.com/assets/grid-list-view.lottie (dotLottie, 37965 bytes, sha256 6f70bed5619809125b7adf69a3e5f5e0c368c94a91bf5a7d73904ce61c2c62c0)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add grid-list-view
```

## React

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

export function GridListViewIcon() {
  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/grid-list-view.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.com/icons/grid-list-view/ · https://generativeicons.com/api/icons/grid-list-view