The Phosphor check circle icon depicts a completed task or confirmation within a circular boundary, commonly used to indicate success or a positive status.
Common uses
- Confirming a successful form submission.
- Indicating a completed to-do item.
- Displaying a positive system status alert.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CheckCircle } from '@phosphor-icons/react';
<CheckCircle size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CheckCircle size={24} />thin
<CheckCircle size={24} weight="thin" />light
<CheckCircle size={24} weight="light" />bold
<CheckCircle size={24} weight="bold" />fill
<CheckCircle size={24} weight="fill" />duotone
<CheckCircle size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- todoto-dotasklistcheckboxroundokdonesystemcheckcirclecompleted tasksuccess indicatorconfirmation symbolround check
FAQ
- What is the check circle icon used for?
- It signifies completion, success, or a positive confirmation. It's often used for completed tasks or successful operations.
- How do I use the check circle icon in React?
- Import it from the library and use it as a component: `import { CheckCircle } from '@phosphor-icons/react'; <CheckCircle />`.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, which allows for free use in both personal and commercial projects.
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 →