Gentleface › Charts & data › trending-up
trending-up icon
trending-upTrending up: trending up, growth, increase, uptrend. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.856 4.144C14.952 4.241 15 4.359 15 4.5L15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8C14.359 8 14.241 7.952 14.144 7.856C14.048 7.759 14 7.641 14 7.5L14 5.707L8.854 10.854C8.754 10.953 8.636 11.003 8.5 11.003C8.364 11.003 8.246 10.953 8.146 10.854L5.5 8.207L1.854 11.854C1.756 11.951 1.638 12 1.5 12C1.362 12 1.244 11.951 1.146 11.854C1.047 11.754 0.997 11.636 0.997 11.5C0.997 11.364 1.047 11.246 1.146 11.146L5.146 7.146C5.246 7.047 5.364 6.997 5.5 6.997C5.636 6.997 5.754 7.047 5.854 7.146L8.5 9.793L13.293 5L11.5 5C11.359 5 11.241 4.952 11.144 4.856C11.048 4.759 11 4.641 11 4.5C11 4.359 11.048 4.241 11.144 4.144C11.241 4.048 11.359 4 11.5 4L14.5 4C14.641 4 14.759 4.048 14.856 4.144Z"/></svg>
// Gentleface "trending-up" (line-round), MIT. https://gentleface.com/icons/trending-up
import type { SVGProps } from 'react';
export function TrendingUpIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
<path d="M14.856 4.144C14.952 4.241 15 4.359 15 4.5L15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8C14.359 8 14.241 7.952 14.144 7.856C14.048 7.759 14 7.641 14 7.5L14 5.707L8.854 10.854C8.754 10.953 8.636 11.003 8.5 11.003C8.364 11.003 8.246 10.953 8.146 10.854L5.5 8.207L1.854 11.854C1.756 11.951 1.638 12 1.5 12C1.362 12 1.244 11.951 1.146 11.854C1.047 11.754 0.997 11.636 0.997 11.5C0.997 11.364 1.047 11.246 1.146 11.146L5.146 7.146C5.246 7.047 5.364 6.997 5.5 6.997C5.636 6.997 5.754 7.047 5.854 7.146L8.5 9.793L13.293 5L11.5 5C11.359 5 11.241 4.952 11.144 4.856C11.048 4.759 11 4.641 11 4.5C11 4.359 11.048 4.241 11.144 4.144C11.241 4.048 11.359 4 11.5 4L14.5 4C14.641 4 14.759 4.048 14.856 4.144Z" />
</svg>
);
}Vue: see /icons/trending-up.md
Svelte: see /icons/trending-up.md
HTML img: see /icons/trending-up.md
CSS: see /icons/trending-up.md
Data URL: see /icons/trending-up.md
Sprite: see /icons/trending-up.md
SwiftUI: see /icons/trending-up.md
Compose: see /icons/trending-up.md
Android XML: see /icons/trending-up.md
Flutter: see /icons/trending-up.md
Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.
Meaning
- Use it for
- trending up, growth, increase, uptrend, trend up
- Alternatives
flame: trending as in hot or popular contentbanknote-trending-up: investment returns (investment)
- Also fits
- up right: a rising metric or trend (trending-up)
- line chart: only the direction of a trend (trending-up)
- boost: growth over time (growth)
- investment: growth of any metric
- revenue: revenue growth
- sprout: growth as a business metric
- trending: a rising metric in a chart
- Tags
- trend, growth, rise, uptrend, increase, stocks
- Category
- Charts & data
- Component name
TrendingUpIcon- History
- added
Family 33
More charts & data icons
chart-legend flowchart gauge node-graph word-cloud · all charts & data icons
For agents
Metadata: /icons/trending-up.json · Markdown: /icons/trending-up.md · SVG: https://gentleface.com/svg/{style}/16/trending-up.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/trending-up.png