fix(icons): arcified playback icons (#3425)

* fix(icons): arcified playback icons

* fix(icons): fix file-play name & file-video-2 => file-video-camera

* fix(icons): add `stop` tags to square

* fix(icons): fix lines on skip icons

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>

icons/bug-play.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "danielbayley",
-    "jguddas"
+    "jguddas",
+    "karsa-mistmere"
   ],
   "tags": [
     "debug",

icons/bug-play.svg

@@ -9,13 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M12.765 21.522a.5.5 0 0 1-.765-.424v-8.196a.5.5 0 0 1 .765-.424l5.878 3.674a1 1 0 0 1 0 1.696z" />
+  <path d="M10 19.655A6 6 0 0 1 6 14v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 3.97" />
+  <path d="M14 15.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z" />
   <path d="M14.12 3.88 16 2" />
-  <path d="M18 11a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v3a6.1 6.1 0 0 0 2 4.5" />
   <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
   <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
   <path d="M6 13H2" />
   <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
   <path d="m8 2 1.88 1.88" />
-  <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+  <path d="M9 7.13v-1a3 3 0 0 1 4.18-2.895 3 3 0 0 1 1.821 2.896v1" />
 </svg>

icons/circle-play.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "colebemis"
+    "colebemis",
+    "karsa-mistmere"
   ],
   "tags": [
     "music",

icons/circle-play.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z" />
   <circle cx="12" cy="12" r="10" />
-  <polygon points="10 8 16 12 10 16 10 8" />
 </svg>

icons/fast-forward.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "colebemis"
+    "colebemis",
+    "karsa-mistmere"
   ],
   "tags": [
     "music"

icons/fast-forward.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polygon points="13 19 22 12 13 5 13 19" />
-  <polygon points="2 19 11 12 2 5 2 19" />
+  <path d="M12 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 12 18z" />
+  <path d="M2 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 2 18z" />
 </svg>

icons/file-play.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "files"
+  ],
+  "aliases": [
+    "file-video"
   ]
 }

icons/file-play.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
   <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-  <path d="m10 11 5 3-5 3v-6Z" />
+  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
+  <path d="M15.033 13.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z" />
 </svg>

icons/file-video-camera.json

@@ -12,5 +12,8 @@
   ],
   "categories": [
     "files"
+  ],
+  "aliases": [
+    "file-video-2"
   ]
 }

icons/file-video-camera.svg

@@ -12,5 +12,5 @@
   <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
   <path d="M14 2v4a2 2 0 0 0 2 2h4" />
   <rect width="8" height="6" x="2" y="12" rx="1" />
-  <path d="m10 15.5 4 2.5v-6l-4 2.5" />
+  <path d="m10 13.843 3.033-1.755a.645.645 0 0 1 .967.56v4.704a.645.645 0 0 1-.967.56L10 16.157" />
 </svg>

icons/image-play.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m11 16-5 5" />
-  <path d="M11 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6.5" />
-  <path d="M15.765 22a.5.5 0 0 1-.765-.424V13.38a.5.5 0 0 1 .765-.424l5.878 3.674a1 1 0 0 1 0 1.696z" />
+  <path d="M15 15.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z" />
+  <path d="M21 12.17V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" />
+  <path d="m6 21 5-5" />
   <circle cx="9" cy="9" r="2" />
 </svg>

icons/list-video.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M12 12H3" />
-  <path d="M16 6H3" />
   <path d="M12 18H3" />
-  <path d="m16 12 5 3-5 3v-6Z" />
+  <path d="M16 6H3" />
+  <path d="M21.033 14.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .968-.56z" />
 </svg>

icons/monitor-play.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M10 7.75a.75.75 0 0 1 1.142-.638l3.664 2.249a.75.75 0 0 1 0 1.278l-3.664 2.25a.75.75 0 0 1-1.142-.64z" />
+  <path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z" />
   <path d="M12 17v4" />
   <path d="M8 21h8" />
   <rect x="2" y="3" width="20" height="14" rx="2" />

icons/pause.json

@@ -3,7 +3,8 @@
   "contributors": [
     "colebemis",
     "ericfennis",
-    "jguddas"
+    "jguddas",
+    "karsa-mistmere"
   ],
   "tags": [
     "music",

icons/pause.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect x="14" y="4" width="4" height="16" rx="1" />
-  <rect x="6" y="4" width="4" height="16" rx="1" />
+  <rect x="14" y="3" width="5" height="18" rx="1" />
+  <rect x="5" y="3" width="5" height="18" rx="1" />
 </svg>

icons/play.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "colebemis"
+    "colebemis",
+    "karsa-mistmere"
   ],
   "tags": [
     "music",

icons/play.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polygon points="6 3 20 12 6 21 6 3" />
+  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
 </svg>

icons/rewind.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "colebemis"
+    "colebemis",
+    "karsa-mistmere"
   ],
   "tags": [
     "music"

icons/rewind.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polygon points="11 19 2 12 11 5 11 19" />
-  <polygon points="22 19 13 12 22 5 22 19" />
+  <path d="M12 6a2 2 0 0 0-3.414-1.414l-6 6a2 2 0 0 0 0 2.828l6 6A2 2 0 0 0 12 18z" />
+  <path d="M22 6a2 2 0 0 0-3.414-1.414l-6 6a2 2 0 0 0 0 2.828l6 6A2 2 0 0 0 22 18z" />
 </svg>

icons/skip-back.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "colebemis",
-    "ericfennis"
+    "ericfennis",
+    "karsa-mistmere"
   ],
   "tags": [
     "arrow",

icons/skip-back.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polygon points="19 20 9 12 19 4 19 20" />
-  <line x1="5" x2="5" y1="19" y2="5" />
+  <path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z" />
+  <path d="M3 20V4" />
 </svg>

icons/skip-forward.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "colebemis",
-    "ericfennis"
+    "ericfennis",
+    "karsa-mistmere"
   ],
   "tags": [
     "arrow",

icons/skip-forward.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polygon points="5 4 15 12 5 20 5 4" />
-  <line x1="19" x2="19" y1="5" y2="19" />
+  <path d="M21 4v16" />
+  <path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z" />
 </svg>

icons/square-pause.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "music",
+    "audio",
+    "stop"
+  ],
+  "categories": [
+    "multimedia"
+  ]
+}

icons/square-pause.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <line x1="10" x2="10" y1="15" y2="9" />
+  <line x1="14" x2="14" y1="15" y2="9" />
+</svg>

icons/square-play.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="3" rx="2" />
-  <path d="m9 8 6 4-6 4Z" />
+  <rect x="3" y="3" width="18" height="18" rx="2" />
+  <path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z" />
 </svg>

icons/square-stop.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "media",
+    "music"
+  ],
+  "categories": [
+    "multimedia"
+  ]
+}

icons/square-stop.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <rect x="9" y="9" width="6" height="6" rx="1" />
+</svg>

icons/square.json

@@ -5,12 +5,18 @@
     "ericfennis"
   ],
   "tags": [
+    "stop",
+    "playback",
+    "music",
+    "audio",
+    "video",
     "rectangle",
     "aspect ratio",
     "1:1",
     "shape"
   ],
   "categories": [
-    "shapes"
+    "shapes",
+    "multimedia"
   ]
 }

icons/step-back.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
   ],
   "tags": [
     "arrow",

icons/step-back.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="18" x2="18" y1="20" y2="4" />
-  <polygon points="14,20 4,12 14,4" />
+  <path d="M13.971 4.285A2 2 0 0 1 17 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z" />
+  <path d="M21 20V4" />
 </svg>

icons/step-forward.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="6" x2="6" y1="4" y2="20" />
-  <polygon points="10,4 20,12 10,20" />
+  <path d="M10.029 4.285A2 2 0 0 0 7 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z" />
+  <path d="M3 4v16" />
 </svg>

icons/tv-minimal-play.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M10 7.75a.75.75 0 0 1 1.142-.638l3.664 2.249a.75.75 0 0 1 0 1.278l-3.664 2.25a.75.75 0 0 1-1.142-.64z" />
+  <path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z" />
   <path d="M7 21h10" />
   <rect width="20" height="14" x="2" y="3" rx="2" />
 </svg>