The Heroicons arrow path rounded square icon depicts a circular arrow within a rounded square, commonly used to indicate a refresh, reload, or cycle action.
Common uses
- Refresh data list
- Reload page content
- Cycle through options
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline';
<ArrowPathRoundedSquareIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowPathRoundedSquareIcon className="size-6" />24/solid
<ArrowPathRoundedSquareIcon className="size-6" />20/solid
<ArrowPathRoundedSquareIcon className="size-6" />16/solid
<ArrowPathRoundedSquareIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowpathroundedsquarerefresh iconreload iconcycle iconupdate icon
FAQ
- What does the arrow path rounded square icon represent?
- This icon represents a refresh, reload, or cycle action, indicating that content or a process will be restarted or updated.
- How do I use this icon in React?
- You can import and use it in your React application with: import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline'
- What is the license for this icon?
- The Heroicons library, including this icon, is distributed 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 →