From 7764bd4a644384edc7152213916cc6d8d0ba5761 Mon Sep 17 00:00:00 2001
From: Jan Brasna <1784648+janbrasna@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:07:47 +0200
Subject: [PATCH] Un-inline SVGs with CSP-violating features (#14857)

---
 .../templates/firefox/welcome/page10.html       |  6 +++---
 .../templates/firefox/welcome/page11.html       |  8 ++++----
 .../templates/firefox/welcome/page9.de.html     | 10 +++++-----
 .../templates/firefox/welcome/page9.fr.html     | 10 +++++-----
 .../firefox/whatsnew/includes/fx119/addons.svg  | 17 -----------------
 .../whatsnew/includes/fx120/fakespot.svg        |  5 -----
 .../firefox/whatsnew/includes/fx120/qr.svg      | 14 --------------
 .../firefox/whatsnew/includes/fx120/sync.svg    |  8 --------
 .../firefox/whatsnew/includes/fx120/toolbar.svg | 13 -------------
 media/css/firefox/welcome11.scss                | 14 --------------
 .../img/firefox/welcome}/page10/laptop.svg      |  0
 .../img/firefox/welcome}/page10/mobile.svg      |  0
 .../img/firefox/welcome}/page11/cart.svg        |  3 ++-
 .../img/firefox/welcome}/page11/globe.svg       |  3 ++-
 .../img/firefox/welcome}/page11/lock.svg        |  3 ++-
 .../firefox/welcome}/page9/illo-vpn-lock.svg    |  0
 .../firefox/welcome}/page9/illo-vpn-speed.svg   |  0
 17 files changed, 23 insertions(+), 91 deletions(-)
 delete mode 100644 bedrock/firefox/templates/firefox/whatsnew/includes/fx119/addons.svg
 delete mode 100644 bedrock/firefox/templates/firefox/whatsnew/includes/fx120/fakespot.svg
 delete mode 100644 bedrock/firefox/templates/firefox/whatsnew/includes/fx120/qr.svg
 delete mode 100644 bedrock/firefox/templates/firefox/whatsnew/includes/fx120/sync.svg
 delete mode 100644 bedrock/firefox/templates/firefox/whatsnew/includes/fx120/toolbar.svg
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page10/laptop.svg (100%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page10/mobile.svg (100%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page11/cart.svg (97%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page11/globe.svg (98%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page11/lock.svg (96%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page9/illo-vpn-lock.svg (100%)
 rename {bedrock/firefox/templates/firefox/welcome/includes => media/img/firefox/welcome}/page9/illo-vpn-speed.svg (100%)

diff --git a/bedrock/firefox/templates/firefox/welcome/page10.html b/bedrock/firefox/templates/firefox/welcome/page10.html
index 3df98735da..104ad66c33 100644
--- a/bedrock/firefox/templates/firefox/welcome/page10.html
+++ b/bedrock/firefox/templates/firefox/welcome/page10.html
@@ -26,7 +26,7 @@
 {% block content_intro %}
   <section class="c-content-main">
     <div class="mzp-l-content mzp-t-content-md">
-      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="90" alt="">
+      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="90" alt="Mozilla VPN">
 
       <h1 class="c-main-title">{{ ftl('welcome-page10-main-heading') }}</h1>
       <p class="c-main-tagline">{{ ftl('welcome-page10-main-description') }}</p>
@@ -45,7 +45,7 @@
 
       <div class="mzp-c-picto">
         <div class="mzp-c-picto-image">
-          {% include 'firefox/welcome/includes/page10/laptop.svg' %}
+          <img src="{{ static('img/firefox/welcome/page10/laptop.svg') }}" alt="">
         </div>
         <h3 class="mzp-c-picto-title">{{ ftl('welcome-page10-very-fast') }}</h3>
         <div class="mzp-c-picto-body">
@@ -55,7 +55,7 @@
 
       <div class="mzp-c-picto">
         <div class="mzp-c-picto-image">
-          {% include 'firefox/welcome/includes/page10/mobile.svg' %}
+          <img src="{{ static('img/firefox/welcome/page10/mobile.svg') }}" alt="">
         </div>
         <h3 class="mzp-c-picto-title">{{ ftl('welcome-page10-without-trace') }}</h3>
         <div class="mzp-c-picto-body">
diff --git a/bedrock/firefox/templates/firefox/welcome/page11.html b/bedrock/firefox/templates/firefox/welcome/page11.html
index df4a2676be..2e883cf0f4 100644
--- a/bedrock/firefox/templates/firefox/welcome/page11.html
+++ b/bedrock/firefox/templates/firefox/welcome/page11.html
@@ -25,7 +25,7 @@
 {% block content_intro %}
   <section class="c-content-main">
     <div class="mzp-l-content mzp-t-content-lg">
-      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="60" alt="">
+      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="60" alt="Mozilla VPN">
       <h1 class="c-main-title">{{ ftl('welcome-page11-main-heading') }}</h1>
     </div>
   </section>
@@ -38,7 +38,7 @@
 
       <div class="mzp-c-picto">
         <div class="mzp-c-picto-image">
-          {% include 'firefox/welcome/includes/page11/globe.svg' %}
+          <img src="{{ static('img/firefox/welcome/page11/globe.svg') }}" alt="">
         </div>
         <h3 class="mzp-c-picto-title">{{ ftl('welcome-page11-it-helps-you-shop') }}</h3>
         <div class="mzp-c-picto-body">
@@ -48,7 +48,7 @@
 
       <div class="mzp-c-picto">
         <div class="mzp-c-picto-image">
-          {% include 'firefox/welcome/includes/page11/cart.svg' %}
+          <img src="{{ static('img/firefox/welcome/page11/cart.svg') }}" alt="">
         </div>
         <h3 class="mzp-c-picto-title">{{ ftl('welcome-page11-it-prevents-surcharging') }}</h3>
         <div class="mzp-c-picto-body">
@@ -58,7 +58,7 @@
 
       <div class="mzp-c-picto">
         <div class="mzp-c-picto-image">
-          {% include 'firefox/welcome/includes/page11/lock.svg' %}
+          <img src="{{ static('img/firefox/welcome/page11/lock.svg') }}" alt="">
         </div>
         <h3 class="mzp-c-picto-title">{{ ftl('welcome-page11-it-protects-your-credit') }}</h3>
         <div class="mzp-c-picto-body">
diff --git a/bedrock/firefox/templates/firefox/welcome/page9.de.html b/bedrock/firefox/templates/firefox/welcome/page9.de.html
index b9ae3ef9af..029abf0e8b 100644
--- a/bedrock/firefox/templates/firefox/welcome/page9.de.html
+++ b/bedrock/firefox/templates/firefox/welcome/page9.de.html
@@ -20,14 +20,14 @@
 
 {% block shoulder_cta %}{% endblock %}
 
-{%block page_css %}
- {{ super()}}
+{% block page_css %}
+ {{ super() }}
  {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 
 {% block content_intro %}
-  <img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="">
+  <img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="Mozilla VPN">
 
   {% call callout(
     title='Standort ändern, <br>Verbindung sichern, <br><strong>Privatsphäre schützen</strong>.'|safe,
@@ -53,7 +53,7 @@
 
       <div class="c-picto-block">
         <div class="c-picto-block-image">
-          {% include 'firefox/welcome/includes/page9/illo-vpn-speed.svg' %}
+          <img src="{{ static('img/firefox/welcome/page9/illo-vpn-speed.svg') }}" alt="">
         </div>
         <h3 class="c-picto-block-title">Schnelle Verbindung</h3>
         <div class="c-picto-block-body">
@@ -63,7 +63,7 @@
 
       <div class="c-picto-block">
         <div class="c-picto-block-image">
-          {% include 'firefox/welcome/includes/page9/illo-vpn-lock.svg' %}
+          <img src="{{ static('img/firefox/welcome/page9/illo-vpn-lock.svg') }}" alt="">
         </div>
         <h3 class="c-picto-block-title">Sicher ist sicher</h3>
         <div class="c-picto-block-body">
diff --git a/bedrock/firefox/templates/firefox/welcome/page9.fr.html b/bedrock/firefox/templates/firefox/welcome/page9.fr.html
index 334de4129d..5fbcd0d361 100644
--- a/bedrock/firefox/templates/firefox/welcome/page9.fr.html
+++ b/bedrock/firefox/templates/firefox/welcome/page9.fr.html
@@ -20,14 +20,14 @@
 
 {% block shoulder_cta %}{% endblock %}
 
-{%block page_css %}
- {{ super()}}
+{% block page_css %}
+ {{ super() }}
  {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 
 {% block content_intro %}
-  <img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="">
+  <img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="Mozilla VPN">
 
   {% call callout(
     title='Changez votre localisation, sécurisez votre connexion, <strong>protégez votre vie privée</strong>.'|safe,
@@ -53,7 +53,7 @@
 
       <div class="c-picto-block">
         <div class="c-picto-block-image">
-          {% include 'firefox/welcome/includes/page9/illo-vpn-speed.svg' %}
+          <img src="{{ static('img/firefox/welcome/page9/illo-vpn-speed.svg') }}" alt="">
         </div>
         <h3 class="c-picto-block-title">Connexion rapide</h3>
         <div class="c-picto-block-body">
@@ -63,7 +63,7 @@
 
       <div class="c-picto-block">
         <div class="c-picto-block-image">
-          {% include 'firefox/welcome/includes/page9/illo-vpn-lock.svg' %}
+          <img src="{{ static('img/firefox/welcome/page9/illo-vpn-lock.svg') }}" alt="">
         </div>
         <h3 class="c-picto-block-title">Sûr de chez sûr</h3>
         <div class="c-picto-block-body">
diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx119/addons.svg b/bedrock/firefox/templates/firefox/whatsnew/includes/fx119/addons.svg
deleted file mode 100644
index af3173c0a9..0000000000
--- a/bedrock/firefox/templates/firefox/whatsnew/includes/fx119/addons.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 209 74" width="209" height="74">
-  <style>
-    .stroke {stroke:#333336;stroke-width:1.6925;stroke-miterlimit:10}
-  </style>
-  <path fill="#fff" stroke="#333336" stroke-width="2.2566" d="M37.2 2h135c19.4 0 35.2 15.7 35.2 35.2 0 19.4-15.7 35.2-35.2 35.2h-135C17.7 72.3 2 56.6 2 37.2 2 17.7 17.7 2 37.2 2z"/>
-  <g id="lock">
-    <path class="fill stroke" d="M156.1 36.3V29c0-1.9.7-3.7 2.1-5 1.3-1.3 3.1-2.1 5-2.1s3.7.7 5 2.1c1.3 1.3 2.1 3.1 2.1 5v7.3h4v-7c0-2.9-1.2-5.7-3.2-7.8-2.1-2.1-4.9-3.2-7.8-3.2-2.9 0-5.7 1.2-7.8 3.2-2.1 2.1-3.2 4.9-3.2 7.8v7h3.8z"/>
-    <path class="fill stroke" d="M177 34.7h-27.4c-1.2 0-2.1.9-2.1 2v19c0 1.1.9 2 2.1 2H177c1.2 0 2.1-.9 2.1-2v-19c0-1.1-.9-2-2.1-2z" />
-    <path fill="#333336" d="M167 44.7c0 .6-.1 1.1-.4 1.6s-.7.9-1.2 1.2V50c0 .5-.2.9-.5 1.3-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3v-2.4c-.5-.3-.9-.7-1.2-1.3-.3-.5-.4-1.1-.4-1.7 0-.6.2-1.2.5-1.7s.7-.9 1.3-1.2 1.1-.4 1.7-.4c.6 0 1.2.2 1.7.5s.9.7 1.2 1.2c.2.6.4 1.2.4 1.7z"/>
-  </g>
-  <g id="puzzle">
-    <path class="fill stroke" stroke-miterlimit="10" d="M123.2 36.5c-1.2 0-2.3.4-3.3 1.1v-7.7c0-.6-.1-1.1-.3-1.7-.2-.5-.5-1-1-1.4-.4-.4-.9-.7-1.4-.9-.5-.2-1.1-.3-1.7-.3h-7.7c.6-.8 1-1.8 1.1-2.8.1-1-.1-2-.6-2.9-.5-.9-1.2-1.7-2-2.2-.9-.5-1.9-.8-2.9-.8s-2 .3-2.9.8c-.9.5-1.6 1.3-2 2.2-.5.9-.6 1.9-.6 2.9.1 1 .5 2 1.1 2.8h-7.7c-.6 0-1.1.1-1.7.3-.5.2-1 .5-1.4.9-.4.4-.7.9-1 1.4-.2.5-.3 1.1-.3 1.7v6.7c.4-.1.7-.1 1.1-.1 1.5 0 2.8.6 3.9 1.6 1 1 1.6 2.4 1.6 3.9s-.6 2.8-1.6 3.9c-1 1-2.4 1.6-3.9 1.6-.4 0-.7 0-1.1-.1v6.7c0 .6.1 1.1.3 1.7.2.5.5 1 1 1.4.4.4.9.7 1.4 1 .5.2 1.1.3 1.7.3H98v-1.3c0-1.5.6-2.8 1.6-3.9 1-1 2.4-1.6 3.9-1.6 1.4 0 2.8.6 3.9 1.6 1 1 1.6 2.4 1.6 3.9 0 .4 0 .7-.1 1.1h6.7c.6 0 1.2-.1 1.7-.3.5-.2 1-.5 1.4-.9.4-.4.7-.9 1-1.4.2-.5.3-1.1.3-1.7v-7.7c.7.5 1.5.9 2.4 1 .9.1 1.7.1 2.6-.2.8-.3 1.6-.7 2.2-1.3.6-.6 1.1-1.4 1.4-2.2.3-.8.3-1.7.2-2.6-.1-.9-.5-1.7-1-2.4s-1.2-1.3-1.9-1.7c-1-.2-1.8-.4-2.7-.4z"/>
-  </g>
-  <g id="heart">
-    <path class="fill stroke" d="M58.7 19c-2.9 0-5.7 1.2-7.7 3.2l-2.1 2.1-2.1-2.1c-2.1-2-4.8-3.1-7.7-3.1-2.9 0-5.6 1.2-7.7 3.2s-3.2 4.8-3.2 7.7c0 2.9 1.1 5.7 3.1 7.7l2.1 2.1 15.5 15.5 15.5-15.5 2.1-2.1c1.5-1.5 2.6-3.5 3-5.6.4-2.1.2-4.3-.6-6.3s-2.2-3.7-4-4.9-4.1-1.9-6.2-1.9z"/>
-  </g>
-</svg>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/fakespot.svg b/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/fakespot.svg
deleted file mode 100644
index c11ab24163..0000000000
--- a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/fakespot.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12.0509 13.1711C11.8343 13.0263 11.6895 12.9544 11.4718 12.8096C10.6759 12.3033 9.9519 11.8689 9.15602 11.3627C8.64975 11.0731 8.57683 11.0731 8.36015 11.5793C8.18557 11.9429 7.96684 12.2828 7.70908 12.5919C7.49239 12.9534 7.56428 13.0982 7.92576 13.3159C9.30082 14.1118 10.6749 14.9076 11.978 15.7035C12.4124 15.9931 12.6291 15.9202 12.9187 15.5587C14.2219 13.894 15.524 12.1575 16.7543 10.4939L19.1419 7.23646C19.3586 7.01978 19.2867 6.80206 19.07 6.51247C18.3676 5.61801 17.5091 4.85911 16.5366 4.27068C12.5428 1.88101 7.38457 2.95107 4.67039 6.73121C1.70358 10.8554 2.78905 16.8609 7.13092 19.5391C10.2415 21.5509 14.2701 21.4358 17.2606 19.2495C20.2428 17.1268 21.6209 13.395 20.7347 9.84281C20.6628 9.40842 20.4451 8.97403 20.3003 8.46775C20.1709 8.5232 20.0487 8.59612 19.9388 8.68443L18.6367 10.422C18.5792 10.5072 18.5545 10.6099 18.5648 10.7116C18.5648 11.2179 18.6367 11.6523 18.6367 12.1585C18.5627 14.8347 16.7543 17.3671 14.2219 18.2349C11.4728 19.1756 8.57786 18.3797 6.84132 16.2817C4.72173 13.6558 4.90863 9.85822 7.27571 7.45314C9.73521 4.92175 13.4989 4.70404 16.3199 6.87498C16.5366 7.01978 16.6095 7.16457 16.3918 7.45417C15.8855 8.10524 15.3792 8.82923 14.8719 9.4803C13.9313 10.6377 13.0635 11.8679 12.0499 13.1701"
-    fill="currentColor" />
-</svg>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/qr.svg b/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/qr.svg
deleted file mode 100644
index dac357cd75..0000000000
--- a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/qr.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.5 3C4.11975 3 3 4.11975 3 5.5V9H4.75V5.5C4.75 5.08625 5.08625 4.75 5.5 4.75H9V3H5.5Z" fill="currentColor" />
-  <path
-    d="M11 10.25C11 10.664 10.664 11 10.25 11H7.75C7.336 11 7 10.664 7 10.25V7.75C7 7.336 7.336 7 7.75 7H10.25C10.664 7 11 7.336 11 7.75V10.25Z"
-    fill="currentColor" />
-  <path d="M17 15H15V13H17V11H15V9H17V7H15V9H13V11H15V13H13V15H11V13H9V15H7V17H9V15H11V17H13V15H15V17H17V15Z"
-    fill="currentColor" />
-  <path d="M3 18.5V15H4.75V18.5C4.75 18.9138 5.08625 19.25 5.5 19.25H9V21H5.5C4.11975 21 3 19.8802 3 18.5Z"
-    fill="currentColor" />
-  <path d="M15 3H18.5C19.8802 3 21 4.11975 21 5.5V9H19.25V5.5C19.25 5.08625 18.9138 4.75 18.5 4.75H15V3Z"
-    fill="currentColor" />
-  <path d="M21 18.5V15H19.25V18.5C19.25 18.9138 18.9138 19.25 18.5 19.25H15V21H18.5C19.8802 21 21 19.8802 21 18.5Z"
-    fill="currentColor" />
-</svg>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/sync.svg b/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/sync.svg
deleted file mode 100644
index 0acb1bb9a0..0000000000
--- a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/sync.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M0 4.75C0 3.36975 1.11975 2.25 2.5 2.25H10.5C11.8802 2.25 13 3.36975 13 4.75V9.25C13 10.6302 11.8802 11.75 10.5 11.75H2.5C1.11975 11.75 0 10.6302 0 9.25V4.75ZM2.5 4C2.08625 4 1.75 4.33625 1.75 4.75V9.25C1.75 9.66375 2.08625 10 2.5 10H10.25V4H2.5Z"
-    fill="currentColor" />
-  <path
-    d="M20.275 7.75H14.75V6H20.275C21.6552 6 22.775 7.11975 22.775 8.5V18.25C22.775 19.0676 22.3821 19.7938 21.7749 20.25H24V22H2V20.25H5.25014C4.64291 19.7938 4.25 19.0676 4.25 18.25V13.5H6V18.25C6 18.6637 6.33625 19 6.75 19H20.275C20.6888 19 21.025 18.6637 21.025 18.25V8.5C21.025 8.08625 20.6888 7.75 20.275 7.75Z"
-    fill="currentColor" />
-</svg>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/toolbar.svg b/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/toolbar.svg
deleted file mode 100644
index d591c6a63b..0000000000
--- a/bedrock/firefox/templates/firefox/whatsnew/includes/fx120/toolbar.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="301" height="48" viewBox="0 0 301 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<g class="background1" ><rect width="301" height="48" rx="3" fill="#9059FF"/></g>
-	<g id="private" class="toolbar-icon"><path d="M41.8965 20.2182C41.9565 19.0302 41.1525 17.9697 39.993 17.7072C37.119 17.0547 34.1085 17.8647 31.9515 19.8717L31.5825 20.2152C31.152 20.6157 30.585 20.8377 29.997 20.8377C29.409 20.8377 28.842 20.6142 28.4115 20.2137L28.05 19.8777C25.8915 17.8662 22.878 17.0547 20.0025 17.7087H20.001C18.843 17.9712 18.0405 19.0272 18.096 20.2122V20.2182C17.8005 21.3882 18.258 25.7082 18.516 26.3877C19.0365 29.1327 21.279 31.1967 23.9685 31.1967C25.311 31.1967 26.5275 30.6612 27.489 29.8032L28.0755 29.3022C29.157 28.3767 30.747 28.3647 31.8435 29.2722L32.721 29.9997V29.9952C33.6465 30.7407 34.7835 31.1967 36.0255 31.1967C38.7135 31.1967 40.9575 29.1327 41.478 26.3877C41.736 25.7082 42.21 21.4062 41.8965 20.2182ZM27.348 24.8277C26.7075 25.5522 25.716 26.0172 24.6 26.0172C23.484 26.0172 22.4925 25.5522 21.852 24.8292C21.516 24.4497 21.516 23.8527 21.852 23.4717C22.4925 22.7472 23.484 22.2822 24.6 22.2822C25.716 22.2822 26.7075 22.7472 27.348 23.4702C27.684 23.8512 27.684 24.4482 27.348 24.8277ZM38.148 24.8277C37.5075 25.5507 36.516 26.0157 35.4 26.0157C34.284 26.0157 33.2925 25.5507 32.652 24.8277C32.316 24.4482 32.316 23.8512 32.652 23.4702C33.2925 22.7472 34.284 22.2822 35.4 22.2822C36.516 22.2822 37.5075 22.7472 38.148 23.4702C38.484 23.8512 38.484 24.4482 38.148 24.8277Z" fill="white"/></g>
-	<g id="key" class="toolbar-icon"><path d="M89.0625 22.5H77.787C77.1165 19.9185 74.787 18 72 18C68.691 18 66 20.691 66 24C66 27.309 68.691 30 72 30C75.18 30 77.7645 27.507 77.9625 24.375H85.3125V27.75C85.3125 27.9986 85.4113 28.2371 85.5871 28.4129C85.7629 28.5887 86.0014 28.6875 86.25 28.6875C86.4986 28.6875 86.7371 28.5887 86.9129 28.4129C87.0887 28.2371 87.1875 27.9986 87.1875 27.75V24.375H89.0625C89.3111 24.375 89.5496 24.2762 89.7254 24.1004C89.9012 23.9246 90 23.6861 90 23.4375C90 23.1889 89.9012 22.9504 89.7254 22.7746C89.5496 22.5988 89.3111 22.5 89.0625 22.5ZM72 28.125C69.7245 28.125 67.875 26.2755 67.875 24C67.875 21.7245 69.7245 19.875 72 19.875C74.2755 19.875 76.125 21.7245 76.125 24C76.125 26.2755 74.2755 28.125 72 28.125Z" fill="white"/></g>
-	<g id="forget" class="toolbar-icon"><path d="M127 20V24L125 26" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-	<path d="M117 16V22H123" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-	<path d="M118 22C118 22 120 15 126.5 15C131.19 15 135 18.81 135 23.5C135 28.19 131.19 32 126.5 32C124.4 32 122.83 31.58 121 30" stroke="white" stroke-width="1.8" stroke-linecap="round"/></g>
-	<g id="addons" class="toolbar-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M174.5 15.75C173.533 15.75 172.75 16.5332 172.75 17.5V19.875C172.75 20.3582 172.358 20.75 171.875 20.75H168.5C168.086 20.75 167.75 21.0862 167.75 21.5V23H169.25C171.183 23 172.75 24.5668 172.75 26.5C172.75 28.4332 171.183 30 169.25 30H167.75V31.5C167.75 31.9138 168.086 32.25 168.5 32.25H180.5C180.914 32.25 181.25 31.9138 181.25 31.5V21.5C181.25 21.0862 180.914 20.75 180.5 20.75H177.125C176.642 20.75 176.25 20.3582 176.25 19.875V17.5C176.25 16.5332 175.467 15.75 174.5 15.75ZM171 17.5C171 15.5668 172.567 14 174.5 14C176.433 14 178 15.5668 178 17.5V19H180.5C181.88 19 183 20.1198 183 21.5V31.5C183 32.8802 181.88 34 180.5 34H168.5C167.12 34 166 32.8802 166 31.5V29.125C166 28.6418 166.392 28.25 166.875 28.25H169.25C170.217 28.25 171 27.4668 171 26.5C171 25.5332 170.217 24.75 169.25 24.75H166.875C166.392 24.75 166 24.3582 166 23.875V21.5C166 20.1198 167.12 19 168.5 19H171V17.5Z" fill="white"/></g>
-	<g id="print" class="toolbar-icon"><path d="M216 21V14H228V21" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-	<path d="M216 30H214C212.895 30 212 29.1046 212 28V23C212 21.8954 212.895 21 214 21H230C231.105 21 232 21.8954 232 23V28C232 29.1046 231.105 30 230 30H228" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-	<rect x="216" y="26" width="12" height="8" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></g>x
-	<path  fill-rule="evenodd" clip-rule="evenodd" d="M270.1 12.2746C270.276 12.4504 270.375 12.6889 270.375 12.9375V25.4205L275.337 20.4585C275.515 20.2899 275.751 20.1974 275.996 20.2005C276.241 20.2037 276.474 20.3024 276.648 20.4755C276.821 20.6486 276.919 20.8825 276.922 21.1273C276.926 21.3721 276.833 21.6085 276.665 21.786L269.949 28.5H268.928L262.211 21.786C262.042 21.6085 261.949 21.3721 261.953 21.1273C261.956 20.8825 262.054 20.6486 262.227 20.4755C262.401 20.3024 262.634 20.2037 262.879 20.2005C263.124 20.1974 263.36 20.2899 263.538 20.4585L268.5 25.422V12.9375C268.5 12.6889 268.599 12.4504 268.775 12.2746C268.95 12.0988 269.189 12 269.438 12C269.686 12 269.925 12.0988 270.1 12.2746ZM278.496 33.6213C277.934 34.1839 277.171 34.5 276.375 34.5H262.5C261.704 34.5 260.941 34.1839 260.379 33.6213C259.816 33.0587 259.5 32.2956 259.5 31.5V29.4375C259.5 29.1889 259.599 28.9504 259.775 28.7746C259.95 28.5988 260.189 28.5 260.438 28.5C260.686 28.5 260.925 28.5988 261.1 28.7746C261.276 28.9504 261.375 29.1889 261.375 29.4375V31.725L262.275 32.625H276.6L277.5 31.725V29.4375C277.5 29.1889 277.599 28.9504 277.775 28.7746C277.95 28.5988 278.189 28.5 278.438 28.5C278.686 28.5 278.925 28.5988 279.1 28.7746C279.276 28.9504 279.375 29.1889 279.375 29.4375V31.5C279.375 32.2956 279.059 33.0587 278.496 33.6213Z" fill="white"/>
-</svg>
diff --git a/media/css/firefox/welcome11.scss b/media/css/firefox/welcome11.scss
index 7628c8cddc..ff46faa213 100644
--- a/media/css/firefox/welcome11.scss
+++ b/media/css/firefox/welcome11.scss
@@ -117,20 +117,6 @@ $image-path: '/media/protocol/img';
         color: $color-violet-20;
     }
 
-    .mzp-c-picto-image {
-        .invert-stroke {
-            stroke: #fff;
-        }
-
-        .invert-fill {
-            fill: #fff;
-        }
-
-        .invert-card {
-            fill: #a77ffa;
-        }
-    }
-
     .c-utilities {
         @include white-links;
     }
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page10/laptop.svg b/media/img/firefox/welcome/page10/laptop.svg
similarity index 100%
rename from bedrock/firefox/templates/firefox/welcome/includes/page10/laptop.svg
rename to media/img/firefox/welcome/page10/laptop.svg
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page10/mobile.svg b/media/img/firefox/welcome/page10/mobile.svg
similarity index 100%
rename from bedrock/firefox/templates/firefox/welcome/includes/page10/mobile.svg
rename to media/img/firefox/welcome/page10/mobile.svg
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page11/cart.svg b/media/img/firefox/welcome/page11/cart.svg
similarity index 97%
rename from bedrock/firefox/templates/firefox/welcome/includes/page11/cart.svg
rename to media/img/firefox/welcome/page11/cart.svg
index 96440eb011..5e861e9feb 100644
--- a/bedrock/firefox/templates/firefox/welcome/includes/page11/cart.svg
+++ b/media/img/firefox/welcome/page11/cart.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 266 190" width="266" height="190">
+<svg xmlns="http://www.w3.org/2000/svg" style="color-scheme:light dark" viewBox="0 0 266 190" width="266" height="190">
+  <style>@media(prefers-color-scheme:dark){.invert-stroke{stroke:#fff}.invert-fill{fill:#fff}}</style>
   <path fill="#A77FFA" d="m127.58 102.18 59.28-15.4-.05-31.79-70.12 16.89 10.89 30.3z"/>
   <path fill="#C0C3F6" d="M48.16 68.25c3.25 0 6.42-.96 9.12-2.76 2.7-1.8 4.81-4.36 6.05-7.36 1.24-3 1.57-6.3.94-9.48-.63-3.18-2.19-6.11-4.49-8.41s-5.22-3.86-8.4-4.49c-3.18-.63-6.49-.31-9.48.93s-5.56 3.35-7.37 6.05c-1.8 2.7-2.76 5.87-2.76 9.12 0 4.35 1.73 8.52 4.8 11.59 3.07 3.08 7.24 4.81 11.59 4.81z"/>
   <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.51" d="m231.8 57.08-35.44 72.06h-75.03l-19.43 42.69" class="invert-stroke"/>
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page11/globe.svg b/media/img/firefox/welcome/page11/globe.svg
similarity index 98%
rename from bedrock/firefox/templates/firefox/welcome/includes/page11/globe.svg
rename to media/img/firefox/welcome/page11/globe.svg
index 9539cdc66d..a08faf44b9 100644
--- a/bedrock/firefox/templates/firefox/welcome/includes/page11/globe.svg
+++ b/media/img/firefox/welcome/page11/globe.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 190" width="269" height="190">
+<svg xmlns="http://www.w3.org/2000/svg" style="color-scheme:light dark" viewBox="0 0 269 190" width="269" height="190">
+<style>@media(prefers-color-scheme:dark){.invert-stroke{stroke:#fff}.invert-fill{fill:#fff}}</style>
 <path class="invert-fill" d="M177.99,187.8h61.2c0.1,0.01,0.2,0,0.3-0.03c0.1-0.03,0.18-0.08,0.26-0.14
 	c0.08-0.06,0.14-0.14,0.19-0.23c0.05-0.09,0.07-0.19,0.08-0.29c0.01-0.2-0.05-0.4-0.18-0.56s-0.32-0.25-0.52-0.27h-61.33
 	c-0.1,0.01-0.2,0.04-0.29,0.08c-0.09,0.05-0.17,0.11-0.23,0.19c-0.06,0.08-0.11,0.17-0.14,0.26c-0.03,0.1-0.04,0.2-0.03,0.3
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page11/lock.svg b/media/img/firefox/welcome/page11/lock.svg
similarity index 96%
rename from bedrock/firefox/templates/firefox/welcome/includes/page11/lock.svg
rename to media/img/firefox/welcome/page11/lock.svg
index 9060045e37..d1ed2bebbc 100644
--- a/bedrock/firefox/templates/firefox/welcome/includes/page11/lock.svg
+++ b/media/img/firefox/welcome/page11/lock.svg
@@ -1,6 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 254 190" width="254" height="190">
+<svg xmlns="http://www.w3.org/2000/svg" style="color-scheme:light dark" viewBox="0 0 254 190" width="254" height="190">
   <style>
     .st0{fill:none;stroke:#000;stroke-width:1.51;stroke-miterlimit:10}.st1{fill:#6a52de}.st2,.st5{stroke:#000;stroke-width:1.51}.st2{fill:#fff;stroke-miterlimit:10}.st5{fill:none;stroke-linecap:round;stroke-linejoin:round}
+    @media(prefers-color-scheme:dark){.invert-stroke{stroke:#fff}.invert-fill{fill:#fff}.invert-card{fill:#a77ffa}}
   </style>
   <path d="M140.77 104.92c5.14-2 11.28-.08 16.81-.66 7.25-.77 14.29-2.89 20.76-6.26 4.89-2.56 9.4-5.81 14.37-8.22 3.85-1.86 7.93-3.21 12.14-4 6.94-1.29 15-.66 19.76 4.55 8.3 9.09.05 26.41-4.1 36" class="invert-stroke st0"/>
   <path d="M26.67 65.26c5.75-4.6 16.34-4.6 24.45.02 18.91 10.85 15.27 37.74 36.7 45.89 7.75 2.94 15.55.73 21.13-3 5.58-3.73 9.75-8.78 15.5-12.28s14-5.18 21.52-1.59" class="invert-stroke st0"/>
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page9/illo-vpn-lock.svg b/media/img/firefox/welcome/page9/illo-vpn-lock.svg
similarity index 100%
rename from bedrock/firefox/templates/firefox/welcome/includes/page9/illo-vpn-lock.svg
rename to media/img/firefox/welcome/page9/illo-vpn-lock.svg
diff --git a/bedrock/firefox/templates/firefox/welcome/includes/page9/illo-vpn-speed.svg b/media/img/firefox/welcome/page9/illo-vpn-speed.svg
similarity index 100%
rename from bedrock/firefox/templates/firefox/welcome/includes/page9/illo-vpn-speed.svg
rename to media/img/firefox/welcome/page9/illo-vpn-speed.svg