The Phosphor circle notch icon depicts a circular shape with a segment removed, commonly used to indicate a loading state or progress.
Common uses
- Displaying a loading spinner while data fetches.
- Indicating ongoing background processing.
- Showing a progress indicator in a user interface.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CircleNotch } from '@phosphor-icons/react';
<CircleNotch size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CircleNotch size={24} />thin
<CircleNotch size={24} weight="thin" />light
<CircleNotch size={24} weight="light" />bold
<CircleNotch size={24} weight="bold" />fill
<CircleNotch size={24} weight="fill" />duotone
<CircleNotch size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- roundshapesloadingloaderspinnerwaitingprogresssystemcirclenotchloading spinnerprogress indicatorwaiting iconround loader
FAQ
- What is the circle notch icon used for?
- It's typically used to visually represent that an action is in progress, such as loading data or processing a request.
- How do I use the circle notch icon in React?
- You can import and use it with: import { CircleNotch } from '@phosphor-icons/react'
- What is the license for the Phosphor circle notch icon?
- The Phosphor icon library, including the circle notch icon, is available 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 →