---
title: "Trending up animated icon"
description: "Trending up animated icon (Search & discovery). The trend breaks out. Light: the arrow's tip breaks upward first, its head turning to the new heading, and the rest of the line rises 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 crouches first, then the tip shoots up 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-up/
---

# Trending up animated icon

The trend breaks out. Light: the arrow's tip breaks upward first, its head turning to the new heading, and the rest of the line rises 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 crouches first, then the tip shoots up 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-up`
- Category: Search & discovery
- Search terms: growth, increase, rising, uptrend, upward, going up, gain, profit, bullish, stocks up, popular, improvement
- Two states: flat to rising, 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-up.lottie (dotLottie, 5789 bytes, sha256 4eeb986956b39ef76e24d0c70c7b91b0f82bf5062ab2c11b70216276e26405eb)
- License: MIT

## Install

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

## React

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

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