The Phosphor circle dashed icon visually represents a circular outline composed of dashes, often used to indicate a loading state, a placeholder, or an incomplete shape in user interfaces.
Common uses
- Loading indicator
- Placeholder for content
- Incomplete selection state
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CircleDashed } from '@phosphor-icons/react';
<CircleDashed size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CircleDashed size={24} />thin
<CircleDashed size={24} weight="thin" />light
<CircleDashed size={24} weight="light" />bold
<CircleDashed size={24} weight="bold" />fill
<CircleDashed size={24} weight="fill" />duotone
<CircleDashed size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- missingroundshapespolygonsdesigncircledashedloading spinnerdashed circleoutline shapeprogress indicator
FAQ
- What is the circle dashed icon used for?
- It's commonly used for loading spinners, placeholder elements, or to signify an unfinished or dashed outline in UI designs.
- How do I use the circle dashed icon in React?
- You can import and use it like this: import { CircleDashed } from '@phosphor-icons/react'. Then render it as a component: <CircleDashed />.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Phosphor.