The Heroicons bars arrow down icon depicts a stack of horizontal lines with a downward-pointing arrow, commonly used to indicate an action for downloading or exporting data.
Common uses
- Download button
- Export data action
- Save file trigger
Use it in React
Install
npm i @heroicons/reactImport & render
import { BarsArrowDownIcon } from '@heroicons/react/24/outline';
<BarsArrowDownIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<BarsArrowDownIcon className="size-6" />24/solid
<BarsArrowDownIcon className="size-6" />20/solid
<BarsArrowDownIcon className="size-6" />16/solid
<BarsArrowDownIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- barsarrowdowndownloadexportsaveget
FAQ
- What does the bars arrow down icon represent?
- It represents downloading or exporting content, often visualized as data or files.
- How do I use this icon in React?
- Import it using: import { BarsArrowDownIcon } from '@heroicons/react/24/outline' and then use it as a React component.
- What is the license for Heroicons?
- Heroicons are released under the MIT license, allowing for free usage.
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 →