---
title: "Transform tool animated icon"
description: "Transform tool animated icon (Drawing & design tools). Light: the far corner handle is dragged and the selection box scales 14% from its origin corner with the object inside, then eases back. Strong: a short back-step, a 26% scale with a stop, a hold and a spring return."
canonical: https://generativeicons.lottiefiles.com/icons/transform-tool/
---

# Transform tool animated icon

Light: the far corner handle is dragged and the selection box scales 14% from its origin corner with the object inside, then eases back. Strong: a short back-step, a 26% scale with a stop, a hold and a spring return.

- Id: `transform-tool`
- Category: Drawing & design tools
- Search terms: free transform, scale, resize, scale tool, bounding box, resize handles, transform handles, stretch, enlarge, selection box, 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/transform-tool.lottie (dotLottie, 19689 bytes, sha256 c14dbefce0ec705eb5f4ba9b975fa2e229446e9475b2fef7b33707cef3721597)
- License: MIT

## Install

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

## React

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

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