---
title: "Fuel pump animated icon"
description: "Fuel pump animated icon (Automotive). The pump dispenses fuel. Light: fuel surges down the hose and the hose and nozzle kick out, rebound and settle; a drop swells at the nozzle tip and falls, fading. Strong: two surges, each kicking the hose harder, and a drop forms and falls after each. The pump body never moves; the hose stays rigid and swings from where it leaves the pump; the drop is hidden at rest and gone before the end."
canonical: https://generativeicons.com/icons/fuel-pump/
---

# Fuel pump animated icon

The pump dispenses fuel. Light: fuel surges down the hose and the hose and nozzle kick out, rebound and settle; a drop swells at the nozzle tip and falls, fading. Strong: two surges, each kicking the hose harder, and a drop forms and falls after each. The pump body never moves; the hose stays rigid and swings from where it leaves the pump; the drop is hidden at rest and gone before the end.

- Id: `fuel-pump`
- Category: Automotive
- Search terms: gas pump, petrol pump, petrol, gasoline, gas, diesel, refuel, refueling, fill up, fuel nozzle, pump gas, unleaded
- 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/fuel-pump.lottie (dotLottie, 4310 bytes, sha256 e9c4ce82469123f902331fa3516b78f14d2ae0e46467e612e66f9f45a6d4dada)
- License: MIT

## Install

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

## React

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

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