---
title: "Merge cells animated icon"
description: "Merge cells animated icon (Tables & analytics). Two table cells are merged into one. Light: the boundary between the two lower cells draws down, the merge arrows on either side push in toward it and squeeze it out, then ease back into the merged cell. Strong: the arrows pull back first, slam in harder so the boundary pops away, rebound and close in a second time before they settle. The table frame and the top row never move."
canonical: https://generativeicons.com/icons/merge-cells/
---

# Merge cells animated icon

Two table cells are merged into one. Light: the boundary between the two lower cells draws down, the merge arrows on either side push in toward it and squeeze it out, then ease back into the merged cell. Strong: the arrows pull back first, slam in harder so the boundary pops away, rebound and close in a second time before they settle. The table frame and the top row never move.

- Id: `merge-cells`
- Category: Tables & analytics
- Search terms: combine cells, join cells, merge and center, unmerge, colspan, rowspan, span columns, combine columns
- 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.com/assets/merge-cells.lottie (dotLottie, 3839 bytes, sha256 4de9dc79a5c519285b1aefb4a356afdd3775a7e6f0a0c67b78230b7f8267e9c5)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add merge-cells
```

## React

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

export function MergeCellsIcon() {
  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/merge-cells.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/merge-cells/ · https://generativeicons.com/api/icons/merge-cells