The Tabler circles icon depicts three overlapping circles, often used to represent concepts like connection, grouping, or a set of related items.
Common uses
- Loading indicator
- Progress steps
- Data visualization elements
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconCircles } from '@tabler/icons-react';
<IconCircles size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconCircles size={24} stroke={2} />filled
<IconCirclesFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Shapes
- Keywords
- shapemarblesballsjugglespotscirclesroundcirculargeometryformshapesoverlapping circlesgroupset
FAQ
- What does the circles icon represent?
- It visually represents three overlapping circles, commonly used for concepts like connection, grouping, or a series of related items in a UI.
- How do I use the circles icon in React?
- You can import and use it in your React application with the following statement: import { IconCircles } from '@tabler/icons-react'.
- What is the license for the Tabler circles icon?
- The Tabler icons, including the circles icon, are available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler 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 →