The Heroicons arrow down tray icon depicts an arrow pointing downwards into a container, commonly used to represent downloading or saving files.
Common uses
- Download button
- Save file action
- Export data
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
<ArrowDownTrayIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowDownTrayIcon className="size-6" />24/solid
<ArrowDownTrayIcon className="size-6" />20/solid
<ArrowDownTrayIcon className="size-6" />16/solid
<ArrowDownTrayIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowdowntraydownloadsaveexportget file
FAQ
- What does the arrow down tray icon represent?
- It visually signifies a download or save operation, indicating that content will be transferred to the user's device or storage.
- How do I use this icon in React?
- Import it from Heroicons like this: import { ArrowDownTrayIcon } from '@heroicons/react/24/outline'. You can then use it as a React component.
- What is the license for this icon?
- The Heroicons library, including the arrow down tray icon, is available under the MIT license.
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 →