---
title: "Seat map animated icon"
description: "Seat map animated icon (Events & tickets). A seat is picked on the map. Light: the chosen seat presses in as it is tapped, pops past its selected size and settles at 1.5x. Strong: a deeper press and a bigger pop with a two-beat settle, and the pop sends a ripple through the other seats, nearest first, each dipping and recovering. Deselect: the seat swells slightly, shrinks back past its seat size and settles; the others stay still. The stage never moves."
canonical: https://generativeicons.com/icons/seat-map/
---

# Seat map animated icon

A seat is picked on the map. Light: the chosen seat presses in as it is tapped, pops past its selected size and settles at 1.5x. Strong: a deeper press and a bigger pop with a two-beat settle, and the pop sends a ripple through the other seats, nearest first, each dipping and recovering. Deselect: the seat swells slightly, shrinks back past its seat size and settles; the others stay still. The stage never moves.

- Id: `seat-map`
- Category: Events & tickets
- Search terms: seating chart, seating plan, seat selection, choose seat, select seat, seat picker, seats, reserved seating, assigned seating, floor plan, book seats, seat booking
- Two states: available to selected, 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/seat-map.lottie (dotLottie, 12609 bytes, sha256 6b82f9bde290378d89812d59a5ae79bec36e389460c88c1887c70c2b51ba8927)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add seat-map
```

## React

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

export function SeatMapIcon() {
  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/seat-map.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/seat-map/ · https://generativeicons.com/api/icons/seat-map