Trending Up Down icon

Download the Trending Up Down icon as free SVG or PNG. Customize its outline stroke. Copy React, Vue or Svelte code.

trend
up
down
volatility
fluctuation
chart
statistics
market
trending

Size

Stroke

Color

Download SVG

Press C to copy SVG, J for JSX, D to download.

Category: objects
Styles: Outline
Component: IconTrendingUpDown
License: MIT · Paweł Kuna
Files: outline/trending-up-down.svg

Code

Copy it the way you use it

trending-up-down.svg

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
 
>
  <path d="M2 14l6 -6l4 4l9 -9" />
  <path d="M15 3h6v6" />
  <path d="M15 21h6v-6" />
  <path d="M21 21l-6 -6" />
</svg>

Use the Trending Up Down icon

For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.

React example

import { IconTrendingUpDown } from '@tabler/icons-react';

<IconTrendingUpDown size={24} stroke={2} />

Read the React guide

Vue example

import { IconTrendingUpDown } from '@tabler/icons-vue';

<IconTrendingUpDown :size="24" :stroke="2" />

Read the Vue guide

Svelte 5 example

import { IconTrendingUpDown } from '@tabler/icons-svelte-runes';

<IconTrendingUpDown size={24} stroke={2} />

Read the Svelte guide

Related icons

See all 809 objects icons