Gentleface › Layout & interface › loader-circle

loader-circle icon

Loader circle: loading, busy. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

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

// 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: see /icons/loader-circle.md

Svelte

Svelte: see /icons/loader-circle.md

HTML img

HTML img: see /icons/loader-circle.md

CSS

CSS: see /icons/loader-circle.md

Data URL

Data URL: see /icons/loader-circle.md

Sprite

Sprite: see /icons/loader-circle.md

SwiftUI

SwiftUI: see /icons/loader-circle.md

Compose

Compose: see /icons/loader-circle.md

Android XML

Android XML: see /icons/loader-circle.md

Flutter

Flutter: see /icons/loader-circle.md

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. 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. More in how to use.

Meaning

Use it for

loading, busy

Also fits

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

Built from

variant of loader

Tags

loader, loading, spinner, busy, progress, circle-notch, wait

Category

Layout & interface

Component name

LoaderCircleIcon

History

2026-10-15 added

Family 1

loader

More layout & interface icons

apps browser cards checkbox checkbox-indeterminate checkbox-off columns columns-gear cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand · all layout & interface icons

For agents

Metadata: /icons/loader-circle.json · Markdown: /icons/loader-circle.md · SVG: https://gentleface.com/svg/{style}/16/loader-circle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/loader-circle.png

loader-circle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp