---
title: "New file animated icon"
description: "New file animated icon (Actions). A new file is created. Light: the page gathers in, then springs out past its size and settles, and the plus on it is drawn on again from its top and left ends as it springs. Strong: the page gathers in deeper and springs out farther in two beats, and the plus snaps on."
canonical: https://generativeicons.com/icons/new-file/
---

# New file animated icon

A new file is created. Light: the page gathers in, then springs out past its size and settles, and the plus on it is drawn on again from its top and left ends as it springs. Strong: the page gathers in deeper and springs out farther in two beats, and the plus snaps on.

- Id: `new-file`
- Category: Actions
- Search terms: create file, add file, new document, new doc, create document, add document, new page, add page, blank page, blank document, untitled document
- 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/new-file.lottie (dotLottie, 4968 bytes, sha256 d548cab58958e9f15d70f03bfd9d9659821af247f40a6bbd34ebdb348de4a670)
- License: MIT

## Install

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

## React

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

export function NewFileIcon() {
  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/new-file.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/new-file/ · https://generativeicons.com/api/icons/new-file