{
 "name": "play-pause",
 "title": "Play pause",
 "component": "PlayPauseIcon",
 "url": "https://gentleface.com/icons/play-pause",
 "category": "media",
 "motif": "transport",
 "added": "2026-11-06",
 "since": "0.4.0",
 "history": [
  {
   "date": "2026-11-06",
   "what": [
    "20 px drawn",
    "24 px drawn",
    "added",
    "released in 0.4.0"
   ]
  }
 ],
 "geometry_hash": "79d607387c78",
 "use_for": [
  "play pause toggle",
  "toggle playback"
 ],
 "alternatives": [
  {
   "icon": "play",
   "why": "separate play and pause buttons that swap",
   "concept": "play-pause-toggle"
  }
 ],
 "also_fits": [
  {
   "concept": "play",
   "owner": "play",
   "why": "one key that toggles play and pause (play-pause-toggle)"
  }
 ],
 "family": [
  "eject",
  "fast-forward",
  "pause",
  "pause-circle",
  "play",
  "play-alert",
  "play-check",
  "play-circle",
  "play-clock",
  "play-gear",
  "play-off",
  "play-x",
  "record",
  "record-dot",
  "rewind",
  "skip-back",
  "skip-forward",
  "stop",
  "stop-circle"
 ],
 "tags": [
  "play-pause",
  "play",
  "pause",
  "toggle",
  "media-key",
  "playback",
  "media",
  "triangle",
  "bars"
 ],
 "size": 16,
 "styles": [
  "line-round",
  "line-soft",
  "line-sharp",
  "solid-round",
  "solid-soft",
  "solid-sharp"
 ],
 "default_style": "line-round",
 "svg": {
  "line-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M2.777 11.916C2.662 11.993 2.537 12.017 2.402 11.99C2.267 11.963 2.161 11.892 2.084 11.777C2.028 11.693 2 11.601 2 11.5L2 3.5C2 3.359 2.048 3.241 2.144 3.144C2.241 3.048 2.359 3 2.5 3C2.601 3 2.693 3.028 2.777 3.084L8.777 7.084C8.892 7.161 8.963 7.267 8.99 7.402C9.017 7.537 8.993 7.662 8.916 7.777C8.879 7.833 8.833 7.879 8.777 7.916L2.777 11.916ZM11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5L11 3.5C11 3.359 11.048 3.241 11.144 3.144C11.241 3.048 11.359 3 11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5L12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12ZM14.5 12C14.359 12 14.241 11.952 14.144 11.856C14.048 11.759 14 11.641 14 11.5L14 3.5C14 3.359 14.048 3.241 14.144 3.144C14.241 3.048 14.359 3 14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5L15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12ZM7.599 7.5L3 4.434L3 10.566L7.599 7.5Z\"/></svg>",
  "line-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M2.777 11.916C2.662 11.993 2.537 12.017 2.402 11.99C2.267 11.963 2.161 11.892 2.084 11.777C2.028 11.693 2 11.601 2 11.5L2 3.5C2 3.359 2.048 3.241 2.144 3.144C2.241 3.048 2.359 3 2.5 3C2.601 3 2.693 3.028 2.777 3.084L8.777 7.084C8.892 7.161 8.963 7.267 8.99 7.402C9.017 7.537 8.993 7.662 8.916 7.777C8.879 7.833 8.833 7.879 8.777 7.916L2.777 11.916ZM11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5L11 3.5C11 3.359 11.048 3.241 11.144 3.144C11.241 3.048 11.359 3 11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5L12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12ZM14.5 12C14.359 12 14.241 11.952 14.144 11.856C14.048 11.759 14 11.641 14 11.5L14 3.5C14 3.359 14.048 3.241 14.144 3.144C14.241 3.048 14.359 3 14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5L15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12ZM7.599 7.5L3 4.434L3 10.566L7.599 7.5Z\"/></svg>",
  "line-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M15 3L15 12L14 12L14 3L15 3ZM9.401 7.5L2 12.434L2 2.566L9.401 7.5ZM11 3L12 3L12 12L11 12L11 3ZM3 4.434L3 10.566L7.599 7.5L3 4.434Z\"/></svg>",
  "solid-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8.777 7.084C8.892 7.161 8.963 7.267 8.99 7.402C9.017 7.537 8.993 7.662 8.916 7.777C8.879 7.833 8.833 7.879 8.777 7.916L2.777 11.916C2.662 11.993 2.537 12.017 2.402 11.99C2.267 11.963 2.161 11.892 2.084 11.777C2.028 11.693 2 11.601 2 11.5L2 3.5C2 3.359 2.048 3.241 2.144 3.144C2.241 3.048 2.359 3 2.5 3C2.601 3 2.693 3.028 2.777 3.084L8.777 7.084ZM11.144 3.144C11.241 3.048 11.359 3 11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5L12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5L11 3.5C11 3.359 11.048 3.241 11.144 3.144ZM14.144 3.144C14.241 3.048 14.359 3 14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5L15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12C14.359 12 14.241 11.952 14.144 11.856C14.048 11.759 14 11.641 14 11.5L14 3.5C14 3.359 14.048 3.241 14.144 3.144Z\"/></svg>",
  "solid-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8.777 7.084C8.892 7.161 8.963 7.267 8.99 7.402C9.017 7.537 8.993 7.662 8.916 7.777C8.879 7.833 8.833 7.879 8.777 7.916L2.777 11.916C2.662 11.993 2.537 12.017 2.402 11.99C2.267 11.963 2.161 11.892 2.084 11.777C2.028 11.693 2 11.601 2 11.5L2 3.5C2 3.359 2.048 3.241 2.144 3.144C2.241 3.048 2.359 3 2.5 3C2.601 3 2.693 3.028 2.777 3.084L8.777 7.084ZM11.144 3.144C11.241 3.048 11.359 3 11.5 3C11.641 3 11.759 3.048 11.856 3.144C11.952 3.241 12 3.359 12 3.5L12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5L11 3.5C11 3.359 11.048 3.241 11.144 3.144ZM14.144 3.144C14.241 3.048 14.359 3 14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5L15 11.5C15 11.641 14.952 11.759 14.856 11.856C14.759 11.952 14.641 12 14.5 12C14.359 12 14.241 11.952 14.144 11.856C14.048 11.759 14 11.641 14 11.5L14 3.5C14 3.359 14.048 3.241 14.144 3.144Z\"/></svg>",
  "solid-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M15 3L15 12L14 12L14 3L15 3ZM2 12.434L2 2.566L9.401 7.5L2 12.434ZM11 12L11 3L12 3L12 12L11 12Z\"/></svg>"
 },
 "svg_url": {
  "line-round": "https://gentleface.com/svg/line-round/16/play-pause.svg",
  "line-soft": "https://gentleface.com/svg/line-soft/16/play-pause.svg",
  "line-sharp": "https://gentleface.com/svg/line-sharp/16/play-pause.svg",
  "solid-round": "https://gentleface.com/svg/solid-round/16/play-pause.svg",
  "solid-soft": "https://gentleface.com/svg/solid-soft/16/play-pause.svg",
  "solid-sharp": "https://gentleface.com/svg/solid-sharp/16/play-pause.svg"
 },
 "png_url": {
  "line-round": {
   "16": "https://gentleface.com/png/line-round/16/play-pause.png",
   "32": "https://gentleface.com/png/line-round/32/play-pause.png",
   "48": "https://gentleface.com/png/line-round/48/play-pause.png"
  },
  "line-soft": {
   "16": "https://gentleface.com/png/line-soft/16/play-pause.png",
   "32": "https://gentleface.com/png/line-soft/32/play-pause.png",
   "48": "https://gentleface.com/png/line-soft/48/play-pause.png"
  },
  "line-sharp": {
   "16": "https://gentleface.com/png/line-sharp/16/play-pause.png",
   "32": "https://gentleface.com/png/line-sharp/32/play-pause.png",
   "48": "https://gentleface.com/png/line-sharp/48/play-pause.png"
  },
  "solid-round": {
   "16": "https://gentleface.com/png/solid-round/16/play-pause.png",
   "32": "https://gentleface.com/png/solid-round/32/play-pause.png",
   "48": "https://gentleface.com/png/solid-round/48/play-pause.png"
  },
  "solid-soft": {
   "16": "https://gentleface.com/png/solid-soft/16/play-pause.png",
   "32": "https://gentleface.com/png/solid-soft/32/play-pause.png",
   "48": "https://gentleface.com/png/solid-soft/48/play-pause.png"
  },
  "solid-sharp": {
   "16": "https://gentleface.com/png/solid-sharp/16/play-pause.png",
   "32": "https://gentleface.com/png/solid-sharp/32/play-pause.png",
   "48": "https://gentleface.com/png/solid-sharp/48/play-pause.png"
  }
 },
 "npm": {
  "react": "import { PlayPauseIcon } from '@gentleface/react';",
  "svg": "@gentleface/icons/svg/line-round/16/play-pause.svg",
  "cdn": "https://cdn.jsdelivr.net/npm/@gentleface/icons@0.6.0/svg/line-round/16/play-pause.svg",
  "version": "0.6.0"
 },
 "license": "MIT",
 "author": "Alexander Kiselev",
 "motion": {
  "name": "play-pause-toggle",
  "does": "The triangle grows into a big play and pushes the bars out to the right. Play leaves to the left as the bars come back growing into a big pause, which then shrinks back into the two bars while the small triangle slides in.",
  "url": "https://gentleface.com/motion/play-pause-toggle.svg",
  "style": "line-round",
  "size": 16,
  "duration": 3.2,
  "frames": [
   0.3,
   2.55
  ],
  "svg": "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.001\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z\"><animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.094;0.219;0.328;0.406;0.609;0.781;1\" values=\"M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M3.5 1.5L13.5 7.5L3.5 13.5L3.5 1.5Z;M3.5 1.5L13.5 7.5L3.5 13.5L3.5 1.5Z;M-11.5 1.5L-1.5 7.5L-11.5 13.5L-11.5 1.5Z;M-8.5 3.5L-2.5 7.5L-8.5 11.5L-8.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/></path><path d=\"M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5\"><animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.144;0.213;0.35;0.484;0.594;0.725;1\" values=\"M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M18 7.5L18 3.5L18 3.5L18 11.5L18 11.5L18 7.5;M18 7.5L18 3.5L18 3.5L18 11.5L18 11.5L18 7.5;M5.5 7.5L5.5 2.5L2.5 2.5L2.5 12.5L5.5 12.5L5.5 7.5;M5.5 7.5L5.5 2.5L2.5 2.5L2.5 12.5L5.5 12.5L5.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5\" calcMode=\"spline\" keySplines=\"0 0 1 1;0 0 1 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/></path><path d=\"M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5\"><animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.144;0.213;0.363;0.497;0.594;0.725;1\" values=\"M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M21 7.5L21 3.5L21 3.5L21 11.5L21 11.5L21 7.5;M21 7.5L21 3.5L21 3.5L21 11.5L21 11.5L21 7.5;M12.5 7.5L12.5 2.5L9.5 2.5L9.5 12.5L12.5 12.5L12.5 7.5;M12.5 7.5L12.5 2.5L9.5 2.5L9.5 12.5L12.5 12.5L12.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5\" calcMode=\"spline\" keySplines=\"0 0 1 1;0 0 1 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/></path></svg>",
  "react": "// Gentleface \"play-pause\" animated (play-pause-toggle), MIT. https://gentleface.com/icons/play-pause\n// Pass a ref to start and stop it: https://gentleface.com/animated-icons\nimport { forwardRef, type SVGProps } from 'react';\n\nexport const PlayPauseToggleIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function PlayPauseToggleIcon(props, ref) {\n  return (\n    <svg ref={ref} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.001\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\" {...props}>\n      <path d=\"M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z\">\n      <animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.094;0.219;0.328;0.406;0.609;0.781;1\" values=\"M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M3.5 1.5L13.5 7.5L3.5 13.5L3.5 1.5Z;M3.5 1.5L13.5 7.5L3.5 13.5L3.5 1.5Z;M-11.5 1.5L-1.5 7.5L-11.5 13.5L-11.5 1.5Z;M-8.5 3.5L-2.5 7.5L-8.5 11.5L-8.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z;M2.5 3.5L8.5 7.5L2.5 11.5L2.5 3.5Z\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/>\n      </path>\n      <path d=\"M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5\">\n      <animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.144;0.213;0.35;0.484;0.594;0.725;1\" values=\"M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M18 7.5L18 3.5L18 3.5L18 11.5L18 11.5L18 7.5;M18 7.5L18 3.5L18 3.5L18 11.5L18 11.5L18 7.5;M5.5 7.5L5.5 2.5L2.5 2.5L2.5 12.5L5.5 12.5L5.5 7.5;M5.5 7.5L5.5 2.5L2.5 2.5L2.5 12.5L5.5 12.5L5.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5;M11.5 7.5L11.5 3.5L11.5 3.5L11.5 11.5L11.5 11.5L11.5 7.5\" calcMode=\"spline\" keySplines=\"0 0 1 1;0 0 1 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/>\n      </path>\n      <path d=\"M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5\">\n      <animate attributeName=\"d\" dur=\"3.2s\" repeatCount=\"indefinite\" keyTimes=\"0;0.144;0.213;0.363;0.497;0.594;0.725;1\" values=\"M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M21 7.5L21 3.5L21 3.5L21 11.5L21 11.5L21 7.5;M21 7.5L21 3.5L21 3.5L21 11.5L21 11.5L21 7.5;M12.5 7.5L12.5 2.5L9.5 2.5L9.5 12.5L12.5 12.5L12.5 7.5;M12.5 7.5L12.5 2.5L9.5 2.5L9.5 12.5L12.5 12.5L12.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5;M14.5 7.5L14.5 3.5L14.5 3.5L14.5 11.5L14.5 11.5L14.5 7.5\" calcMode=\"spline\" keySplines=\"0 0 1 1;0 0 1 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/>\n      </path>\n    </svg>\n  );\n});",
  "how_to_play": "https://gentleface.com/animated-icons.md"
 }
}