The Heroicons cursor arrow ripple icon visually represents an action being performed, often used to indicate a link, a clickable element, or a loading state where interaction is ongoing.
Common uses
- Indicating a clickable link or button
- Showing a loading or processing state
- Representing a drag-and-drop action
Use it in React
Install
npm i @heroicons/reactImport & render
import { CursorArrowRippleIcon } from '@heroicons/react/24/outline';
<CursorArrowRippleIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<CursorArrowRippleIcon className="size-6" />24/solid
<CursorArrowRippleIcon className="size-6" />20/solid
<CursorArrowRippleIcon className="size-6" />16/solid
<CursorArrowRippleIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- cursorarrowripplepointerclickactionloading
FAQ
- What does the cursor arrow ripple icon signify?
- This icon typically signifies an interactive element or an ongoing action, such as clicking a link or a button, or a loading process.
- How do I use the cursor arrow ripple icon in React?
- You can import and use it in React with: import { CursorArrowRippleIcon } from '@heroicons/react/24/outline'.
- What is the license for this icon?
- The Heroicons library, including the cursor arrow ripple 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 →