---
title: "Select all animated icon"
description: "Select all animated icon (Everyday controls). Everything is selected. Light: the selection boundary runs on from the corner bracket round the right side, the bottom and up the left until it closes, and each object pops as the boundary passes it, top-right, bottom-right, bottom-left, then the first one as the loop closes. Strong: the boundary accelerates round in one stroke and closes with a hit that makes the whole selection pulse, and the objects pop bigger with a rebound. The reverse retracts the boundary to the bracket without a pop."
canonical: https://generativeicons.com/icons/select-all/
---

# Select all animated icon

Everything is selected. Light: the selection boundary runs on from the corner bracket round the right side, the bottom and up the left until it closes, and each object pops as the boundary passes it, top-right, bottom-right, bottom-left, then the first one as the loop closes. Strong: the boundary accelerates round in one stroke and closes with a hit that makes the whole selection pulse, and the objects pop bigger with a rebound. The reverse retracts the boundary to the bracket without a pop.

- Id: `select-all`
- Category: Everyday controls
- Search terms: ctrl a, cmd a, select everything, selection, selection box, marquee, marquee select, multi-select, multiselect, bulk select, highlight all, choose all
- Two states: one to all, 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/select-all.lottie (dotLottie, 9532 bytes, sha256 8b0cca55a057a015048ab9b0014994eeab9b6c566eb53d281eacfa39e55206b8)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add select-all
```

## React

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

export function SelectAllIcon() {
  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/select-all.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/select-all/ · https://generativeicons.com/api/icons/select-all