The Heroicons arrow trending up icon visually represents an upward trend or positive growth, commonly used to indicate an increase in performance, popularity, or value.
Common uses
- Displaying stock market gains
- Highlighting positive user engagement metrics
- Indicating a successful process or completion
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowTrendingUpIcon } from '@heroicons/react/24/outline';
<ArrowTrendingUpIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowTrendingUpIcon className="size-6" />24/solid
<ArrowTrendingUpIcon className="size-6" />20/solid
<ArrowTrendingUpIcon className="size-6" />16/solid
<ArrowTrendingUpIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowtrendingupgrowth iconincrease iconpositive trend iconupward arrow
FAQ
- What does the arrow trending up icon represent?
- This icon signifies upward movement, growth, or a positive trend. It's often used to show increases in data, performance, or popularity.
- How do I use the arrow trending up icon in React?
- You can import and use it in your React application with the following statement: `import { ArrowTrendingUpIcon } from '@heroicons/react/24/outline'`.
- What is the license for Heroicons?
- Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →