# animation icon

Animation. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/animation

- Category: Design
- Use it for: animation, animate, animations
- Tags: animation, animate, motion, transition, movement, effect
- Family: animation-off
- Component name: AnimationIcon
- Added: 2026-10-16

## Alternatives

- `keyframes`: keyframes on a timeline in a motion editor
- `bounce`: one bounce easing, not animation as a whole

## Also fits

- animation timeline: animation as a feature or an effect (animation)

## 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/animation.svg · PNG https://gentleface.com/png/line-round/16/animation.png · https://gentleface.com/png/line-round/32/animation.png · https://gentleface.com/png/line-round/48/animation.png
- line-soft: https://gentleface.com/svg/line-soft/16/animation.svg · PNG https://gentleface.com/png/line-soft/16/animation.png · https://gentleface.com/png/line-soft/32/animation.png · https://gentleface.com/png/line-soft/48/animation.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/animation.svg · PNG https://gentleface.com/png/line-sharp/16/animation.png · https://gentleface.com/png/line-sharp/32/animation.png · https://gentleface.com/png/line-sharp/48/animation.png
- solid-round: https://gentleface.com/svg/solid-round/16/animation.svg · PNG https://gentleface.com/png/solid-round/16/animation.png · https://gentleface.com/png/solid-round/32/animation.png · https://gentleface.com/png/solid-round/48/animation.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/animation.svg · PNG https://gentleface.com/png/solid-soft/16/animation.png · https://gentleface.com/png/solid-soft/32/animation.png · https://gentleface.com/png/solid-soft/48/animation.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/animation.svg · PNG https://gentleface.com/png/solid-sharp/16/animation.png · https://gentleface.com/png/solid-sharp/32/animation.png · https://gentleface.com/png/solid-sharp/48/animation.png

The SVG of every style: https://gentleface.com/icons/animation.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="M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z"/></svg>
```

### React

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

export function AnimationIcon(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="M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation -->
<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="M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation -->
<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="M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation. 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/animation.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation. Takes the text color. */
.icon-animation {
  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='M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z'/%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='M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z'/%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='M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation
     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#animation"/></svg>
```

### SwiftUI

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

struct AnimationIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 6.318, y: 2.318))
        p.addCurve(to: CGPoint(x: 7.844, y: 1.316), control1: CGPoint(x: 6.757, y: 1.879), control2: CGPoint(x: 7.266, y: 1.545))
        p.addCurve(to: CGPoint(x: 9.5, y: 1), control1: CGPoint(x: 8.376, y: 1.105), control2: CGPoint(x: 8.928, y: 1))
        p.addCurve(to: CGPoint(x: 11.156, y: 1.316), control1: CGPoint(x: 10.072, y: 1), control2: CGPoint(x: 10.624, y: 1.105))
        p.addCurve(to: CGPoint(x: 12.682, y: 2.318), control1: CGPoint(x: 11.734, y: 1.545), control2: CGPoint(x: 12.243, y: 1.879))
        p.addCurve(to: CGPoint(x: 13.684, y: 3.844), control1: CGPoint(x: 13.121, y: 2.757), control2: CGPoint(x: 13.455, y: 3.266))
        p.addCurve(to: CGPoint(x: 14, y: 5.5), control1: CGPoint(x: 13.895, y: 4.376), control2: CGPoint(x: 14, y: 4.928))
        p.addCurve(to: CGPoint(x: 13.684, y: 7.156), control1: CGPoint(x: 14, y: 6.072), control2: CGPoint(x: 13.895, y: 6.624))
        p.addCurve(to: CGPoint(x: 12.682, y: 8.682), control1: CGPoint(x: 13.455, y: 7.734), control2: CGPoint(x: 13.121, y: 8.243))
        p.addCurve(to: CGPoint(x: 11.156, y: 9.684), control1: CGPoint(x: 12.243, y: 9.121), control2: CGPoint(x: 11.734, y: 9.455))
        p.addCurve(to: CGPoint(x: 9.5, y: 10), control1: CGPoint(x: 10.624, y: 9.895), control2: CGPoint(x: 10.072, y: 10))
        p.addCurve(to: CGPoint(x: 7.844, y: 9.684), control1: CGPoint(x: 8.928, y: 10), control2: CGPoint(x: 8.376, y: 9.895))
        p.addCurve(to: CGPoint(x: 6.318, y: 8.682), control1: CGPoint(x: 7.266, y: 9.455), control2: CGPoint(x: 6.757, y: 9.121))
        p.addCurve(to: CGPoint(x: 5.316, y: 7.156), control1: CGPoint(x: 5.879, y: 8.243), control2: CGPoint(x: 5.545, y: 7.734))
        p.addCurve(to: CGPoint(x: 5, y: 5.5), control1: CGPoint(x: 5.105, y: 6.624), control2: CGPoint(x: 5, y: 6.072))
        p.addCurve(to: CGPoint(x: 5.316, y: 3.844), control1: CGPoint(x: 5, y: 4.928), control2: CGPoint(x: 5.105, y: 4.376))
        p.addCurve(to: CGPoint(x: 6.318, y: 2.318), control1: CGPoint(x: 5.545, y: 3.266), control2: CGPoint(x: 5.879, y: 2.757))
        p.closeSubpath()
        p.move(to: CGPoint(x: 7.025, y: 7.975))
        p.addCurve(to: CGPoint(x: 8.212, y: 8.754), control1: CGPoint(x: 7.367, y: 8.317), control2: CGPoint(x: 7.762, y: 8.576))
        p.addCurve(to: CGPoint(x: 9.5, y: 9), control1: CGPoint(x: 8.625, y: 8.918), control2: CGPoint(x: 9.055, y: 9))
        p.addCurve(to: CGPoint(x: 10.788, y: 8.754), control1: CGPoint(x: 9.945, y: 9), control2: CGPoint(x: 10.375, y: 8.918))
        p.addCurve(to: CGPoint(x: 11.975, y: 7.975), control1: CGPoint(x: 11.238, y: 8.576), control2: CGPoint(x: 11.633, y: 8.317))
        p.addCurve(to: CGPoint(x: 12.754, y: 6.788), control1: CGPoint(x: 12.317, y: 7.633), control2: CGPoint(x: 12.576, y: 7.238))
        p.addCurve(to: CGPoint(x: 13, y: 5.5), control1: CGPoint(x: 12.918, y: 6.375), control2: CGPoint(x: 13, y: 5.945))
        p.addCurve(to: CGPoint(x: 12.754, y: 4.212), control1: CGPoint(x: 13, y: 5.055), control2: CGPoint(x: 12.918, y: 4.625))
        p.addCurve(to: CGPoint(x: 11.975, y: 3.025), control1: CGPoint(x: 12.576, y: 3.762), control2: CGPoint(x: 12.317, y: 3.367))
        p.addCurve(to: CGPoint(x: 10.788, y: 2.246), control1: CGPoint(x: 11.633, y: 2.683), control2: CGPoint(x: 11.238, y: 2.424))
        p.addCurve(to: CGPoint(x: 9.5, y: 2), control1: CGPoint(x: 10.375, y: 2.082), control2: CGPoint(x: 9.945, y: 2))
        p.addCurve(to: CGPoint(x: 8.212, y: 2.246), control1: CGPoint(x: 9.055, y: 2), control2: CGPoint(x: 8.625, y: 2.082))
        p.addCurve(to: CGPoint(x: 7.025, y: 3.025), control1: CGPoint(x: 7.762, y: 2.424), control2: CGPoint(x: 7.367, y: 2.683))
        p.addCurve(to: CGPoint(x: 6.246, y: 4.212), control1: CGPoint(x: 6.683, y: 3.367), control2: CGPoint(x: 6.424, y: 3.762))
        p.addCurve(to: CGPoint(x: 6, y: 5.5), control1: CGPoint(x: 6.082, y: 4.625), control2: CGPoint(x: 6, y: 5.055))
        p.addCurve(to: CGPoint(x: 6.246, y: 6.788), control1: CGPoint(x: 6, y: 5.945), control2: CGPoint(x: 6.082, y: 6.375))
        p.addCurve(to: CGPoint(x: 7.025, y: 7.975), control1: CGPoint(x: 6.424, y: 7.238), control2: CGPoint(x: 6.683, y: 7.633))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5.025, y: 9.975))
        p.addCurve(to: CGPoint(x: 6.651, y: 10.896), control1: CGPoint(x: 5.482, y: 10.432), control2: CGPoint(x: 6.024, y: 10.739))
        p.addCurve(to: CGPoint(x: 8.286, y: 10.911), control1: CGPoint(x: 7.195, y: 11.031), control2: CGPoint(x: 7.74, y: 11.036))
        p.addCurve(to: CGPoint(x: 8.665, y: 10.971), control1: CGPoint(x: 8.423, y: 10.879), control2: CGPoint(x: 8.549, y: 10.899))
        p.addCurve(to: CGPoint(x: 8.885, y: 11.286), control1: CGPoint(x: 8.78, y: 11.044), control2: CGPoint(x: 8.854, y: 11.148))
        p.addCurve(to: CGPoint(x: 8.824, y: 11.665), control1: CGPoint(x: 8.917, y: 11.423), control2: CGPoint(x: 8.897, y: 11.549))
        p.addCurve(to: CGPoint(x: 8.51, y: 11.885), control1: CGPoint(x: 8.752, y: 11.78), control2: CGPoint(x: 8.647, y: 11.854))
        p.addCurve(to: CGPoint(x: 6.409, y: 11.866), control1: CGPoint(x: 7.808, y: 12.047), control2: CGPoint(x: 7.108, y: 12.04))
        p.addCurve(to: CGPoint(x: 4.318, y: 10.682), control1: CGPoint(x: 5.603, y: 11.664), control2: CGPoint(x: 4.906, y: 11.27))
        p.addCurve(to: CGPoint(x: 3.134, y: 8.591), control1: CGPoint(x: 3.73, y: 10.094), control2: CGPoint(x: 3.336, y: 9.397))
        p.addCurve(to: CGPoint(x: 3.115, y: 6.49), control1: CGPoint(x: 2.96, y: 7.892), control2: CGPoint(x: 2.953, y: 7.192))
        p.addCurve(to: CGPoint(x: 3.337, y: 6.178), control1: CGPoint(x: 3.146, y: 6.355), control2: CGPoint(x: 3.22, y: 6.251))
        p.addCurve(to: CGPoint(x: 3.714, y: 6.115), control1: CGPoint(x: 3.454, y: 6.105), control2: CGPoint(x: 3.58, y: 6.084))
        p.addCurve(to: CGPoint(x: 4.029, y: 6.335), control1: CGPoint(x: 3.852, y: 6.146), control2: CGPoint(x: 3.956, y: 6.22))
        p.addCurve(to: CGPoint(x: 4.089, y: 6.714), control1: CGPoint(x: 4.101, y: 6.451), control2: CGPoint(x: 4.121, y: 6.577))
        p.addCurve(to: CGPoint(x: 4.104, y: 8.349), control1: CGPoint(x: 3.964, y: 7.26), control2: CGPoint(x: 3.969, y: 7.805))
        p.addCurve(to: CGPoint(x: 5.025, y: 9.975), control1: CGPoint(x: 4.261, y: 8.976), control2: CGPoint(x: 4.568, y: 9.518))
        p.closeSubpath()
        p.move(to: CGPoint(x: 2.104, y: 10.349))
        p.addCurve(to: CGPoint(x: 3.025, y: 11.975), control1: CGPoint(x: 2.261, y: 10.976), control2: CGPoint(x: 2.568, y: 11.518))
        p.addCurve(to: CGPoint(x: 4.651, y: 12.896), control1: CGPoint(x: 3.482, y: 12.432), control2: CGPoint(x: 4.024, y: 12.739))
        p.addCurve(to: CGPoint(x: 6.286, y: 12.911), control1: CGPoint(x: 5.195, y: 13.031), control2: CGPoint(x: 5.74, y: 13.036))
        p.addCurve(to: CGPoint(x: 6.663, y: 12.974), control1: CGPoint(x: 6.42, y: 12.88), control2: CGPoint(x: 6.546, y: 12.901))
        p.addCurve(to: CGPoint(x: 6.885, y: 13.286), control1: CGPoint(x: 6.78, y: 13.047), control2: CGPoint(x: 6.854, y: 13.151))
        p.addCurve(to: CGPoint(x: 6.822, y: 13.663), control1: CGPoint(x: 6.916, y: 13.42), control2: CGPoint(x: 6.895, y: 13.546))
        p.addCurve(to: CGPoint(x: 6.51, y: 13.885), control1: CGPoint(x: 6.749, y: 13.78), control2: CGPoint(x: 6.645, y: 13.854))
        p.addCurve(to: CGPoint(x: 4.409, y: 13.866), control1: CGPoint(x: 5.808, y: 14.047), control2: CGPoint(x: 5.108, y: 14.04))
        p.addCurve(to: CGPoint(x: 2.318, y: 12.682), control1: CGPoint(x: 3.603, y: 13.664), control2: CGPoint(x: 2.906, y: 13.27))
        p.addCurve(to: CGPoint(x: 1.134, y: 10.591), control1: CGPoint(x: 1.73, y: 12.094), control2: CGPoint(x: 1.336, y: 11.397))
        p.addCurve(to: CGPoint(x: 1.115, y: 8.49), control1: CGPoint(x: 0.96, y: 9.892), control2: CGPoint(x: 0.953, y: 9.192))
        p.addCurve(to: CGPoint(x: 1.335, y: 8.176), control1: CGPoint(x: 1.146, y: 8.353), control2: CGPoint(x: 1.22, y: 8.248))
        p.addCurve(to: CGPoint(x: 1.714, y: 8.115), control1: CGPoint(x: 1.451, y: 8.103), control2: CGPoint(x: 1.577, y: 8.083))
        p.addCurve(to: CGPoint(x: 2.026, y: 8.337), control1: CGPoint(x: 1.849, y: 8.146), control2: CGPoint(x: 1.953, y: 8.22))
        p.addCurve(to: CGPoint(x: 2.089, y: 8.714), control1: CGPoint(x: 2.099, y: 8.454), control2: CGPoint(x: 2.12, y: 8.58))
        p.addCurve(to: CGPoint(x: 2.104, y: 10.349), control1: CGPoint(x: 1.964, y: 9.26), control2: CGPoint(x: 1.969, y: 9.805))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation
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 AnimationIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "animation", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_animation.xml · Gentleface "animation" (line-round), MIT. https://gentleface.com/icons/animation -->
<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="M6.318 2.318C6.757 1.879 7.266 1.545 7.844 1.316C8.376 1.105 8.928 1 9.5 1C10.072 1 10.624 1.105 11.156 1.316C11.734 1.545 12.243 1.879 12.682 2.318C13.121 2.757 13.455 3.266 13.684 3.844C13.895 4.376 14 4.928 14 5.5C14 6.072 13.895 6.624 13.684 7.156C13.455 7.734 13.121 8.243 12.682 8.682C12.243 9.121 11.734 9.455 11.156 9.684C10.624 9.895 10.072 10 9.5 10C8.928 10 8.376 9.895 7.844 9.684C7.266 9.455 6.757 9.121 6.318 8.682C5.879 8.243 5.545 7.734 5.316 7.156C5.105 6.624 5 6.072 5 5.5C5 4.928 5.105 4.376 5.316 3.844C5.545 3.266 5.879 2.757 6.318 2.318ZM7.025 7.975C7.367 8.317 7.762 8.576 8.212 8.754C8.625 8.918 9.055 9 9.5 9C9.945 9 10.375 8.918 10.788 8.754C11.238 8.576 11.633 8.317 11.975 7.975C12.317 7.633 12.576 7.238 12.754 6.788C12.918 6.375 13 5.945 13 5.5C13 5.055 12.918 4.625 12.754 4.212C12.576 3.762 12.317 3.367 11.975 3.025C11.633 2.683 11.238 2.424 10.788 2.246C10.375 2.082 9.945 2 9.5 2C9.055 2 8.625 2.082 8.212 2.246C7.762 2.424 7.367 2.683 7.025 3.025C6.683 3.367 6.424 3.762 6.246 4.212C6.082 4.625 6 5.055 6 5.5C6 5.945 6.082 6.375 6.246 6.788C6.424 7.238 6.683 7.633 7.025 7.975ZM5.025 9.975C5.482 10.432 6.024 10.739 6.651 10.896C7.195 11.031 7.74 11.036 8.286 10.911C8.423 10.879 8.549 10.899 8.665 10.971C8.78 11.044 8.854 11.148 8.885 11.286C8.917 11.423 8.897 11.549 8.824 11.665C8.752 11.78 8.647 11.854 8.51 11.885C7.808 12.047 7.108 12.04 6.409 11.866C5.603 11.664 4.906 11.27 4.318 10.682C3.73 10.094 3.336 9.397 3.134 8.591C2.96 7.892 2.953 7.192 3.115 6.49C3.146 6.355 3.22 6.251 3.337 6.178C3.454 6.105 3.58 6.084 3.714 6.115C3.852 6.146 3.956 6.22 4.029 6.335C4.101 6.451 4.121 6.577 4.089 6.714C3.964 7.26 3.969 7.805 4.104 8.349C4.261 8.976 4.568 9.518 5.025 9.975ZM2.104 10.349C2.261 10.976 2.568 11.518 3.025 11.975C3.482 12.432 4.024 12.739 4.651 12.896C5.195 13.031 5.74 13.036 6.286 12.911C6.42 12.88 6.546 12.901 6.663 12.974C6.78 13.047 6.854 13.151 6.885 13.286C6.916 13.42 6.895 13.546 6.822 13.663C6.749 13.78 6.645 13.854 6.51 13.885C5.808 14.047 5.108 14.04 4.409 13.866C3.603 13.664 2.906 13.27 2.318 12.682C1.73 12.094 1.336 11.397 1.134 10.591C0.96 9.892 0.953 9.192 1.115 8.49C1.146 8.353 1.22 8.248 1.335 8.176C1.451 8.103 1.577 8.083 1.714 8.115C1.849 8.146 1.953 8.22 2.026 8.337C2.099 8.454 2.12 8.58 2.089 8.714C1.964 9.26 1.969 9.805 2.104 10.349Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(6.318, 2.318)
      ..cubicTo(6.757, 1.879, 7.266, 1.545, 7.844, 1.316)
      ..cubicTo(8.376, 1.105, 8.928, 1, 9.5, 1)
      ..cubicTo(10.072, 1, 10.624, 1.105, 11.156, 1.316)
      ..cubicTo(11.734, 1.545, 12.243, 1.879, 12.682, 2.318)
      ..cubicTo(13.121, 2.757, 13.455, 3.266, 13.684, 3.844)
      ..cubicTo(13.895, 4.376, 14, 4.928, 14, 5.5)
      ..cubicTo(14, 6.072, 13.895, 6.624, 13.684, 7.156)
      ..cubicTo(13.455, 7.734, 13.121, 8.243, 12.682, 8.682)
      ..cubicTo(12.243, 9.121, 11.734, 9.455, 11.156, 9.684)
      ..cubicTo(10.624, 9.895, 10.072, 10, 9.5, 10)
      ..cubicTo(8.928, 10, 8.376, 9.895, 7.844, 9.684)
      ..cubicTo(7.266, 9.455, 6.757, 9.121, 6.318, 8.682)
      ..cubicTo(5.879, 8.243, 5.545, 7.734, 5.316, 7.156)
      ..cubicTo(5.105, 6.624, 5, 6.072, 5, 5.5)
      ..cubicTo(5, 4.928, 5.105, 4.376, 5.316, 3.844)
      ..cubicTo(5.545, 3.266, 5.879, 2.757, 6.318, 2.318)
      ..close()
      ..moveTo(7.025, 7.975)
      ..cubicTo(7.367, 8.317, 7.762, 8.576, 8.212, 8.754)
      ..cubicTo(8.625, 8.918, 9.055, 9, 9.5, 9)
      ..cubicTo(9.945, 9, 10.375, 8.918, 10.788, 8.754)
      ..cubicTo(11.238, 8.576, 11.633, 8.317, 11.975, 7.975)
      ..cubicTo(12.317, 7.633, 12.576, 7.238, 12.754, 6.788)
      ..cubicTo(12.918, 6.375, 13, 5.945, 13, 5.5)
      ..cubicTo(13, 5.055, 12.918, 4.625, 12.754, 4.212)
      ..cubicTo(12.576, 3.762, 12.317, 3.367, 11.975, 3.025)
      ..cubicTo(11.633, 2.683, 11.238, 2.424, 10.788, 2.246)
      ..cubicTo(10.375, 2.082, 9.945, 2, 9.5, 2)
      ..cubicTo(9.055, 2, 8.625, 2.082, 8.212, 2.246)
      ..cubicTo(7.762, 2.424, 7.367, 2.683, 7.025, 3.025)
      ..cubicTo(6.683, 3.367, 6.424, 3.762, 6.246, 4.212)
      ..cubicTo(6.082, 4.625, 6, 5.055, 6, 5.5)
      ..cubicTo(6, 5.945, 6.082, 6.375, 6.246, 6.788)
      ..cubicTo(6.424, 7.238, 6.683, 7.633, 7.025, 7.975)
      ..close()
      ..moveTo(5.025, 9.975)
      ..cubicTo(5.482, 10.432, 6.024, 10.739, 6.651, 10.896)
      ..cubicTo(7.195, 11.031, 7.74, 11.036, 8.286, 10.911)
      ..cubicTo(8.423, 10.879, 8.549, 10.899, 8.665, 10.971)
      ..cubicTo(8.78, 11.044, 8.854, 11.148, 8.885, 11.286)
      ..cubicTo(8.917, 11.423, 8.897, 11.549, 8.824, 11.665)
      ..cubicTo(8.752, 11.78, 8.647, 11.854, 8.51, 11.885)
      ..cubicTo(7.808, 12.047, 7.108, 12.04, 6.409, 11.866)
      ..cubicTo(5.603, 11.664, 4.906, 11.27, 4.318, 10.682)
      ..cubicTo(3.73, 10.094, 3.336, 9.397, 3.134, 8.591)
      ..cubicTo(2.96, 7.892, 2.953, 7.192, 3.115, 6.49)
      ..cubicTo(3.146, 6.355, 3.22, 6.251, 3.337, 6.178)
      ..cubicTo(3.454, 6.105, 3.58, 6.084, 3.714, 6.115)
      ..cubicTo(3.852, 6.146, 3.956, 6.22, 4.029, 6.335)
      ..cubicTo(4.101, 6.451, 4.121, 6.577, 4.089, 6.714)
      ..cubicTo(3.964, 7.26, 3.969, 7.805, 4.104, 8.349)
      ..cubicTo(4.261, 8.976, 4.568, 9.518, 5.025, 9.975)
      ..close()
      ..moveTo(2.104, 10.349)
      ..cubicTo(2.261, 10.976, 2.568, 11.518, 3.025, 11.975)
      ..cubicTo(3.482, 12.432, 4.024, 12.739, 4.651, 12.896)
      ..cubicTo(5.195, 13.031, 5.74, 13.036, 6.286, 12.911)
      ..cubicTo(6.42, 12.88, 6.546, 12.901, 6.663, 12.974)
      ..cubicTo(6.78, 13.047, 6.854, 13.151, 6.885, 13.286)
      ..cubicTo(6.916, 13.42, 6.895, 13.546, 6.822, 13.663)
      ..cubicTo(6.749, 13.78, 6.645, 13.854, 6.51, 13.885)
      ..cubicTo(5.808, 14.047, 5.108, 14.04, 4.409, 13.866)
      ..cubicTo(3.603, 13.664, 2.906, 13.27, 2.318, 12.682)
      ..cubicTo(1.73, 12.094, 1.336, 11.397, 1.134, 10.591)
      ..cubicTo(0.96, 9.892, 0.953, 9.192, 1.115, 8.49)
      ..cubicTo(1.146, 8.353, 1.22, 8.248, 1.335, 8.176)
      ..cubicTo(1.451, 8.103, 1.577, 8.083, 1.714, 8.115)
      ..cubicTo(1.849, 8.146, 1.953, 8.22, 2.026, 8.337)
      ..cubicTo(2.099, 8.454, 2.12, 8.58, 2.089, 8.714)
      ..cubicTo(1.964, 9.26, 1.969, 9.805, 2.104, 10.349)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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