circles icon
circles from SVG Loaders by Sam Herbert · Animated · animated · MIT Free for personal and commercial use.
- Name
- circles
- Set
- SVG Loaders
- Style
- Animated
- Animation
- Animated SVG (SMIL)
- Viewbox
- 135×135
- License
- MIT
The same icon in other sets
All circles icons →Use the circles icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 135 135"><g fill="currentColor"><path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite"/></path><path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite"/></path></g></svg>
React
import type { SVGProps } from "react";
export function SvgLoadersCircles(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 135 135"><g fill="currentColor"><path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite"/></path><path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite"/></path></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 135 135"><g fill="currentColor"><path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite"/></path><path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite"/></path></g></svg> </template>
CSS
.icon-circles {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20135%20135%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M67.447%2058c5.523%200%2010-4.477%2010-10s-4.477-10-10-10-10%204.477-10%2010%204.477%2010%2010%2010zm9.448%209.447c0%205.523%204.477%2010%2010%2010%205.522%200%2010-4.477%2010-10s-4.478-10-10-10c-5.523%200-10%204.477-10%2010zm-9.448%209.448c-5.523%200-10%204.477-10%2010%200%205.522%204.477%2010%2010%2010s10-4.478%2010-10c0-5.523-4.477-10-10-10zM58%2067.447c0-5.523-4.477-10-10-10s-10%204.477-10%2010%204.477%2010%2010%2010%2010-4.477%2010-10z%22%20transform%3D%22rotate(-360%2067%2067)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M28.19%2040.31c6.627%200%2012-5.374%2012-12%200-6.628-5.373-12-12-12-6.628%200-12%205.372-12%2012%200%206.626%205.372%2012%2012%2012zm30.72-19.825c4.686%204.687%2012.284%204.687%2016.97%200%204.686-4.686%204.686-12.284%200-16.97-4.686-4.687-12.284-4.687-16.97%200-4.687%204.686-4.687%2012.284%200%2016.97zm35.74%207.705c0%206.627%205.37%2012%2012%2012%206.626%200%2012-5.373%2012-12%200-6.628-5.374-12-12-12-6.63%200-12%205.372-12%2012zm19.822%2030.72c-4.686%204.686-4.686%2012.284%200%2016.97%204.687%204.686%2012.285%204.686%2016.97%200%204.687-4.686%204.687-12.284%200-16.97-4.685-4.687-12.283-4.687-16.97%200zm-7.704%2035.74c-6.627%200-12%205.37-12%2012%200%206.626%205.373%2012%2012%2012s12-5.374%2012-12c0-6.63-5.373-12-12-12zm-30.72%2019.822c-4.686-4.686-12.284-4.686-16.97%200-4.686%204.687-4.686%2012.285%200%2016.97%204.686%204.687%2012.284%204.687%2016.97%200%204.687-4.685%204.687-12.283%200-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626%200-12%205.373-12%2012s5.374%2012%2012%2012c6.628%200%2012-5.373%2012-12zm-19.823-30.72c4.687-4.686%204.687-12.284%200-16.97-4.686-4.686-12.284-4.686-16.97%200-4.687%204.686-4.687%2012.284%200%2016.97%204.686%204.687%2012.284%204.687%2016.97%200z%22%20transform%3D%22rotate(360%2067%2067)%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20135%20135%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M67.447%2058c5.523%200%2010-4.477%2010-10s-4.477-10-10-10-10%204.477-10%2010%204.477%2010%2010%2010zm9.448%209.447c0%205.523%204.477%2010%2010%2010%205.522%200%2010-4.477%2010-10s-4.478-10-10-10c-5.523%200-10%204.477-10%2010zm-9.448%209.448c-5.523%200-10%204.477-10%2010%200%205.522%204.477%2010%2010%2010s10-4.478%2010-10c0-5.523-4.477-10-10-10zM58%2067.447c0-5.523-4.477-10-10-10s-10%204.477-10%2010%204.477%2010%2010%2010%2010-4.477%2010-10z%22%20transform%3D%22rotate(-360%2067%2067)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M28.19%2040.31c6.627%200%2012-5.374%2012-12%200-6.628-5.373-12-12-12-6.628%200-12%205.372-12%2012%200%206.626%205.372%2012%2012%2012zm30.72-19.825c4.686%204.687%2012.284%204.687%2016.97%200%204.686-4.686%204.686-12.284%200-16.97-4.686-4.687-12.284-4.687-16.97%200-4.687%204.686-4.687%2012.284%200%2016.97zm35.74%207.705c0%206.627%205.37%2012%2012%2012%206.626%200%2012-5.373%2012-12%200-6.628-5.374-12-12-12-6.63%200-12%205.372-12%2012zm19.822%2030.72c-4.686%204.686-4.686%2012.284%200%2016.97%204.687%204.686%2012.285%204.686%2016.97%200%204.687-4.686%204.687-12.284%200-16.97-4.685-4.687-12.283-4.687-16.97%200zm-7.704%2035.74c-6.627%200-12%205.37-12%2012%200%206.626%205.373%2012%2012%2012s12-5.374%2012-12c0-6.63-5.373-12-12-12zm-30.72%2019.822c-4.686-4.686-12.284-4.686-16.97%200-4.686%204.687-4.686%2012.285%200%2016.97%204.686%204.687%2012.284%204.687%2016.97%200%204.687-4.685%204.687-12.283%200-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626%200-12%205.373-12%2012s5.374%2012%2012%2012c6.628%200%2012-5.373%2012-12zm-19.823-30.72c4.687-4.686%204.687-12.284%200-16.97-4.686-4.686-12.284-4.686-16.97%200-4.687%204.686-4.687%2012.284%200%2016.97%204.686%204.687%2012.284%204.687%2016.97%200z%22%20transform%3D%22rotate(360%2067%2067)%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}This icon is animated. Browsers do not run SVG animation inside a CSS mask, so the rule above uses a still of the drawn icon. Inline the SVG (or use the React/Vue/Svelte snippet) to keep the animation.
Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/svg-loaders/circles.svg?color=%231a73e8&size=48
