---
title: "Cube animated icon"
description: "Cube animated icon (Essentials). The cube turns to show its depth, for a 3D object or model. Light: it turns a quarter of the way to its right, its front edge sweeping across as the left face widens and the right face narrows, then swings back square with a hit and a small rebound. Strong: it hops and turns further, swings back as it lands with a hit, then turns again a little less and settles."
canonical: https://generativeicons.lottiefiles.com/icons/cube/
---

# Cube animated icon

The cube turns to show its depth, for a 3D object or model. Light: it turns a quarter of the way to its right, its front edge sweeping across as the left face widens and the right face narrows, then swings back square with a hit and a small rebound. Strong: it hops and turns further, swings back as it lands with a hit, then turns again a little less and settles.

- Id: `cube`
- Category: Essentials
- Search terms: 3d, 3d object, 3d model, 3d view, three dimensional, block, depth, isometric, dimensions
- 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/cube.lottie (dotLottie, 4996 bytes, sha256 a78e1d878e680b0639f8519784afffb64db6016ea7c44f04575841442e5df206)
- License: MIT

## Install

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

## React

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

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