The Lucide arrow up down icon depicts bidirectional movement and is commonly used to indicate actions like sorting, swapping, or toggling between two states.
Common uses
- Sorting a table column in both ascending and descending order.
- Toggling between two network connection modes (e.g., Wi-Fi and cellular).
- Indicating a reversible action or a two-way data flow.
Use it in React
Install
npm i lucide-reactImport & render
import { ArrowUpDown } from 'lucide-react';
<ArrowUpDown size={24} />Details
- Library
- Lucide (1,713 icons)
- License
- ISC
- viewBox
0 0 24 24- Keywords
- bidirectionaltwo-way2-wayswapswitchnetworkmobile datainternetsortreordermovearrowupdownbidirectional arrowup down arrows
FAQ
- What is the arrow up down icon used for?
- It's typically used for actions involving bidirectional movement, such as sorting, swapping items, or indicating a two-way connection or toggle.
- How do I use the arrow up down icon in React?
- You can import and use it in React with: import { ArrowUpDown } from 'lucide-react'
- What is the license for the Lucide arrow up down icon?
- The Lucide icon library, including the arrow up down icon, is available under the ISC license.
Related icons
The same idea in other libraries, and near matches in Lucide.
Looking for something else? Search Lucide 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 →