From 0d6c3a10c6e9c8be7f05a3a3de1d45cd80ea7f3c Mon Sep 17 00:00:00 2001
From: Philip Abbey <philipabbey@users.noreply.github.com>
Date: Tue, 11 Nov 2025 19:57:51 +0000
Subject: [PATCH] Changed icons SVG

Changed the way colours were managed in the SVG files to make them more amenable to scripting. Changed the scripts to automate icon resizing.

Co-Authored-By: Joseph Abbey <me@josephabbey.dev>
---
 iconResize.cmd                        | 23 ++++++++
 iconResize.py                         | 76 ++++++++++++---------------
 launcherIconResize.py                 |  2 +-
 resources-icons-18-w/error.svg        |  8 ++-
 resources-icons-18-w/group_type.svg   |  7 ++-
 resources-icons-18-w/info_type.svg    |  8 ++-
 resources-icons-18-w/numeric_type.svg |  9 ++--
 resources-icons-18-w/tap_type.svg     |  7 ++-
 resources-icons-18/error.svg          |  8 ++-
 resources-icons-18/group_type.svg     |  7 ++-
 resources-icons-18/info_type.svg      |  8 ++-
 resources-icons-18/numeric_type.svg   |  9 ++--
 resources-icons-18/tap_type.svg       |  7 ++-
 resources-icons-21-w/error.svg        |  8 ++-
 resources-icons-21-w/group_type.svg   |  7 ++-
 resources-icons-21-w/info_type.svg    |  8 ++-
 resources-icons-21-w/numeric_type.svg |  9 ++--
 resources-icons-21-w/tap_type.svg     |  7 ++-
 resources-icons-21/error.svg          |  8 ++-
 resources-icons-21/group_type.svg     |  7 ++-
 resources-icons-21/info_type.svg      |  8 ++-
 resources-icons-21/numeric_type.svg   |  9 ++--
 resources-icons-21/tap_type.svg       |  7 ++-
 resources-icons-24/error.svg          |  8 ++-
 resources-icons-24/group_type.svg     |  7 ++-
 resources-icons-24/info_type.svg      |  8 ++-
 resources-icons-24/numeric_type.svg   |  9 ++--
 resources-icons-24/tap_type.svg       |  7 ++-
 resources-icons-26/error.svg          |  8 ++-
 resources-icons-26/group_type.svg     |  7 ++-
 resources-icons-26/info_type.svg      |  8 ++-
 resources-icons-26/numeric_type.svg   |  9 ++--
 resources-icons-26/tap_type.svg       |  7 ++-
 resources-icons-28/error.svg          |  8 ++-
 resources-icons-28/group_type.svg     |  7 ++-
 resources-icons-28/info_type.svg      |  8 ++-
 resources-icons-28/numeric_type.svg   |  9 ++--
 resources-icons-28/tap_type.svg       |  7 ++-
 resources-icons-30/error.svg          |  8 ++-
 resources-icons-30/group_type.svg     |  7 ++-
 resources-icons-30/info_type.svg      |  8 ++-
 resources-icons-30/numeric_type.svg   |  9 ++--
 resources-icons-30/tap_type.svg       |  7 ++-
 resources-icons-32/error.svg          |  8 ++-
 resources-icons-32/group_type.svg     |  7 ++-
 resources-icons-32/info_type.svg      |  8 ++-
 resources-icons-32/numeric_type.svg   |  9 ++--
 resources-icons-32/tap_type.svg       |  7 ++-
 resources-icons-34/error.svg          |  8 ++-
 resources-icons-34/group_type.svg     |  7 ++-
 resources-icons-34/info_type.svg      |  8 ++-
 resources-icons-34/numeric_type.svg   |  9 ++--
 resources-icons-34/tap_type.svg       |  7 ++-
 resources-icons-38/error.svg          |  8 ++-
 resources-icons-38/group_type.svg     |  7 ++-
 resources-icons-38/info_type.svg      |  8 ++-
 resources-icons-38/numeric_type.svg   |  9 ++--
 resources-icons-38/tap_type.svg       |  7 ++-
 resources-icons-42/error.svg          |  8 ++-
 resources-icons-42/group_type.svg     |  7 ++-
 resources-icons-42/info_type.svg      |  8 ++-
 resources-icons-42/numeric_type.svg   |  9 ++--
 resources-icons-42/tap_type.svg       |  7 ++-
 resources-icons-46/error.svg          |  8 ++-
 resources-icons-46/group_type.svg     |  7 ++-
 resources-icons-46/info_type.svg      |  8 ++-
 resources-icons-46/numeric_type.svg   |  9 ++--
 resources-icons-46/tap_type.svg       |  7 ++-
 resources-icons-48/error.svg          |  8 ++-
 resources-icons-48/group_type.svg     |  7 ++-
 resources-icons-48/info_type.svg      |  8 ++-
 resources-icons-48/numeric_type.svg   |  9 ++--
 resources-icons-48/tap_type.svg       |  7 ++-
 resources-icons-53/error.svg          |  8 ++-
 resources-icons-53/group_type.svg     |  7 ++-
 resources-icons-53/info_type.svg      |  8 ++-
 resources-icons-53/numeric_type.svg   |  9 ++--
 resources-icons-53/tap_type.svg       |  7 ++-
 resources-icons-55/error.svg          |  8 ++-
 resources-icons-55/group_type.svg     |  7 ++-
 resources-icons-55/info_type.svg      |  8 ++-
 resources-icons-55/numeric_type.svg   |  9 ++--
 resources-icons-55/tap_type.svg       |  7 ++-
 resources-launcher-68-68/launcher.svg |  4 +-
 translate.cmd                         |  4 --
 85 files changed, 507 insertions(+), 226 deletions(-)
 create mode 100644 iconResize.cmd

diff --git a/iconResize.cmd b/iconResize.cmd
new file mode 100644
index 0000000..4ba803f
--- /dev/null
+++ b/iconResize.cmd
@@ -0,0 +1,23 @@
+@echo off
+rem -----------------------------------------------------------------------------------
+rem
+rem  Distributed under MIT Licence
+rem    See https://github.com/house-of-abbey/GarminHomeAssistant/blob/main/LICENSE.
+rem
+rem -----------------------------------------------------------------------------------
+rem
+rem  GarminHomeAssistant is a Garmin IQ application written in Monkey C and routinely
+rem  tested on a Venu 2 device. The source code is provided at:
+rem             https://github.com/house-of-abbey/GarminHomeAssistant.
+rem
+rem  J D Abbey & P A Abbey, 11 November 2025
+rem
+rem  Run the icon generation Python scripts
+rem
+rem -----------------------------------------------------------------------------------
+
+REM change the current directory to the batch file's location
+cd /d %~dp0
+python iconResize.py
+python launcherIconResize.py
+pause
diff --git a/iconResize.py b/iconResize.py
index 44e1f85..41cdb11 100644
--- a/iconResize.py
+++ b/iconResize.py
@@ -30,44 +30,32 @@
 #
 ####################################################################################
 
-from bs4 import BeautifulSoup, Comment
+from bs4 import BeautifulSoup
 import os
 import shutil
 
 output_dir_prefix = 'resources-icons-'
 input_dir         = output_dir_prefix + '48'
 
-Doub = 0
-Sing = 1
-Half = 2
-
-# Original icons for 416x416 screen size with 48x48 icons
-original = (96, 48, 24)
-
-# The icons need to scale as a ratio of screen size 48:416 pixels
-#
-# Icon     55  53   48   46   42   37   32   30   28   26   24   21   19  18
-# Screen  480 454  416  390  360  320  280  260  240  218  208  176  166 156
-
 # Convert icons to different screen sizes by these parameters
-lookup = {
-  #   Doub Sing Half
-  #      0   1   2
-  480: (110, 55, 28),
-  454: (106, 53, 27),
-#  416: ( 96, 48, 24),
-  390: ( 90, 46, 23),
-  360: ( 84, 42, 21),
-  320: ( 74, 38, 19),
-  295: ( 68, 34, 17), # Especially for the instinct3amoled50mm device that clip the icons
-  280: ( 64, 32, 16),
-  260: ( 60, 30, 15),
-  240: ( 56, 28, 14),
-  218: ( 50, 26, 13),
-  208: ( 48, 24, 12),
-  176: ( 42, 21, 11),
-  156: ( 36, 18,  9)
-}
+lookup = [
+  55,
+  53,
+#  48,
+  46,
+  42,
+  38,
+  34, # Especially for the instinct3amoled50mm device that clip the icons
+  32,
+  30,
+  28,
+  26,
+  24,
+  "21-w",
+  21,
+  "18-w",
+  18
+]
 
 # Delete all but the original 48x48 icon directories
 for entry in os.listdir("."):
@@ -75,8 +63,12 @@ for entry in os.listdir("."):
     shutil.rmtree(entry)
 
 # (Re-)Create the resized icon directories
-for screen_size, icon_sizes in lookup.items():
-  output_dir = output_dir_prefix + str(icon_sizes[Sing])
+for icon_size in lookup:
+  output_dir = output_dir_prefix + str(icon_size)
+  white = False
+  if isinstance(icon_size, str):
+    white = True
+    icon_size = int(icon_size.split("-")[0])
   print("\nCreate directory:", output_dir)
   if os.path.exists(output_dir) and os.path.isdir(output_dir):
     shutil.rmtree(output_dir)
@@ -87,16 +79,14 @@ for screen_size, icon_sizes in lookup.items():
       with open(input_dir + "/" + entry, "r") as f:
         soup = BeautifulSoup(f.read(), features="xml")
         svg: BeautifulSoup = list(soup.children)[0]
-        h = int(svg.attrs["height"])
-        if (h == original[Doub]):
-          svg.attrs["width"]  = lookup[screen_size][Doub]
-          svg.attrs["height"] = lookup[screen_size][Doub]
-        elif (h == original[Sing]):
-          svg.attrs["width"]  = lookup[screen_size][Sing]
-          svg.attrs["height"] = lookup[screen_size][Sing]
-        elif (h == original[Half]):
-          svg.attrs["width"]  = lookup[screen_size][Half]
-          svg.attrs["height"] = lookup[screen_size][Half]
+        svg.attrs["width"]  = icon_size
+        svg.attrs["height"] = icon_size
+        if white:
+          # Add white colour style
+          svg.find("style", id="colours").string = """
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+"""
         with open(output_dir + "/" + entry, "wb") as o:
           o.write(svg.encode("utf-8") + b"\n")
     elif entry.endswith(".xml"):
diff --git a/launcherIconResize.py b/launcherIconResize.py
index da9e7ed..1d53941 100644
--- a/launcherIconResize.py
+++ b/launcherIconResize.py
@@ -42,7 +42,7 @@ input_dir         = output_dir_prefix + '70-70'
 # Convert icons to different screen sizes by these parameters
 lookup = [26, 30, 33, 35, 36, 38, 40, 52, 54, 56, 60, 61, 62, 65, 68, 80]
 
-# Delete all but the original 48x48 icon directories
+# Delete all but the original 70x70 icon directories
 for entry in os.listdir("."):
   if entry.startswith(output_dir_prefix) and entry != input_dir:
     shutil.rmtree(entry)
diff --git a/resources-icons-18-w/error.svg b/resources-icons-18-w/error.svg
index eca19ce..51f5fa4 100644
--- a/resources-icons-18-w/error.svg
+++ b/resources-icons-18-w/error.svg
@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-18-w/group_type.svg b/resources-icons-18-w/group_type.svg
index 75fce08..c86fffa 100644
--- a/resources-icons-18-w/group_type.svg
+++ b/resources-icons-18-w/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-18-w/info_type.svg b/resources-icons-18-w/info_type.svg
index 5096538..cfad615 100644
--- a/resources-icons-18-w/info_type.svg
+++ b/resources-icons-18-w/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-18-w/numeric_type.svg b/resources-icons-18-w/numeric_type.svg
index 89d3bbf..9e8ad1b 100644
--- a/resources-icons-18-w/numeric_type.svg
+++ b/resources-icons-18-w/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; } 
-    rect.colour2 { stroke: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-18-w/tap_type.svg b/resources-icons-18-w/tap_type.svg
index eeb3640..bdcc546 100644
--- a/resources-icons-18-w/tap_type.svg
+++ b/resources-icons-18-w/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-18/error.svg b/resources-icons-18/error.svg
index 767dfbd..119cbd8 100644
--- a/resources-icons-18/error.svg
+++ b/resources-icons-18/error.svg
@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-18/group_type.svg b/resources-icons-18/group_type.svg
index 5d7a363..6ea5253 100644
--- a/resources-icons-18/group_type.svg
+++ b/resources-icons-18/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-18/info_type.svg b/resources-icons-18/info_type.svg
index dd693f5..a530bdd 100644
--- a/resources-icons-18/info_type.svg
+++ b/resources-icons-18/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-18/numeric_type.svg b/resources-icons-18/numeric_type.svg
index c53494d..a6bc5cf 100644
--- a/resources-icons-18/numeric_type.svg
+++ b/resources-icons-18/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-18/tap_type.svg b/resources-icons-18/tap_type.svg
index 8812493..37253d9 100644
--- a/resources-icons-18/tap_type.svg
+++ b/resources-icons-18/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="18" viewBox="0 0 960 960" width="18" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-21-w/error.svg b/resources-icons-21-w/error.svg
index 76c15b7..e4b19d4 100644
--- a/resources-icons-21-w/error.svg
+++ b/resources-icons-21-w/error.svg
@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-21-w/group_type.svg b/resources-icons-21-w/group_type.svg
index 855a9b7..0f65e83 100644
--- a/resources-icons-21-w/group_type.svg
+++ b/resources-icons-21-w/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-21-w/info_type.svg b/resources-icons-21-w/info_type.svg
index 9ee062e..f8a6f4e 100644
--- a/resources-icons-21-w/info_type.svg
+++ b/resources-icons-21-w/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { stroke: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-21-w/numeric_type.svg b/resources-icons-21-w/numeric_type.svg
index 59972c8..7921ba9 100644
--- a/resources-icons-21-w/numeric_type.svg
+++ b/resources-icons-21-w/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; } 
-    rect.colour2 { stroke: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-21-w/tap_type.svg b/resources-icons-21-w/tap_type.svg
index 0aa7c21..d4a51d0 100644
--- a/resources-icons-21-w/tap_type.svg
+++ b/resources-icons-21-w/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #dddddd; }
+    .colour2 { color: #ffffff; }
+</style>
 <style>
-    .colour1 { fill: #ffffff; }
-    .colour2 { fill: #ffffff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-21/error.svg b/resources-icons-21/error.svg
index 686e718..c1bb30f 100644
--- a/resources-icons-21/error.svg
+++ b/resources-icons-21/error.svg
@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-21/group_type.svg b/resources-icons-21/group_type.svg
index 3716eb8..fb6f16c 100644
--- a/resources-icons-21/group_type.svg
+++ b/resources-icons-21/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-21/info_type.svg b/resources-icons-21/info_type.svg
index 263beba..75497d5 100644
--- a/resources-icons-21/info_type.svg
+++ b/resources-icons-21/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-21/numeric_type.svg b/resources-icons-21/numeric_type.svg
index b83141e..d61cab6 100644
--- a/resources-icons-21/numeric_type.svg
+++ b/resources-icons-21/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-21/tap_type.svg b/resources-icons-21/tap_type.svg
index 54eb62c..9ad97db 100644
--- a/resources-icons-21/tap_type.svg
+++ b/resources-icons-21/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="21" viewBox="0 0 960 960" width="21" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-24/error.svg b/resources-icons-24/error.svg
index a785f5d..8cc15e1 100644
--- a/resources-icons-24/error.svg
+++ b/resources-icons-24/error.svg
@@ -1,7 +1,11 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-24/group_type.svg b/resources-icons-24/group_type.svg
index 5e5bf56..e35fd7b 100644
--- a/resources-icons-24/group_type.svg
+++ b/resources-icons-24/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-24/info_type.svg b/resources-icons-24/info_type.svg
index 43b7767..2872a6d 100644
--- a/resources-icons-24/info_type.svg
+++ b/resources-icons-24/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-24/numeric_type.svg b/resources-icons-24/numeric_type.svg
index 2ab3e21..73ccd73 100644
--- a/resources-icons-24/numeric_type.svg
+++ b/resources-icons-24/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-24/tap_type.svg b/resources-icons-24/tap_type.svg
index 5ef37d3..58c0133 100644
--- a/resources-icons-24/tap_type.svg
+++ b/resources-icons-24/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="24" viewBox="0 0 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-26/error.svg b/resources-icons-26/error.svg
index e064c56..77f182a 100644
--- a/resources-icons-26/error.svg
+++ b/resources-icons-26/error.svg
@@ -1,7 +1,11 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-26/group_type.svg b/resources-icons-26/group_type.svg
index 2fba101..c0cf753 100644
--- a/resources-icons-26/group_type.svg
+++ b/resources-icons-26/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-26/info_type.svg b/resources-icons-26/info_type.svg
index 537388b..576518b 100644
--- a/resources-icons-26/info_type.svg
+++ b/resources-icons-26/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-26/numeric_type.svg b/resources-icons-26/numeric_type.svg
index ac1f7d3..9798da4 100644
--- a/resources-icons-26/numeric_type.svg
+++ b/resources-icons-26/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-26/tap_type.svg b/resources-icons-26/tap_type.svg
index de27f80..c9101aa 100644
--- a/resources-icons-26/tap_type.svg
+++ b/resources-icons-26/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="26" viewBox="0 0 960 960" width="26" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-28/error.svg b/resources-icons-28/error.svg
index fc14ef7..26249b3 100644
--- a/resources-icons-28/error.svg
+++ b/resources-icons-28/error.svg
@@ -1,7 +1,11 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-28/group_type.svg b/resources-icons-28/group_type.svg
index 3bd5bc8..58f0511 100644
--- a/resources-icons-28/group_type.svg
+++ b/resources-icons-28/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-28/info_type.svg b/resources-icons-28/info_type.svg
index 88a25c9..1a85e51 100644
--- a/resources-icons-28/info_type.svg
+++ b/resources-icons-28/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-28/numeric_type.svg b/resources-icons-28/numeric_type.svg
index e046266..e6554c8 100644
--- a/resources-icons-28/numeric_type.svg
+++ b/resources-icons-28/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-28/tap_type.svg b/resources-icons-28/tap_type.svg
index f935891..5a310a8 100644
--- a/resources-icons-28/tap_type.svg
+++ b/resources-icons-28/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="28" viewBox="0 0 960 960" width="28" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-30/error.svg b/resources-icons-30/error.svg
index 28e575a..525cb55 100644
--- a/resources-icons-30/error.svg
+++ b/resources-icons-30/error.svg
@@ -1,7 +1,11 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-30/group_type.svg b/resources-icons-30/group_type.svg
index 306e83a..025f20f 100644
--- a/resources-icons-30/group_type.svg
+++ b/resources-icons-30/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-30/info_type.svg b/resources-icons-30/info_type.svg
index 1291f90..45b0df1 100644
--- a/resources-icons-30/info_type.svg
+++ b/resources-icons-30/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-30/numeric_type.svg b/resources-icons-30/numeric_type.svg
index b330aee..0c66836 100644
--- a/resources-icons-30/numeric_type.svg
+++ b/resources-icons-30/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-30/tap_type.svg b/resources-icons-30/tap_type.svg
index 03b8fc5..292f787 100644
--- a/resources-icons-30/tap_type.svg
+++ b/resources-icons-30/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="30" viewBox="0 0 960 960" width="30" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-32/error.svg b/resources-icons-32/error.svg
index 89caeb6..816dc5b 100644
--- a/resources-icons-32/error.svg
+++ b/resources-icons-32/error.svg
@@ -1,7 +1,11 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-32/group_type.svg b/resources-icons-32/group_type.svg
index 24e5c4b..8f20961 100644
--- a/resources-icons-32/group_type.svg
+++ b/resources-icons-32/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-32/info_type.svg b/resources-icons-32/info_type.svg
index d066025..3c5e9ea 100644
--- a/resources-icons-32/info_type.svg
+++ b/resources-icons-32/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-32/numeric_type.svg b/resources-icons-32/numeric_type.svg
index 000fd74..043893e 100644
--- a/resources-icons-32/numeric_type.svg
+++ b/resources-icons-32/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-32/tap_type.svg b/resources-icons-32/tap_type.svg
index 510b45f..0bf7030 100644
--- a/resources-icons-32/tap_type.svg
+++ b/resources-icons-32/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="32" viewBox="0 0 960 960" width="32" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-34/error.svg b/resources-icons-34/error.svg
index 7daa64a..9124fb2 100644
--- a/resources-icons-34/error.svg
+++ b/resources-icons-34/error.svg
@@ -1,7 +1,11 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-34/group_type.svg b/resources-icons-34/group_type.svg
index dda2a13..07ee952 100644
--- a/resources-icons-34/group_type.svg
+++ b/resources-icons-34/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-34/info_type.svg b/resources-icons-34/info_type.svg
index ed5d6ca..8fcc6e6 100644
--- a/resources-icons-34/info_type.svg
+++ b/resources-icons-34/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-34/numeric_type.svg b/resources-icons-34/numeric_type.svg
index 1d3e858..8158de3 100644
--- a/resources-icons-34/numeric_type.svg
+++ b/resources-icons-34/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-34/tap_type.svg b/resources-icons-34/tap_type.svg
index 5c702da..25747ce 100644
--- a/resources-icons-34/tap_type.svg
+++ b/resources-icons-34/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="34" viewBox="0 0 960 960" width="34" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-38/error.svg b/resources-icons-38/error.svg
index 73ae4d1..876a460 100644
--- a/resources-icons-38/error.svg
+++ b/resources-icons-38/error.svg
@@ -1,7 +1,11 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-38/group_type.svg b/resources-icons-38/group_type.svg
index b34eccf..2429826 100644
--- a/resources-icons-38/group_type.svg
+++ b/resources-icons-38/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-38/info_type.svg b/resources-icons-38/info_type.svg
index 29ee6a9..c0963d2 100644
--- a/resources-icons-38/info_type.svg
+++ b/resources-icons-38/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-38/numeric_type.svg b/resources-icons-38/numeric_type.svg
index bab998c..468a596 100644
--- a/resources-icons-38/numeric_type.svg
+++ b/resources-icons-38/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-38/tap_type.svg b/resources-icons-38/tap_type.svg
index 1e0db06..b1d8013 100644
--- a/resources-icons-38/tap_type.svg
+++ b/resources-icons-38/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="38" viewBox="0 0 960 960" width="38" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-42/error.svg b/resources-icons-42/error.svg
index 2a3328d..f90c715 100644
--- a/resources-icons-42/error.svg
+++ b/resources-icons-42/error.svg
@@ -1,7 +1,11 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-42/group_type.svg b/resources-icons-42/group_type.svg
index d3d80e8..d8f37c3 100644
--- a/resources-icons-42/group_type.svg
+++ b/resources-icons-42/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-42/info_type.svg b/resources-icons-42/info_type.svg
index a35a748..5fb0efc 100644
--- a/resources-icons-42/info_type.svg
+++ b/resources-icons-42/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-42/numeric_type.svg b/resources-icons-42/numeric_type.svg
index 36222a1..b5e2ef4 100644
--- a/resources-icons-42/numeric_type.svg
+++ b/resources-icons-42/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-42/tap_type.svg b/resources-icons-42/tap_type.svg
index be72486..dd9ec87 100644
--- a/resources-icons-42/tap_type.svg
+++ b/resources-icons-42/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="42" viewBox="0 0 960 960" width="42" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-46/error.svg b/resources-icons-46/error.svg
index bfacd00..18622f1 100644
--- a/resources-icons-46/error.svg
+++ b/resources-icons-46/error.svg
@@ -1,7 +1,11 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-46/group_type.svg b/resources-icons-46/group_type.svg
index 4a689b8..ff55b1b 100644
--- a/resources-icons-46/group_type.svg
+++ b/resources-icons-46/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-46/info_type.svg b/resources-icons-46/info_type.svg
index 36806e6..234f34e 100644
--- a/resources-icons-46/info_type.svg
+++ b/resources-icons-46/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-46/numeric_type.svg b/resources-icons-46/numeric_type.svg
index 124afae..bfda50f 100644
--- a/resources-icons-46/numeric_type.svg
+++ b/resources-icons-46/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-46/tap_type.svg b/resources-icons-46/tap_type.svg
index 736c23c..a021725 100644
--- a/resources-icons-46/tap_type.svg
+++ b/resources-icons-46/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="46" viewBox="0 0 960 960" width="46" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-48/error.svg b/resources-icons-48/error.svg
index 835cbd5..f6eea5b 100644
--- a/resources-icons-48/error.svg
+++ b/resources-icons-48/error.svg
@@ -1,7 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
   <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
   <circle class="colour1" cx="480" cy="480" r="400" stroke-width="60" fill-opacity="0.0" />
diff --git a/resources-icons-48/group_type.svg b/resources-icons-48/group_type.svg
index 7530de3..a808fb2 100644
--- a/resources-icons-48/group_type.svg
+++ b/resources-icons-48/group_type.svg
@@ -1,7 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
   <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
   <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-48/info_type.svg b/resources-icons-48/info_type.svg
index 6f508cc..93d2421 100644
--- a/resources-icons-48/info_type.svg
+++ b/resources-icons-48/info_type.svg
@@ -1,7 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
   <circle class="colour1" cx="480" cy="480" r="400" stroke-width="60" fill-opacity="0.0" />
   <g class="colour2">
diff --git a/resources-icons-48/numeric_type.svg b/resources-icons-48/numeric_type.svg
index 8ad81a1..f72babe 100644
--- a/resources-icons-48/numeric_type.svg
+++ b/resources-icons-48/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
   <rect class="colour2" x="30" y="130" width="900" height="700" rx="100" ry="100" stroke-width="60" fill-opacity="0.0" />
   <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-48/tap_type.svg b/resources-icons-48/tap_type.svg
index 3348d1b..3aa8193 100644
--- a/resources-icons-48/tap_type.svg
+++ b/resources-icons-48/tap_type.svg
@@ -1,7 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" height="48" width="48">
+  <style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
   <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
   <g>
    <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z" />
diff --git a/resources-icons-53/error.svg b/resources-icons-53/error.svg
index be4e732..cd83137 100644
--- a/resources-icons-53/error.svg
+++ b/resources-icons-53/error.svg
@@ -1,7 +1,11 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-53/group_type.svg b/resources-icons-53/group_type.svg
index 4b726d5..2e53545 100644
--- a/resources-icons-53/group_type.svg
+++ b/resources-icons-53/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-53/info_type.svg b/resources-icons-53/info_type.svg
index 65890ed..22ad459 100644
--- a/resources-icons-53/info_type.svg
+++ b/resources-icons-53/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-53/numeric_type.svg b/resources-icons-53/numeric_type.svg
index 2ad454c..f2dd2ea 100644
--- a/resources-icons-53/numeric_type.svg
+++ b/resources-icons-53/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-53/tap_type.svg b/resources-icons-53/tap_type.svg
index a842a20..4f4d8f7 100644
--- a/resources-icons-53/tap_type.svg
+++ b/resources-icons-53/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="53" viewBox="0 0 960 960" width="53" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-icons-55/error.svg b/resources-icons-55/error.svg
index fa26b45..bd95e43 100644
--- a/resources-icons-55/error.svg
+++ b/resources-icons-55/error.svg
@@ -1,7 +1,11 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #aa0000; }
+    .colour2 { color: #ff1111; }
+  </style>
 <style>
-    .colour1 { stroke: #aa0000; }
-    .colour2 { fill: #ff1111; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
     text.large { font: bold 600px sans-serif; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
diff --git a/resources-icons-55/group_type.svg b/resources-icons-55/group_type.svg
index f9c83f3..8fefa93 100644
--- a/resources-icons-55/group_type.svg
+++ b/resources-icons-55/group_type.svg
@@ -1,7 +1,10 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="160"/>
 <rect class="colour1" height="160" rx="20" ry="20" width="560" x="300" y="400"/>
diff --git a/resources-icons-55/info_type.svg b/resources-icons-55/info_type.svg
index e54f6a6..4f81fda 100644
--- a/resources-icons-55/info_type.svg
+++ b/resources-icons-55/info_type.svg
@@ -1,7 +1,11 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { stroke: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1 { stroke: currentColor; }
+    .colour2 { fill: currentColor; }
   </style>
 <circle class="colour1" cx="480" cy="480" fill-opacity="0.0" r="400" stroke-width="60"/>
 <g class="colour2">
diff --git a/resources-icons-55/numeric_type.svg b/resources-icons-55/numeric_type.svg
index 07334b9..09b281a 100644
--- a/resources-icons-55/numeric_type.svg
+++ b/resources-icons-55/numeric_type.svg
@@ -1,10 +1,13 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
     text.small { font: bold 400px sans-serif; }
     text.large { font: bold 500px sans-serif; }
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; } 
-    rect.colour2 { stroke: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; } 
+    rect.colour2 { stroke: currentColor; }
   </style>
 <rect class="colour2" fill-opacity="0.0" height="700" rx="100" ry="100" stroke-width="60" width="900" x="30" y="130"/>
 <text class="small colour1" x="110" y="610">1</text>
diff --git a/resources-icons-55/tap_type.svg b/resources-icons-55/tap_type.svg
index c592980..729f4e2 100644
--- a/resources-icons-55/tap_type.svg
+++ b/resources-icons-55/tap_type.svg
@@ -1,7 +1,10 @@
 <svg height="55" viewBox="0 0 960 960" width="55" xmlns="http://www.w3.org/2000/svg">
+<style id="colours">
+    .colour1 { color: #0091ff; }
+    .colour2 { color: #00ccff; }
+  </style>
 <style>
-    .colour1 { fill: #0091ff; }
-    .colour2 { fill: #00ccff; }
+    .colour1, .colour2 { fill: currentColor; }
   </style>
 <g>
 <path class="colour1" d="m463.2,216.48c58.5,0 94.47,43.11 97.5,103.57l0,8l0,93.79l96.2,18.22c3.9,0.44 7.37,1.33 11.26,2.22c72.37,20 116.57,94.67 101.39,168.91l-1.73,8l-45.5,174.69c-9.53,36 -37.7,63.56 -73.23,71.56l-6.94,1.33l-104.86,15.56c-40.3,5.78 -79.3,-14.22 -98.8,-49.79l-3.47,-7.11l-1.3,-2.66c-10.4,-22.67 -25.57,-42.22 -44.64,-56.9l-8.24,-6.22l-81.47,-56.01l-4.34,-2.66l0,0l-4.34,-2.22l-102.26,-52.01c-10.83,-5.78 -17.77,-16.89 -17.77,-29.34c-1.3,-49.33 19.93,-87.12 61.1,-108.46c30.76,-15.56 71.06,-14.67 122.63,0.89l11.26,3.56l0,-185.35c0,-64.45 36.4,-111.57 97.5,-111.57l0.02,-0.01zm0,66.67c-19.93,0 -30.76,12 -32.5,38.67l0,6.22l0,232.91c0,24 -23.4,40.01 -45.07,31.11c-63.27,-27.12 -105.73,-33.34 -124.36,-23.56c-11.26,5.78 -18.2,12.89 -22.1,23.11l-1.73,5.33l82.33,42.22l7.8,4.45l0,0l7.8,4.45l81.47,56.01c29.46,20 53.73,47.56 70.63,79.57l5.2,11.11l1.3,2.66c5.2,12 16.9,19.11 29.46,19.11l4.34,0l104.86,-15.56c11.26,-1.77 20.8,-9.34 25.14,-20l1.73,-4.45l45.5,-174.24c10.83,-41.78 -13.43,-84.45 -53.73,-95.56l-3.03,-0.44l0,0l-125.66,-23.56c-14.3,-2.66 -24.7,-14.22 -26.44,-28l-0.43,-4.89l0,-121.79c0,-30.67 -10.83,-44.9 -32.5,-44.9l0,0.02z"/>
diff --git a/resources-launcher-68-68/launcher.svg b/resources-launcher-68-68/launcher.svg
index 2d63153..3fdea64 100644
--- a/resources-launcher-68-68/launcher.svg
+++ b/resources-launcher-68-68/launcher.svg
@@ -1,4 +1,4 @@
-<svg width="68" height="68" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="68" viewBox="0 0 400 400" width="68" xmlns="http://www.w3.org/2000/svg">
 <path d="M320 301.762C320 310.012 313.25 316.762 305 316.762H95C86.75 316.762 80 310.012 80 301.762V211.762C80 203.512 84.77 191.993 90.61 186.153L189.39 87.3725C195.22 81.5425 204.77 81.5425 210.6 87.3725L309.39 186.162C315.22 191.992 320 203.522 320 211.772V301.772V301.762Z" fill="#F2F4F9"/>
 <path d="M309.39 186.153L210.61 87.3725C204.78 81.5425 195.23 81.5425 189.4 87.3725L90.61 186.153C84.78 191.983 80 203.512 80 211.762V301.762C80 310.012 86.75 316.762 95 316.762H187.27L146.64 276.132C144.55 276.852 142.32 277.262 140 277.262C128.7 277.262 119.5 268.062 119.5 256.762C119.5 245.462 128.7 236.262 140 236.262C151.3 236.262 160.5 245.462 160.5 256.762C160.5 259.092 160.09 261.322 159.37 263.412L191 295.042V179.162C184.2 175.822 179.5 168.842 179.5 160.772C179.5 149.472 188.7 140.272 200 140.272C211.3 140.272 220.5 149.472 220.5 160.772C220.5 168.842 215.8 175.822 209 179.162V260.432L240.46 228.972C239.84 227.012 239.5 224.932 239.5 222.772C239.5 211.472 248.7 202.272 260 202.272C271.3 202.272 280.5 211.472 280.5 222.772C280.5 234.072 271.3 243.272 260 243.272C257.5 243.272 255.12 242.802 252.91 241.982L209 285.892V316.772H305C313.25 316.772 320 310.022 320 301.772V211.772C320 203.522 315.23 192.002 309.39 186.162V186.153Z" fill="#18BCF2"/>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/translate.cmd b/translate.cmd
index 0b504fb..031e5fb 100644
--- a/translate.cmd
+++ b/translate.cmd
@@ -14,10 +14,6 @@ rem  J D Abbey & P A Abbey, 28 December 2022
 rem
 rem  Run the automatic translation script.
 rem
-rem  Reference:
-rem   * Using Monkey C from the Command Line
-rem     https://developer.garmin.com/connect-iq/reference-guides/monkey-c-command-line-setup/
-rem
 rem -----------------------------------------------------------------------------------
 
 rem 'pip' instructs us to add this to the PATH for 'websockets.exe' and 'httpx.exe'