Gentleface › Design › animation-off

animation-off icon

Animation off: reduce motion, animations off, reduced motion, disable animations. 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="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L9.288 9.995C8.792 9.973 8.31 9.869 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.131 6.69 5.028 6.209 5.005 5.712L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM7.913 8.62L6.38 7.087C6.546 7.415 6.761 7.711 7.025 7.975C7.289 8.239 7.585 8.454 7.913 8.62ZM5.679 3.124C6.089 2.463 6.634 1.944 7.314 1.567C7.994 1.189 8.722 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.278 13.811 7.006 13.433 7.686C13.056 8.366 12.537 8.911 11.876 9.321C11.759 9.394 11.633 9.415 11.499 9.384C11.364 9.352 11.261 9.278 11.188 9.161C11.115 9.044 11.094 8.918 11.125 8.783C11.157 8.649 11.231 8.545 11.348 8.472C11.862 8.153 12.266 7.729 12.559 7.2C12.853 6.671 13 6.105 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 2C8.895 2 8.329 2.147 7.8 2.441C7.271 2.734 6.847 3.138 6.528 3.652C6.455 3.769 6.351 3.843 6.217 3.875C6.082 3.906 5.956 3.885 5.839 3.812C5.72 3.738 5.644 3.634 5.613 3.502C5.582 3.369 5.604 3.243 5.679 3.124ZM5.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

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

export function AnimationOffIcon(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="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L9.288 9.995C8.792 9.973 8.31 9.869 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.131 6.69 5.028 6.209 5.005 5.712L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM7.913 8.62L6.38 7.087C6.546 7.415 6.761 7.711 7.025 7.975C7.289 8.239 7.585 8.454 7.913 8.62ZM5.679 3.124C6.089 2.463 6.634 1.944 7.314 1.567C7.994 1.189 8.722 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.278 13.811 7.006 13.433 7.686C13.056 8.366 12.537 8.911 11.876 9.321C11.759 9.394 11.633 9.415 11.499 9.384C11.364 9.352 11.261 9.278 11.188 9.161C11.115 9.044 11.094 8.918 11.125 8.783C11.157 8.649 11.231 8.545 11.348 8.472C11.862 8.153 12.266 7.729 12.559 7.2C12.853 6.671 13 6.105 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 2C8.895 2 8.329 2.147 7.8 2.441C7.271 2.734 6.847 3.138 6.528 3.652C6.455 3.769 6.351 3.843 6.217 3.875C6.082 3.906 5.956 3.885 5.839 3.812C5.72 3.738 5.644 3.634 5.613 3.502C5.582 3.369 5.604 3.243 5.679 3.124ZM5.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: see /icons/animation-off.md

Svelte

Svelte: see /icons/animation-off.md

HTML img

HTML img: see /icons/animation-off.md

CSS

CSS: see /icons/animation-off.md

Data URL

Data URL: see /icons/animation-off.md

Sprite

Sprite: see /icons/animation-off.md

SwiftUI

SwiftUI: see /icons/animation-off.md

Compose

Compose: see /icons/animation-off.md

Android XML

Android XML: see /icons/animation-off.md

Flutter

Flutter: see /icons/animation-off.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

reduce motion, animations off, reduced motion, disable animations, prefers reduced motion

Example

Reduce motion in accessibility settings (prefers-reduced-motion)

Built from

animation + slash

Tags

animation, animate, motion, transition, movement, effect, slash

Category

Design

Component name

AnimationOffIcon

History

2026-10-16 added

Family 1

animation

More design icons

align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three angle bezier-curve boolean-exclude boolean-intersect boolean-union bounding-box brush brush-sparkle · all design icons

For agents

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

animation-off icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp