---
title: "Fire animated icon"
description: "Fire animated icon (Emoji). The fire roars up. Light: the inner flame gathers and surges up inside the outer one while the three tongues lick upward in turn, left, middle, right, and an ember rises off the top and fades. Strong: a bigger surge with the whole flame leaning on its base, the tongues licking higher and once more, two embers rising, then a settle."
canonical: https://generativeicons.com/icons/fire/
---

# Fire animated icon

The fire roars up. Light: the inner flame gathers and surges up inside the outer one while the three tongues lick upward in turn, left, middle, right, and an ember rises off the top and fades. Strong: a bigger surge with the whole flame leaning on its base, the tongues licking higher and once more, two embers rising, then a settle.

- Id: `fire`
- Category: Emoji
- Search terms: flames, lit, on fire, blaze, hype, trending, its fire
- 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/fire.lottie (dotLottie, 6172 bytes, sha256 548c87a2447c370f408f8b951871c484c98f3ef27be9a13c0ad0180b4f86b218)
- License: MIT

## Install

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

## React

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

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