The Phosphor arrow line down icon depicts a downward-pointing arrow with a straight line, commonly used to indicate actions like downloading, collapsing a section, or navigating to content below.
Common uses
- Download button
- Collapse/expand section
- Scroll to bottom
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ArrowLineDown } from '@phosphor-icons/react';
<ArrowLineDown size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ArrowLineDown size={24} />thin
<ArrowLineDown size={24} weight="thin" />light
<ArrowLineDown size={24} weight="light" />bold
<ArrowLineDown size={24} weight="bold" />fill
<ArrowLineDown size={24} weight="fill" />duotone
<ArrowLineDown size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- directionalpointerpointingarrowheadbottomarrowsarrowlinedowndownload iconcollapse iconarrow downdirectional down
FAQ
- What is the arrow line down icon used for?
- It's typically used for actions like downloading, collapsing content, or indicating a direction downwards on a page.
- How do I use the arrow line down icon in React?
- Import it as `ArrowLineDown` from '@phosphor-icons/react' and use it as a React component: `<ArrowLineDown />`.
- What is the license for Phosphor icons?
- Phosphor icons are available under the MIT license, allowing for free usage in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →