diff --git a/templates/web/base/alert/_updates.html b/templates/web/base/alert/_updates.html
index b237b1bff1b..f2dce1b4c1a 100644
--- a/templates/web/base/alert/_updates.html
+++ b/templates/web/base/alert/_updates.html
@@ -1,16 +1,17 @@
 <form action="[% c.uri_for( '/alert/subscribe' ) %]" method="post">
-
     <p><a href="[% c.uri_for( '/rss', problem.id ) %]">
         <img src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% loc('RSS feed of updates to this problem' ) %]" border="0" style="float:right">
     </a>
 
     [% IF NOT c.user_exists OR c.user.alert_updates_by(c.cobrand) != 'phone' %]
-        [% loc('Receive email when updates are left on this problem.') %]
+        <span id="report-updates-data-title">[% loc('Receive email when updates are left on this problem.') %]</span>
     [% ELSE %]
-        [% loc('Receive a text when updates are left on this problem.') %]
-    [% END %]
+        <span id="report-updates-data-title">[% loc('Receive a text when updates are left on this problem.') %]
+          [% END %]</span>
     </p>
 
+    <button type="button" class="close-drawer screen-reader-only" aria-label="Close this dialog"></button>
+
     [% PROCESS 'auth/form_extra.html' %]
 
   [% IF c.user_exists %]
diff --git a/templates/web/base/around/_skip-key-tools.html b/templates/web/base/around/_skip-key-tools.html
new file mode 100644
index 00000000000..fc2783a3a81
--- /dev/null
+++ b/templates/web/base/around/_skip-key-tools.html
@@ -0,0 +1 @@
+<a href="#report-list-filters" class="skiplink" aria-label="Skip report tools and jump to reports list">Skip report tools</a>
diff --git a/templates/web/base/around/_updates.html b/templates/web/base/around/_updates.html
index e5af69da08a..520d2904f82 100755
--- a/templates/web/base/around/_updates.html
+++ b/templates/web/base/around/_updates.html
@@ -1,5 +1,10 @@
+[% INCLUDE 'around/_skip-key-tools.html' %]
 <div class="shadow-wrap">
     <ul id="key-tools">
-        <li><a class="feed js-feed" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]</a></li>
+        <li>
+            <a class="feed js-feed has-inline-svg" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]
+                <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+            </a>
+        </li>
     </ul>
 </div>
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 5a2f9e0903a..84840ad1446 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -80,7 +80,10 @@
 
       [% IF allow_creation %]
         <div style="display:none" id="side-form">
-            <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+            <a href="#" class="js-back has-inline-svg problem-back problem-back--top">
+                <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+                [% loc('Back') %]
+            </a>
         [% INCLUDE "report/new/fill_in_details_form.html"
             js = 1,
             report.used_map = 1
diff --git a/templates/web/base/report/_back_to_all.html b/templates/web/base/report/_back_to_all.html
index dc386052a5b..b4bd7a92266 100644
--- a/templates/web/base/report/_back_to_all.html
+++ b/templates/web/base/report/_back_to_all.html
@@ -1,2 +1,5 @@
 <a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
-    class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
+    class="has-inline-svg has-inline-svg--left-align problem-back js-back-to-report-list">
+    <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+    [% loc('Back to all reports') %]
+</a>
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index ead7f832d76..1c0913aff97 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -45,18 +45,19 @@
 [% END %]
 
 [% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %]
-[% INCLUDE 'report/display_tools.html' %]
-[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
-[% INCLUDE 'report/updates.html' %]
+[% INCLUDE 'report/display_tools_mobile.html' %]
 
 [% IF problem.duplicate_of %]
-    [% INCLUDE 'report/duplicate-no-updates.html' %]
+[% INCLUDE 'report/duplicate-no-updates.html' %]
 [% ELSIF problem.cobrand_data == 'noise' %]
-    <p>[% loc('This report is now closed to updates from the public.') %]</p>
+<p>[% loc('This report is now closed to updates from the public.') %]</p>
 [% ELSIF NOT shown_form  %]
-    [% PROCESS 'report/update-form-wrapper.html' %]
+[% PROCESS 'report/update-form-wrapper.html' %]
 [% END %]
 
+[% INCLUDE 'report/display_tools.html' %]
+[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
+[% INCLUDE 'report/updates.html' %]
   </div>
 
   [% second_column | safe %]
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
index 84a889437e1..346f249a514 100644
--- a/templates/web/base/report/display_tools.html
+++ b/templates/web/base/report/display_tools.html
@@ -1,44 +1,61 @@
 <div class="shadow-wrap">
-    <ul id="key-tools">
+    <ul id="key-tools" class="js-key-tools">
       [% IF c.user_exists OR NOT problem.non_public %]
         [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
         <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
             <input type="hidden" name="token" value="[% csrf_token %]">
-            <button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
+            <button type="submit" id="key-tool-report-abuse" class="has-inline-svg" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+              [% loc('Remove from site') %]
+              <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
+            </button>
         </form></li>
         [% ELSIF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
-            c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse')
-        %]</a></li>
+        <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
+          [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] 
+          <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg></a></li>
         [% END %]
         [% IF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-updates" class="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %]</a></li>
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-updates" aria-expanded="false" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
+          [% loc('Get updates' ) %]
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+        </a></li>
         [% END %]
         [% IF c.cobrand.moniker == 'fixmystreet' %]
-        <li><a rel="nofollow" id="key-tool-report-share" class="share" href="#report-share">[% loc('Share') %]</a></li>
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-share" href="#report-share" aria-expanded="false">
+          [% loc('Share') %]
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
+        </a></li>
         [% END %]
       [% END %]
       [% IF c.cobrand.moniker == 'zurich' %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          [% loc( 'Problems on the map' ) %]
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        </a></li>
       [% ELSE %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          [% loc( 'Problems nearby' ) %]
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        </a></li>
       [% END %]
     </ul>
 
 [% IF c.cobrand.moniker == 'fixmystreet' %]
-    <div id="report-share" class="hidden-js" align="center">
-        <a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
-            <img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
-            Tweet
-        </a>
-        <a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
-            <img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
-            Share
-        </a>
+    <div id="report-share" class="hidden-js" align="center" role="dialog" aria-modal="true" aria-labelledby="report-share-title">
+      <p id="report-share-title" class="screen-reader-only">Share this report on Twitter or Facebook</p>
+      <a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
+        <img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
+        Tweet
+      </a>
+      <a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
+        <img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
+        Share
+      </a>
+      <button class="close-drawer screen-reader-only" aria-label="Close this dialog"></button>
     </div>
 [% END %]
 
-<div id="report-updates-data" class="hidden-js">
+<div id="report-updates-data" class="hidden-js" role="dialog" aria-modal="true" aria-labelledby="report-updates-data-title">
     [% INCLUDE 'alert/_updates.html' %]
 </div>
 
diff --git a/templates/web/base/report/display_tools_mobile.html b/templates/web/base/report/display_tools_mobile.html
new file mode 100644
index 00000000000..08ca5b4757c
--- /dev/null
+++ b/templates/web/base/report/display_tools_mobile.html
@@ -0,0 +1,43 @@
+<div class="shadow-wrap">
+  <ul id="key-tools-mobile" class="js-key-tools">
+    [% IF c.user_exists OR NOT problem.non_public %]
+      [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
+      <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
+          <input type="hidden" name="token" value="[% csrf_token %]">
+          <button type="submit" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+            <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
+            [% loc('Remove from site') %]
+          </button>
+      </form></li>
+      [% ELSIF c.cobrand.moniker != 'zurich' %]
+      <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
+        <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
+        [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] 
+      </a></li>
+      [% END %]
+      [% IF c.cobrand.moniker != 'zurich' %]
+      <li><a rel="nofollow" class="js-key-tool-report-updates has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]" aria-expanded="false">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+        [% loc('Get updates' ) %]
+      </a></li>
+      [% END %]
+      [% IF c.cobrand.moniker == 'fixmystreet' %]
+      <li><a rel="nofollow" class="js-key-tool-report-share has-inline-svg has-inline-svg--column-wrap" href="#report-share" aria-expanded="false">
+        <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
+        [% loc('Share') %]
+      </a></li>
+      [% END %]
+    [% END %]
+    [% IF c.cobrand.moniker == 'zurich' %]
+      <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+        <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        [% loc( 'Problems on the map' ) %]
+      </a></li>
+    [% ELSE %]
+      <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+        <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        [% loc( 'Problems nearby' ) %]
+      </a></li>
+    [% END %]
+  </ul>
+</div>
diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html
index 7a9a2e3f152..85667828daf 100644
--- a/templates/web/base/report/new/fill_in_details.html
+++ b/templates/web/base/report/new/fill_in_details.html
@@ -42,7 +42,10 @@
   [% END %]
 
             <div id="report-a-problem-main">
-                <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+                <a href="#" class="js-back has-inline-svg problem-back problem-back--top">
+                  <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+                  [% loc('Back') %]
+                </a>
               [% IF login_success %]
                 [% PROCESS 'report/new/login_success_form.html' %]
               [% ELSIF oauth_need_email %]
diff --git a/templates/web/base/reports/_list-filters.html b/templates/web/base/reports/_list-filters.html
index f11ce2de872..7d2d14ad197 100644
--- a/templates/web/base/reports/_list-filters.html
+++ b/templates/web/base/reports/_list-filters.html
@@ -27,7 +27,7 @@
   [% END %]
 [% END %]
 
-<div class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
+<div id="report-list-filters" class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
 
 [% IF use_form_wrapper %]
     <form method="get" action="">
diff --git a/templates/web/base/reports/_rss.html b/templates/web/base/reports/_rss.html
index 731eef90c6e..fa177de1502 100644
--- a/templates/web/base/reports/_rss.html
+++ b/templates/web/base/reports/_rss.html
@@ -1,7 +1,7 @@
 <div id="key-tools-wrapper" class="shadow-wrap">
     <ul id="key-tools">
-        <li class="feed-list-wrapper"><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[%
-            SET monikers = ['bromley','hounslow'];
+        <li class="feed-list-wrappe"><a rel="nofollow" id="key-tool-updates-area" class="feed has-inline-svg" href="[% rss_url %]">
+            [% SET monikers = ['bromley','hounslow'];
             IF monikers.grep(c.cobrand.moniker).size AND thing == 'council';
                 'Get updates of reports in ' _ c.cobrand.moniker.ucfirst;
             ELSIF c.cobrand.moniker == 'isleofwight';
@@ -12,13 +12,17 @@
                 tprintf(loc('Get updates of %s problems'), thing);
             ELSE;
                 tprintf(loc('Get updates of problems in this %s'), thing);
-            END
-        %]</a></li>
+            END %]
+            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+        </a></li>
         [% IF children.size %]
             [% TRY %]
                 [% INCLUDE 'reports/_rss_other_districts.html' %]
             [% CATCH %]
-                <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% ward_text %]</a></li>
+                <li><a href="#council_wards" id="key-tool-wards" class="has-inline-svg">
+                    [% ward_text %]
+                    <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+                </a></li>
             [% END %]
         [% END %]
     </ul>
diff --git a/templates/web/oxfordshire/reports/_rss_other_districts.html b/templates/web/oxfordshire/reports/_rss_other_districts.html
index ec31f98f677..f6340bc0170 100644
--- a/templates/web/oxfordshire/reports/_rss_other_districts.html
+++ b/templates/web/oxfordshire/reports/_rss_other_districts.html
@@ -1,5 +1,5 @@
-<li class="area-report"><a href="#council_wards" id="key-tool-area" class="chevron">View area reports</a></li>
-<li class="sub-area-item"><a href="#council_wards" id="key-tool-division" class="chevron">By division</a></li>
-<li class="sub-area-item"><a href="#council_parishes" id="key-tool-parish" class="chevron">By parish</a></li>
-<li class="sub-area-item"><a href="#council_district_wards" id="key-tool-ward" class="chevron">By ward</a></li>
-<li class="sub-area-item"><a href="#council_districts" id="key-tool-district" class="chevron">By district</a></li>
+<li class="area-report"><a href="#council_wards" id="key-tool-area" class="has-inline-svg">View area reports<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg></a></li>
+<li class="sub-area-item"><a href="#council_wards" id="key-tool-division" class="has-inline-svg">By division <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg></a></li>
+<li class="sub-area-item"><a href="#council_parishes" id="key-tool-parish" class="has-inline-svg">By parish <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg></a></li>
+<li class="sub-area-item"><a href="#council_district_wards" id="key-tool-ward" class="has-inline-svg">By ward</a> <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg></li>
+<li class="sub-area-item"><a href="#council_districts" id="key-tool-district" class="has-inline-svg">By district <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg></a></li>
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index f9770bc24bf..d9f5b519b36 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -135,10 +135,6 @@ a:active {
 #key-tools {
   a, button {
     background-color: darken(#f5f5f5, 10%);
-
-    &:after {
-      background-image: url("/cobrands/bromley/images/report-tools.svg");
-    }
   }
 }
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index d2a29c68a64..cc79d48ea8e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -20,28 +20,58 @@ function isR2L() {
     // A sliding drawer from the bottom of the page, small version
     // that doesn't change the main content at all.
     small_drawer: function(id) {
-        var $this = $(this), d = $('#' + id);
+        var $this = $(this), d = $('#' + id),
+            keyboardTriggered = false,
+            previousFocus;
+
+        this.on('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                keyboardTriggered = true;
+            }
+        });
+
         this.on('click', function(e) {
             e.preventDefault();
+            previousFocus = $(document.activeElement);
             if (!$this.hasClass('hover')) {
                 if (opened) {
                     opened.trigger('click');
                 }
                 if (!$this.addClass('hover').data('setup')) {
                     d.hide().removeClass('hidden-js').css({
-                    padding: '1em',
-                    background: '#fff'
+                        padding: '1em',
+                        background: '#fff',
                     });
                     $this.data('setup', true);
                 }
-                d.slideDown();
+                d.slideDown(function() {
+                    $this.attr('aria-expanded', 'true');
+                    // We want to focus on first focusable element inside the drawer, but only if the user has use the keyboard. It is a bit odd having this behaviour when using the mouse.
+                    if (keyboardTriggered) {
+                        d.find('a, button, input, select, textarea').first().focus();
+                        keyboardTriggered = false;
+                    }
+                });
                 opened = $this;
             } else {
                 $this.removeClass('hover');
-                d.slideUp();
+                d.slideUp(function() {
+                    $this.attr('aria-expanded', 'false');
+                });
                 opened = null;
             }
         });
+
+        d.on('click', '.close-drawer', function() {
+            $this.removeClass('hover');
+            d.slideUp(function() {
+                $this.attr('aria-expanded', 'false');
+                if (previousFocus) {
+                    previousFocus.focus();
+                }
+            });
+            opened = null;
+        });
     },
 
     // A sliding drawer from the bottom of the page, large version
@@ -98,7 +128,7 @@ function isR2L() {
 
                 // Insert the .shadow-wrap controls into the top of the drawer.
                 $sw.addClass('static').prependTo($drawer);
-                $('#key-tools').addClass('area-js');
+                $('.js-key-tools').addClass('area-js');
                 $('#key-tool-wards').addClass('hover');
 
                 // Animate the drawer into place, enitrely covering the sidebar.
@@ -1293,12 +1323,11 @@ $.extend(fixmystreet.set_up, {
 
     if ($('.mobile').length) {
         // Make sure we end up with one Get updates link
-        if ($('#key-tools a.js-feed').length) {
+        if ($('#key-tools-mobile a.js-feed').length) {
             $('#sub_map_links a.js-feed').remove();
-            $('#key-tools a.js-feed').appendTo('#sub_map_links');
+            $('#key-tools-mobile a.js-feed').appendTo('#sub_map_links');
         }
-        $('#key-tools li:empty').remove();
-        $('#report-updates-data').insertAfter($('#map_box'));
+        $('#key-tools-mobile li:empty').remove();
         if (fixmystreet.page !== 'around' && fixmystreet.page !== 'new' && !$('#toggle-fullscreen').length) {
             $('#sub_map_links').append('<a href="#" id="toggle-fullscreen" data-expand-text="'+ translation_strings.expand_map +'" data-compress-text="'+ translation_strings.collapse_map +'" >'+ translation_strings.expand_map +'</span>');
         }
@@ -1362,8 +1391,12 @@ $.extend(fixmystreet.set_up, {
         $('#key-tool-wards').drawer('council_wards', false);
         $('#key-tool-around-updates').drawer('updates_ajax', true);
     }
-    $('#key-tool-report-updates').small_drawer('report-updates-data');
-    $('#key-tool-report-share').small_drawer('report-share');
+    $('.js-key-tool-report-updates').each(function() {
+        $(this).small_drawer('report-updates-data');
+    });
+    $('.js-key-tool-report-share').each(function() {
+        $(this).small_drawer('report-share');
+    });
   },
 
   ward_select_multiple: function() {
diff --git a/web/cobrands/fixmystreet/images/inline-svg-list.html b/web/cobrands/fixmystreet/images/inline-svg-list.html
new file mode 100644
index 00000000000..f0077a35b6a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/inline-svg-list.html
@@ -0,0 +1,30 @@
+<!-- LIST FOR INLINE SVGs ICONS -->
+
+<!-- USAGE:
+    Add the class .has-inline-svg to the parent element
+    <a class="has-inline-svg js-key-tool-report-updates" href="#">
+          [% loc('Get updates' ) %]
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+        </a>
+-->
+
+<!-- Alert -->
+<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
+
+<!-- Share -->
+<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
+
+<!-- RSS -->
+<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
+
+<!-- Chevron Right -->
+<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+
+<!-- Chevron Down -->
+<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M16 6.5V0L8 6.5L0 0V6.5L8 13L16 6.5Z" fill="currentColor"/></svg>
+
+<!-- Chevron Up -->
+<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M0 6.5V13L8 6.5L16 13V6.5L8 0L0 6.5Z" fill="currentColor"/></svg>
+
+<!-- Chevron Left -->
+<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 216aabf25c9..64e32650616 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -323,7 +323,6 @@ textarea {
 
     a,
     button {
-      display: block;
       background-color: #f5f5f5;
       background-repeat: no-repeat;
       color: #333 !important;
@@ -342,34 +341,6 @@ textarea {
         background-color: #333;
         color: #fff !important;
       }
-
-      &:after {
-        content: "";
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        margin-#{$left}: 0.5em;
-        vertical-align: -0.25em;
-        background-size: 112px 16px;
-        background-repeat: no-repeat;
-        background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-      }
-
-      &.abuse:after {
-        background-position: -96px 0;
-      }
-
-      &.feed:after {
-        background-position: -64px 0;
-      }
-
-      &.share:after {
-        background-position: -80px 0;
-      }
-
-      &.chevron:after {
-        background-position: flip(-16px 0, 0 0);
-      }
     }
 
     .sub-area-item {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index c3472b07341..277fa6643be 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -933,21 +933,17 @@ html.mobile.js-nav-open #js-menu-open-modal {
   margin: 0 -1em;
 }
 
-#key-tools {
+#key-tools, #key-tools-mobile {
   @include list-reset-soft;
   margin-bottom: 1em;
-  display: table;
+  display: flex;
+  flex-direction: row;
   width: 100%;
+  gap: 0.25rem;
+  box-sizing: border-box;
 
   li {
-    display: table-cell;
-    vertical-align: bottom;
     text-align: center;
-    border-#{$right}: 0.25em solid #fff;
-
-    &:last-child {
-      border-#{$right}: none;
-    }
 
     &.hidden-js {
       display: none;
@@ -962,17 +958,17 @@ html.mobile.js-nav-open #js-menu-open-modal {
 
   a,
   button {
-    display: block;
+    box-sizing: border-box;
+    height: 100%;
     background-color: #f5f5f5;
-    background-repeat: no-repeat;
     color: #333 !important;
-    padding: 1em;
+    padding: 1em 0.5em;
     font-size: 0.6875em;
     font-family: $meta-font;
     font-weight: normal;
     line-height: 1.2em;
-    white-space: normal;
-    border-radius: 0;
+    // Prevents elements with more than two words to break into multiple lines
+    white-space: nowrap;
 
     &:hover,
     &.hover,
@@ -982,34 +978,6 @@ html.mobile.js-nav-open #js-menu-open-modal {
       color: #fff !important;
     }
 
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      margin-#{$left}: 0.5em;
-      vertical-align: -0.25em;
-      background-size: 112px 16px;
-      background-repeat: no-repeat;
-      background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    }
-
-    &.abuse:after {
-      background-position: -96px 0;
-    }
-
-    &.feed:after {
-      background-position: -64px 0;
-    }
-
-    &.share:after {
-      background-position: -80px 0;
-    }
-
-    &.chevron:after {
-      background-position: flip(-16px 0, 0 0);
-    }
-
     &.offline:after {
       background-size: 16px 16px;
       background-position: 0 0;
@@ -1032,7 +1000,26 @@ html.mobile.js-nav-open #js-menu-open-modal {
   }
 }
 
+#key-tools-mobile {
+  padding: 0 1em;
+  li {
+    flex: 1;
+
+    a, button {
+      border-radius:4px;
+      border: 1px solid #ccc;
+    }
+  }
+}
+
+#key-tools {
+  html.js & {
+    display: none;
+  }
+}
+
 #report-updates-data {
+  box-sizing: border-box;
   img {
     float: $right;
   }
@@ -1044,6 +1031,7 @@ html.mobile.js-nav-open #js-menu-open-modal {
 }
 
 #report-share {
+  box-sizing: border-box;
   .btn {
     padding-#{$left}: 1.5em;
     padding-#{$right}: 1.5em;
@@ -1055,6 +1043,22 @@ html.mobile.js-nav-open #js-menu-open-modal {
   }
 }
 
+.has-inline-svg {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+
+  &.has-inline-svg--left-align {
+    justify-content: left;
+  }
+
+  &.has-inline-svg--column-wrap {
+    flex-direction: column;
+  }
+}
+
 //footer blocks
 footer {
   margin-top: 1em;
@@ -1778,7 +1782,6 @@ input.final-submit {
 }
 
 .problem-back {
-  display: block;
   font-size: 1em;
   line-height: 1.2em;
   margin: -1em -1em 1em -1em;
@@ -1790,19 +1793,6 @@ input.final-submit {
   &:hover {
     color: #666;
   }
-
-  &:before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-#{$right}: 0.5em;
-    vertical-align: -0.15em;
-    background-size: 112px 16px;
-    background-repeat: no-repeat;
-    background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    background-position: flip(0 0, -16px 0);
-  }
 }
 .problem-back--top {
     margin-top: 0;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index a1cef8ebc9a..b6e2059bebb 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -683,7 +683,12 @@ body.authpage {
   margin: 0;
   box-shadow: 0 0 1em 1em #fff;
 
+  html.js & {
+    display: table;
+  }
+
   li {
+    display: table-cell;
     border-#{$right}: none; // undo border-right/left from _base.scss
 
     // Cancel centre alignment, if the *only child* in list.
@@ -701,6 +706,10 @@ body.authpage {
   }
 }
 
+#key-tools-mobile {
+  display: none;
+}
+
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;