# loader-circle icon

Loader circle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/loader-circle

- Category: Layout & interface
- Use it for: loading, busy
- Built from: variant of loader
- Tags: loader, loading, spinner, busy, progress, circle-notch, wait
- Family: loader
- Component name: LoaderCircleIcon
- Added: 2026-10-15

## Also fits

- loading: the arc spinner (Lucide loader-circle, FA circle-notch) instead of the spokes; pick one convention per product

## Files

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it.

- line-round: https://gentleface.com/svg/line-round/16/loader-circle.svg · PNG https://gentleface.com/png/line-round/16/loader-circle.png · https://gentleface.com/png/line-round/32/loader-circle.png · https://gentleface.com/png/line-round/48/loader-circle.png
- line-soft: https://gentleface.com/svg/line-soft/16/loader-circle.svg · PNG https://gentleface.com/png/line-soft/16/loader-circle.png · https://gentleface.com/png/line-soft/32/loader-circle.png · https://gentleface.com/png/line-soft/48/loader-circle.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/loader-circle.svg · PNG https://gentleface.com/png/line-sharp/16/loader-circle.png · https://gentleface.com/png/line-sharp/32/loader-circle.png · https://gentleface.com/png/line-sharp/48/loader-circle.png
- solid-round: https://gentleface.com/svg/solid-round/16/loader-circle.svg · PNG https://gentleface.com/png/solid-round/16/loader-circle.png · https://gentleface.com/png/solid-round/32/loader-circle.png · https://gentleface.com/png/solid-round/48/loader-circle.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/loader-circle.svg · PNG https://gentleface.com/png/solid-soft/16/loader-circle.png · https://gentleface.com/png/solid-soft/32/loader-circle.png · https://gentleface.com/png/solid-soft/48/loader-circle.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/loader-circle.svg · PNG https://gentleface.com/png/solid-sharp/16/loader-circle.png · https://gentleface.com/png/solid-sharp/32/loader-circle.png · https://gentleface.com/png/solid-sharp/48/loader-circle.png

The SVG of every style: https://gentleface.com/icons/loader-circle.json (`svg`).

## Code (line-round)

The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z"/></svg>
```

### React

```tsx
// Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle
import type { SVGProps } from 'react';

export function LoaderCircleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle -->
<script>
  let props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
  <path d="M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/loader-circle.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle. Takes the text color. */
.icon-loader-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#loader-circle"/></svg>
```

### SwiftUI

```swift
// Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle
import SwiftUI

struct LoaderCircleIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 4.837, y: 2.687))
        p.addCurve(to: CGPoint(x: 3.363, y: 3.876), control1: CGPoint(x: 4.277, y: 2.998), control2: CGPoint(x: 3.785, y: 3.394))
        p.addCurve(to: CGPoint(x: 2.419, y: 5.395), control1: CGPoint(x: 2.964, y: 4.331), control2: CGPoint(x: 2.65, y: 4.837))
        p.addCurve(to: CGPoint(x: 2.012, y: 7.137), control1: CGPoint(x: 2.187, y: 5.953), control2: CGPoint(x: 2.052, y: 6.534))
        p.addCurve(to: CGPoint(x: 2.214, y: 9.02), control1: CGPoint(x: 1.97, y: 7.776), control2: CGPoint(x: 2.037, y: 8.404))
        p.addCurve(to: CGPoint(x: 3.044, y: 10.724), control1: CGPoint(x: 2.392, y: 9.636), control2: CGPoint(x: 2.668, y: 10.204))
        p.addCurve(to: CGPoint(x: 4.313, y: 11.983), control1: CGPoint(x: 3.398, y: 11.213), control2: CGPoint(x: 3.821, y: 11.633))
        p.addCurve(to: CGPoint(x: 4.52, y: 12.307), control1: CGPoint(x: 4.428, y: 12.065), control2: CGPoint(x: 4.497, y: 12.172))
        p.addCurve(to: CGPoint(x: 4.431, y: 12.68), control1: CGPoint(x: 4.542, y: 12.441), control2: CGPoint(x: 4.513, y: 12.565))
        p.addCurve(to: CGPoint(x: 4.107, y: 12.883), control1: CGPoint(x: 4.351, y: 12.793), control2: CGPoint(x: 4.243, y: 12.86))
        p.addCurve(to: CGPoint(x: 3.734, y: 12.798), control1: CGPoint(x: 3.971, y: 12.906), control2: CGPoint(x: 3.847, y: 12.878))
        p.addCurve(to: CGPoint(x: 2.234, y: 11.31), control1: CGPoint(x: 3.152, y: 12.384), control2: CGPoint(x: 2.652, y: 11.888))
        p.addCurve(to: CGPoint(x: 1.253, y: 9.297), control1: CGPoint(x: 1.789, y: 10.696), control2: CGPoint(x: 1.463, y: 10.025))
        p.addCurve(to: CGPoint(x: 1.014, y: 7.071), control1: CGPoint(x: 1.044, y: 8.569), control2: CGPoint(x: 0.964, y: 7.827))
        p.addCurve(to: CGPoint(x: 1.495, y: 5.013), control1: CGPoint(x: 1.061, y: 6.358), control2: CGPoint(x: 1.222, y: 5.672))
        p.addCurve(to: CGPoint(x: 2.61, y: 3.217), control1: CGPoint(x: 1.768, y: 4.353), control2: CGPoint(x: 2.14, y: 3.755))
        p.addCurve(to: CGPoint(x: 4.353, y: 1.812), control1: CGPoint(x: 3.109, y: 2.648), control2: CGPoint(x: 3.69, y: 2.179))
        p.addCurve(to: CGPoint(x: 6.47, y: 1.082), control1: CGPoint(x: 5.016, y: 1.446), control2: CGPoint(x: 5.722, y: 1.202))
        p.addCurve(to: CGPoint(x: 8.583, y: 1.091), control1: CGPoint(x: 7.175, y: 0.969), control2: CGPoint(x: 7.879, y: 0.972))
        p.addCurve(to: CGPoint(x: 8.908, y: 1.294), control1: CGPoint(x: 8.719, y: 1.114), control2: CGPoint(x: 8.828, y: 1.182))
        p.addCurve(to: CGPoint(x: 8.993, y: 1.667), control1: CGPoint(x: 8.988, y: 1.407), control2: CGPoint(x: 9.016, y: 1.531))
        p.addCurve(to: CGPoint(x: 8.79, y: 1.991), control1: CGPoint(x: 8.97, y: 1.803), control2: CGPoint(x: 8.902, y: 1.911))
        p.addCurve(to: CGPoint(x: 8.417, y: 2.077), control1: CGPoint(x: 8.677, y: 2.071), control2: CGPoint(x: 8.553, y: 2.1))
        p.addCurve(to: CGPoint(x: 6.628, y: 2.07), control1: CGPoint(x: 7.821, y: 1.976), control2: CGPoint(x: 7.225, y: 1.974))
        p.addCurve(to: CGPoint(x: 4.837, y: 2.687), control1: CGPoint(x: 5.995, y: 2.171), control2: CGPoint(x: 5.398, y: 2.377))
        p.closeSubpath()
        p.move(to: CGPoint(x: 12.97, y: 6.97))
        p.addCurve(to: CGPoint(x: 13.5, y: 6.75), control1: CGPoint(x: 13.116, y: 6.823), control2: CGPoint(x: 13.293, y: 6.75))
        p.addCurve(to: CGPoint(x: 14.03, y: 6.97), control1: CGPoint(x: 13.707, y: 6.75), control2: CGPoint(x: 13.884, y: 6.823))
        p.addCurve(to: CGPoint(x: 14.25, y: 7.5), control1: CGPoint(x: 14.177, y: 7.116), control2: CGPoint(x: 14.25, y: 7.293))
        p.addCurve(to: CGPoint(x: 14.03, y: 8.03), control1: CGPoint(x: 14.25, y: 7.707), control2: CGPoint(x: 14.177, y: 7.884))
        p.addCurve(to: CGPoint(x: 13.5, y: 8.25), control1: CGPoint(x: 13.884, y: 8.177), control2: CGPoint(x: 13.707, y: 8.25))
        p.addCurve(to: CGPoint(x: 12.97, y: 8.03), control1: CGPoint(x: 13.293, y: 8.25), control2: CGPoint(x: 13.116, y: 8.177))
        p.addCurve(to: CGPoint(x: 12.75, y: 7.5), control1: CGPoint(x: 12.823, y: 7.884), control2: CGPoint(x: 12.75, y: 7.707))
        p.addCurve(to: CGPoint(x: 12.97, y: 6.97), control1: CGPoint(x: 12.75, y: 7.293), control2: CGPoint(x: 12.823, y: 7.116))
        p.closeSubpath()
        p.move(to: CGPoint(x: 12.307, y: 10.48))
        p.addCurve(to: CGPoint(x: 12.68, y: 10.569), control1: CGPoint(x: 12.441, y: 10.458), control2: CGPoint(x: 12.565, y: 10.487))
        p.addCurve(to: CGPoint(x: 12.886, y: 10.892), control1: CGPoint(x: 12.795, y: 10.65), control2: CGPoint(x: 12.864, y: 10.758))
        p.addCurve(to: CGPoint(x: 12.798, y: 11.266), control1: CGPoint(x: 12.909, y: 11.026), control2: CGPoint(x: 12.88, y: 11.151))
        p.addCurve(to: CGPoint(x: 11.266, y: 12.798), control1: CGPoint(x: 12.374, y: 11.863), control2: CGPoint(x: 11.863, y: 12.374))
        p.addCurve(to: CGPoint(x: 10.892, y: 12.886), control1: CGPoint(x: 11.151, y: 12.88), control2: CGPoint(x: 11.026, y: 12.909))
        p.addCurve(to: CGPoint(x: 10.569, y: 12.68), control1: CGPoint(x: 10.758, y: 12.864), control2: CGPoint(x: 10.65, y: 12.795))
        p.addCurve(to: CGPoint(x: 10.48, y: 12.307), control1: CGPoint(x: 10.487, y: 12.565), control2: CGPoint(x: 10.458, y: 12.441))
        p.addCurve(to: CGPoint(x: 10.687, y: 11.983), control1: CGPoint(x: 10.503, y: 12.172), control2: CGPoint(x: 10.572, y: 12.065))
        p.addCurve(to: CGPoint(x: 11.983, y: 10.687), control1: CGPoint(x: 11.192, y: 11.624), control2: CGPoint(x: 11.624, y: 11.192))
        p.addCurve(to: CGPoint(x: 12.307, y: 10.48), control1: CGPoint(x: 12.065, y: 10.572), control2: CGPoint(x: 12.172, y: 10.503))
        p.closeSubpath()
        p.move(to: CGPoint(x: 6.583, y: 12.923))
        p.addCurve(to: CGPoint(x: 8.417, y: 12.923), control1: CGPoint(x: 7.194, y: 13.026), control2: CGPoint(x: 7.806, y: 13.026))
        p.addCurve(to: CGPoint(x: 8.791, y: 13.006), control1: CGPoint(x: 8.556, y: 12.9), control2: CGPoint(x: 8.681, y: 12.927))
        p.addCurve(to: CGPoint(x: 8.993, y: 13.333), control1: CGPoint(x: 8.902, y: 13.085), control2: CGPoint(x: 8.97, y: 13.194))
        p.addCurve(to: CGPoint(x: 8.91, y: 13.708), control1: CGPoint(x: 9.016, y: 13.472), control2: CGPoint(x: 8.989, y: 13.597))
        p.addCurve(to: CGPoint(x: 8.583, y: 13.909), control1: CGPoint(x: 8.831, y: 13.818), control2: CGPoint(x: 8.722, y: 13.886))
        p.addCurve(to: CGPoint(x: 6.417, y: 13.909), control1: CGPoint(x: 7.861, y: 14.031), control2: CGPoint(x: 7.139, y: 14.031))
        p.addCurve(to: CGPoint(x: 6.092, y: 13.706), control1: CGPoint(x: 6.281, y: 13.886), control2: CGPoint(x: 6.172, y: 13.818))
        p.addCurve(to: CGPoint(x: 6.007, y: 13.333), control1: CGPoint(x: 6.012, y: 13.593), control2: CGPoint(x: 5.984, y: 13.469))
        p.addCurve(to: CGPoint(x: 6.209, y: 13.006), control1: CGPoint(x: 6.03, y: 13.194), control2: CGPoint(x: 6.098, y: 13.085))
        p.addCurve(to: CGPoint(x: 6.583, y: 12.923), control1: CGPoint(x: 6.319, y: 12.927), control2: CGPoint(x: 6.444, y: 12.9))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// LoaderCircleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val LoaderCircleIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "loader-circle", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(LoaderCircleIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_loader_circle.xml · Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M4.837 2.687C4.277 2.998 3.785 3.394 3.363 3.876C2.964 4.331 2.65 4.837 2.419 5.395C2.187 5.953 2.052 6.534 2.012 7.137C1.97 7.776 2.037 8.404 2.214 9.02C2.392 9.636 2.668 10.204 3.044 10.724C3.398 11.213 3.821 11.633 4.313 11.983C4.428 12.065 4.497 12.172 4.52 12.307C4.542 12.441 4.513 12.565 4.431 12.68C4.351 12.793 4.243 12.86 4.107 12.883C3.971 12.906 3.847 12.878 3.734 12.798C3.152 12.384 2.652 11.888 2.234 11.31C1.789 10.696 1.463 10.025 1.253 9.297C1.044 8.569 0.964 7.827 1.014 7.071C1.061 6.358 1.222 5.672 1.495 5.013C1.768 4.353 2.14 3.755 2.61 3.217C3.109 2.648 3.69 2.179 4.353 1.812C5.016 1.446 5.722 1.202 6.47 1.082C7.175 0.969 7.879 0.972 8.583 1.091C8.719 1.114 8.828 1.182 8.908 1.294C8.988 1.407 9.016 1.531 8.993 1.667C8.97 1.803 8.902 1.911 8.79 1.991C8.677 2.071 8.553 2.1 8.417 2.077C7.821 1.976 7.225 1.974 6.628 2.07C5.995 2.171 5.398 2.377 4.837 2.687ZM12.97 6.97C13.116 6.823 13.293 6.75 13.5 6.75C13.707 6.75 13.884 6.823 14.03 6.97C14.177 7.116 14.25 7.293 14.25 7.5C14.25 7.707 14.177 7.884 14.03 8.03C13.884 8.177 13.707 8.25 13.5 8.25C13.293 8.25 13.116 8.177 12.97 8.03C12.823 7.884 12.75 7.707 12.75 7.5C12.75 7.293 12.823 7.116 12.97 6.97ZM12.307 10.48C12.441 10.458 12.565 10.487 12.68 10.569C12.795 10.65 12.864 10.758 12.886 10.892C12.909 11.026 12.88 11.151 12.798 11.266C12.374 11.863 11.863 12.374 11.266 12.798C11.151 12.88 11.026 12.909 10.892 12.886C10.758 12.864 10.65 12.795 10.569 12.68C10.487 12.565 10.458 12.441 10.48 12.307C10.503 12.172 10.572 12.065 10.687 11.983C11.192 11.624 11.624 11.192 11.983 10.687C12.065 10.572 12.172 10.503 12.307 10.48ZM6.583 12.923C7.194 13.026 7.806 13.026 8.417 12.923C8.556 12.9 8.681 12.927 8.791 13.006C8.902 13.085 8.97 13.194 8.993 13.333C9.016 13.472 8.989 13.597 8.91 13.708C8.831 13.818 8.722 13.886 8.583 13.909C7.861 14.031 7.139 14.031 6.417 13.909C6.281 13.886 6.172 13.818 6.092 13.706C6.012 13.593 5.984 13.469 6.007 13.333C6.03 13.194 6.098 13.085 6.209 13.006C6.319 12.927 6.444 12.9 6.583 12.923Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "loader-circle" (line-round), MIT. https://gentleface.com/icons/loader-circle
import 'package:flutter/widgets.dart';

class LoaderCircleIcon extends StatelessWidget {
  const LoaderCircleIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _LoaderCircleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _LoaderCircleIconPainter extends CustomPainter {
  _LoaderCircleIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(4.837, 2.687)
      ..cubicTo(4.277, 2.998, 3.785, 3.394, 3.363, 3.876)
      ..cubicTo(2.964, 4.331, 2.65, 4.837, 2.419, 5.395)
      ..cubicTo(2.187, 5.953, 2.052, 6.534, 2.012, 7.137)
      ..cubicTo(1.97, 7.776, 2.037, 8.404, 2.214, 9.02)
      ..cubicTo(2.392, 9.636, 2.668, 10.204, 3.044, 10.724)
      ..cubicTo(3.398, 11.213, 3.821, 11.633, 4.313, 11.983)
      ..cubicTo(4.428, 12.065, 4.497, 12.172, 4.52, 12.307)
      ..cubicTo(4.542, 12.441, 4.513, 12.565, 4.431, 12.68)
      ..cubicTo(4.351, 12.793, 4.243, 12.86, 4.107, 12.883)
      ..cubicTo(3.971, 12.906, 3.847, 12.878, 3.734, 12.798)
      ..cubicTo(3.152, 12.384, 2.652, 11.888, 2.234, 11.31)
      ..cubicTo(1.789, 10.696, 1.463, 10.025, 1.253, 9.297)
      ..cubicTo(1.044, 8.569, 0.964, 7.827, 1.014, 7.071)
      ..cubicTo(1.061, 6.358, 1.222, 5.672, 1.495, 5.013)
      ..cubicTo(1.768, 4.353, 2.14, 3.755, 2.61, 3.217)
      ..cubicTo(3.109, 2.648, 3.69, 2.179, 4.353, 1.812)
      ..cubicTo(5.016, 1.446, 5.722, 1.202, 6.47, 1.082)
      ..cubicTo(7.175, 0.969, 7.879, 0.972, 8.583, 1.091)
      ..cubicTo(8.719, 1.114, 8.828, 1.182, 8.908, 1.294)
      ..cubicTo(8.988, 1.407, 9.016, 1.531, 8.993, 1.667)
      ..cubicTo(8.97, 1.803, 8.902, 1.911, 8.79, 1.991)
      ..cubicTo(8.677, 2.071, 8.553, 2.1, 8.417, 2.077)
      ..cubicTo(7.821, 1.976, 7.225, 1.974, 6.628, 2.07)
      ..cubicTo(5.995, 2.171, 5.398, 2.377, 4.837, 2.687)
      ..close()
      ..moveTo(12.97, 6.97)
      ..cubicTo(13.116, 6.823, 13.293, 6.75, 13.5, 6.75)
      ..cubicTo(13.707, 6.75, 13.884, 6.823, 14.03, 6.97)
      ..cubicTo(14.177, 7.116, 14.25, 7.293, 14.25, 7.5)
      ..cubicTo(14.25, 7.707, 14.177, 7.884, 14.03, 8.03)
      ..cubicTo(13.884, 8.177, 13.707, 8.25, 13.5, 8.25)
      ..cubicTo(13.293, 8.25, 13.116, 8.177, 12.97, 8.03)
      ..cubicTo(12.823, 7.884, 12.75, 7.707, 12.75, 7.5)
      ..cubicTo(12.75, 7.293, 12.823, 7.116, 12.97, 6.97)
      ..close()
      ..moveTo(12.307, 10.48)
      ..cubicTo(12.441, 10.458, 12.565, 10.487, 12.68, 10.569)
      ..cubicTo(12.795, 10.65, 12.864, 10.758, 12.886, 10.892)
      ..cubicTo(12.909, 11.026, 12.88, 11.151, 12.798, 11.266)
      ..cubicTo(12.374, 11.863, 11.863, 12.374, 11.266, 12.798)
      ..cubicTo(11.151, 12.88, 11.026, 12.909, 10.892, 12.886)
      ..cubicTo(10.758, 12.864, 10.65, 12.795, 10.569, 12.68)
      ..cubicTo(10.487, 12.565, 10.458, 12.441, 10.48, 12.307)
      ..cubicTo(10.503, 12.172, 10.572, 12.065, 10.687, 11.983)
      ..cubicTo(11.192, 11.624, 11.624, 11.192, 11.983, 10.687)
      ..cubicTo(12.065, 10.572, 12.172, 10.503, 12.307, 10.48)
      ..close()
      ..moveTo(6.583, 12.923)
      ..cubicTo(7.194, 13.026, 7.806, 13.026, 8.417, 12.923)
      ..cubicTo(8.556, 12.9, 8.681, 12.927, 8.791, 13.006)
      ..cubicTo(8.902, 13.085, 8.97, 13.194, 8.993, 13.333)
      ..cubicTo(9.016, 13.472, 8.989, 13.597, 8.91, 13.708)
      ..cubicTo(8.831, 13.818, 8.722, 13.886, 8.583, 13.909)
      ..cubicTo(7.861, 14.031, 7.139, 14.031, 6.417, 13.909)
      ..cubicTo(6.281, 13.886, 6.172, 13.818, 6.092, 13.706)
      ..cubicTo(6.012, 13.593, 5.984, 13.469, 6.007, 13.333)
      ..cubicTo(6.03, 13.194, 6.098, 13.085, 6.209, 13.006)
      ..cubicTo(6.319, 12.927, 6.444, 12.9, 6.583, 12.923)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_LoaderCircleIconPainter old) => old.color != color;
}
```