---
title: "Trending down animated icon"
description: "Trending down animated icon (Search & discovery). The trend breaks out. Light: the arrow's tip drops away first, its head turning to the new heading, and the rest of the line falls into the trend about 80 ms behind it; both stop dead at the trend (no overshoot on the values) and the head nods once past its heading and settles. Strong: the flat arrow lifts first, then the tip plunges faster with the line chasing it, and the head nods hard and rocks to rest in decaying beats. The trend is kept; the reverse flattens it."
canonical: https://generativeicons.com/icons/trending-down/
---

# Trending down animated icon

The trend breaks out. Light: the arrow's tip drops away first, its head turning to the new heading, and the rest of the line falls into the trend about 80 ms behind it; both stop dead at the trend (no overshoot on the values) and the head nods once past its heading and settles. Strong: the flat arrow lifts first, then the tip plunges faster with the line chasing it, and the head nods hard and rocks to rest in decaying beats. The trend is kept; the reverse flattens it.

- Id: `trending-down`
- Category: Search & discovery
- Search terms: decline, decrease, falling, downtrend, downward, going down, loss, drop, bearish, stocks down, downturn, recession, slump
- Two states: flat to falling, played forward and back
- 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/trending-down.lottie (dotLottie, 5804 bytes, sha256 18b05c8c066ca840282e75675f1949cf631dfe590c720b0e380d2704c388a867)
- License: MIT

## Install

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

## React

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

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