The Phosphor spinner ball icon depicts a rotating sphere, commonly used to indicate that a process is ongoing and the user should wait.
Common uses
- Displaying during data fetching.
- Indicating background task completion.
- Showing when a form is submitting.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { SpinnerBall } from '@phosphor-icons/react';
<SpinnerBall size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<SpinnerBall size={24} />thin
<SpinnerBall size={24} weight="thin" />light
<SpinnerBall size={24} weight="light" />bold
<SpinnerBall size={24} weight="bold" />fill
<SpinnerBall size={24} weight="fill" />duotone
<SpinnerBall size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- *new*loadingloaderwaitingprogresssystemspinnerballloading spinnerprogress indicatorwaiting iconsystem loader
FAQ
- What is the spinner ball icon used for?
- It's used to visually communicate that an action is in progress and the user needs to wait for it to complete.
- How do I use the spinner ball icon in React?
- You can import it using `import { SpinnerBall } from '@phosphor-icons/react'` and then render it as a component.
- What is the license for this icon?
- The Phosphor icon library, including the spinner ball icon, is distributed under the MIT license.
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 →