9 files changed, 73 insertions, 0 deletions
diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg
new file mode 100644
index 0000000000..5ccf8c6e9d
--- /dev/null
+++ b/toolkit/themes/shared/narrate/arrow.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path fill="context-fill" d="M6 9L1 4l1-1 4 4 4-4 1 1z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg
new file mode 100644
index 0000000000..7b5b1ebea9
--- /dev/null
+++ b/toolkit/themes/shared/narrate/back.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="context-fill" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg
new file mode 100644
index 0000000000..61a45a7c9b
--- /dev/null
+++ b/toolkit/themes/shared/narrate/fast.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20.4">
+    <path fill="context-fill" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg
new file mode 100644
index 0000000000..2a90ddd9c6
--- /dev/null
+++ b/toolkit/themes/shared/narrate/forward.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="context-fill" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/headphone-active.svg b/toolkit/themes/shared/narrate/headphone-active.svg
new file mode 100644
index 0000000000..ecfcc4f133
--- /dev/null
+++ b/toolkit/themes/shared/narrate/headphone-active.svg
@@ -0,0 +1,22 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="context-fill">
+  <style>
+    @keyframes wavy {
+      from {
+        translate: 0;
+      }
+      to {
+        translate: -17.415px;
+      }
+    }
+  </style>
+  <clipPath id="clip">
+    <rect width="10" height="16" x="3" y="0"/>
+  </clipPath>
+  <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/>
+  <g clip-path="url(#clip)">
+    <path style="animation: wavy 2s infinite linear" d="M13.193 8.818a1.35 1.35 0 00-.838.293 1.747 1.747 0 00-.47.641c-.216.464-.314.979-.426 1.46-.113.485-.24.931-.4 1.194-.161.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.244-.41-.38-.726-.139-.317-.29-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.282.775-.246.4-.378.84-.517 1.246-.14.406-.285.774-.442.989-.157.215-.25.289-.523.289-.111 0-.138-.017-.192-.065a.885.885 0 01-.197-.324c-.136-.34-.226-.906-.32-1.5A9.493 9.493 0 004 10.447v3.815c.016.016.026.035.043.05.238.21.574.34.92.34.614 0 1.119-.338 1.414-.742.293-.403.449-.86.592-1.28.144-.417.276-.802.412-1.023.136-.22.174-.253.346-.253.304 0 .404.07.535.212.13.143.26.4.392.707.134.31.272.67.545.997.273.327.737.587 1.278.587.683 0 1.23-.403 1.52-.878.29-.476.417-1.014.534-1.516.116-.502.222-.973.35-1.248a.737.737 0 01.172-.252c.043-.035.054-.045.138-.045.307 0 .412.103.596.457.183.354.326.927.467 1.531.142.605.281 1.241.576 1.793.294.552.86 1.045 1.602 1.045.842 0 1.46-.54 1.74-1.13.268-.565.325-1.168.33-1.663a.55.55 0 000-.002.55.55 0 00.006-.076c0-.403.073-.96.258-1.342.185-.38.374-.582.873-.582.333 0 .416.093.576.424.16.331.27.88.361 1.463.092.582.171 1.194.385 1.734.108.27.251.533.488.742.238.21.574.34.92.34.614 0 1.121-.338 1.416-.742.294-.403.448-.86.592-1.28.143-.417.276-.802.412-1.023.136-.22.174-.254.346-.254.304 0 .404.071.535.213.132.143.26.4.393.707.134.31.271.67.544.996.273.327.737.588 1.278.588.666 0 1.2-.385 1.496-.845V9.596c-.03.052-.063.103-.088.156-.216.464-.312.979-.424 1.46-.113.485-.241.931-.402 1.194-.16.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.243-.41-.38-.726-.138-.317-.291-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.281.775-.247.4-.38.84-.518 1.246-.14.406-.282.774-.44.989-.156.215-.253.289-.525.289-.112 0-.137-.017-.191-.065a.885.885 0 01-.198-.324c-.136-.34-.226-.906-.32-1.5-.095-.594-.19-1.218-.457-1.77-.267-.55-.83-1.044-1.566-1.044-.905 0-1.558.576-1.862 1.203-.29.597-.357 1.235-.363 1.738a.55.55 0 000 .004.55.55 0 00-.006.078c0 .41-.066.926-.228 1.268-.162.34-.307.504-.748.504-.327 0-.443-.11-.631-.463-.19-.353-.336-.924-.477-1.526-.14-.602-.276-1.237-.56-1.787-.285-.55-.839-1.05-1.57-1.05z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/narrate/headphone.svg b/toolkit/themes/shared/narrate/headphone.svg
new file mode 100644
index 0000000000..d065061ab3
--- /dev/null
+++ b/toolkit/themes/shared/narrate/headphone.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="context-fill">
+  <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg
new file mode 100644
index 0000000000..1ef3c7b6b1
--- /dev/null
+++ b/toolkit/themes/shared/narrate/slow.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill="context-fill">
+        <path d="M1.684,13.486c-0.209,0-0.404-0.132-0.474-0.341c-0.528-1.58-0.23-5.767,4.097-7.921 c1.315-0.656,2.589-0.988,3.787-0.988c3.237,0,5.096,2.341,5.99,3.465c0.158,0.199,0.181,0.533,0,0.713 c-0.793,0.794-1.852,1.542-3.231,2.286c-2.46,1.327-5.045,1.775-7.121,2.134c-1.123,0.194-2.093,0.361-2.89,0.627 C1.789,13.479,1.735,13.486,1.684,13.486L1.684,13.486z"/>
+        <path d="M23.185,5.465c-0.86-1.121-2.074-1.819-3.168-1.819c-0.641,0-1.556,0.23-2.273,1.328 c-0.374,0.571-0.577,1.161-0.773,1.73c-0.512,1.482-1.041,3.016-4.662,4.969c-2.316,1.249-4.707,1.664-6.815,2.03 c-2.524,0.438-4.704,0.814-5.455,2.622c-0.069,0.165-0.045,0.354,0.062,0.495c0.107,0.143,0.281,0.217,0.46,0.193 c0.667-0.081,1.533,0.041,2.434,0.217c-0.122,0.146-0.261,0.286-0.391,0.418c-0.38,0.385-0.774,0.783-0.657,1.292 c0.108,0.474,0.604,0.699,0.966,0.828c0.399,0.142,0.843,0.217,1.283,0.217c1.241,0,2.216-0.579,2.649-1.539 c1.704,0.287,3.487,0.313,5.043,0.313l1.639-0.006c0.066,0.056,0.178,0.166,0.264,0.25c0.504,0.506,1.348,1.351,2.721,1.351 c0.129,0,0.264-0.008,0.416-0.026c0.687-0.102,1.351-0.267,1.574-0.787c0.227-0.528-0.123-1.023-0.526-1.597 c-0.481-0.685-1.08-1.532-0.998-2.652c0.196-0.397,0.368-0.824,0.546-1.267c0.479-1.19,0.975-2.421,2.12-3.513 c0.431,0.343,1.022,0.549,1.63,0.549l0,0c0.439,0,0.876-0.102,1.295-0.3c0.624-0.293,1.104-0.967,1.316-1.847 C24.175,7.707,23.914,6.418,23.185,5.465L23.185,5.465z M20.397,7.757c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5 c0.275,0,0.5,0.224,0.5,0.5S20.674,7.757,20.397,7.757z"/>
+    </g>
+</svg>
diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg
new file mode 100644
index 0000000000..0f6680e639
--- /dev/null
+++ b/toolkit/themes/shared/narrate/start.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="context-fill"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg
new file mode 100644
index 0000000000..9a57603e84
--- /dev/null
+++ b/toolkit/themes/shared/narrate/stop.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="context-fill"/>
+</svg>