The Heroicons cursor arrow rays icon depicts a mouse cursor with radiating lines, commonly used to indicate an action or selection that affects multiple items or a range.
Common uses
- Selecting a range of text or cells
- Activating a multi-select mode
- Indicating a drag-and-drop operation
Use it in React
Install
npm i @heroicons/reactImport & render
import { CursorArrowRaysIcon } from '@heroicons/react/24/outline';
<CursorArrowRaysIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<CursorArrowRaysIcon className="size-6" />24/solid
<CursorArrowRaysIcon className="size-6" />20/solid
<CursorArrowRaysIcon className="size-6" />16/solid
<CursorArrowRaysIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- cursorarrowraysselect rangemulti-selectcursor raysarrow range
FAQ
- What is the cursor arrow rays icon used for?
- It signifies an action that applies to a group or range, like selecting multiple items or defining an area.
- How do I use this icon in React?
- Import it using: import { CursorArrowRaysIcon } from '@heroicons/react/24/outline'
- What is the license for this icon?
- The Heroicons library, including this 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 →