The Phosphor dots three circle icon depicts three small circles arranged in a larger circle, commonly used to represent a menu, overflow options, or a 'more' action.
Common uses
- Triggering a contextual menu
- Indicating additional hidden options
- Representing a 'settings' or 'actions' button
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { DotsThreeCircle } from '@phosphor-icons/react';
<DotsThreeCircle size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<DotsThreeCircle size={24} />thin
<DotsThreeCircle size={24} weight="thin" />light
<DotsThreeCircle size={24} weight="light" />bold
<DotsThreeCircle size={24} weight="bold" />fill
<DotsThreeCircle size={24} weight="fill" />duotone
<DotsThreeCircle size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- menuoverflowcirclesshapespolygons3ellipsisellipsesmoresystemdotsthreecirclemore optionsmenu dotsthree dots
FAQ
- What does the dots three circle icon represent?
- It visually signifies a menu, overflow, or a 'more options' action, often used when there are too many actions to display directly.
- How do I use the dots three circle icon in React?
- You can import and use it directly from the Phosphor React library with: import { DotsThreeCircle } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the dots three circle 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 →