diff --git a/admin/tool/componentlibrary/content/moodle/components/activityicons.md b/admin/tool/componentlibrary/content/moodle/components/activityicons.md
index 9ed35978d1a..44ee26acbba 100644
--- a/admin/tool/componentlibrary/content/moodle/components/activityicons.md
+++ b/admin/tool/componentlibrary/content/moodle/components/activityicons.md
@@ -68,17 +68,15 @@ each defined as 'MOD_PURPOSE_X', so Assessment is MOD_PURPOSE_ASSESSMENT.
 
 ### Purpose colours
 
-The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy this array of scss colours, customise the colours and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
+The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy any of these scss variables that you want to customize, change the colour value and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```.
 
 {{< highlight scss >}}
-$activity-icon-colors: (
-    "administration": #5d63f6,
-    "assessment": #eb00a2,
-    "collaboration": #f7634d,
-    "communication": #11a676,
-    "content": #399be2,
-    "interface": #a378ff
-);
+$activity-icon-administration-bg: #5d63f6;
+$activity-icon-assessment-bg:     #eb66a2;
+$activity-icon-collaboration-bg:  #f7634d;
+$activity-icon-communication-bg:  #11a676;
+$activity-icon-content-bg:        #399be2;
+$activity-icon-interface-bg:      #a378ff;
 {{</ highlight >}}
 
 ### Custom activity icons
diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss
index b8f2e7cc36e..c2b86ed86f0 100644
--- a/theme/boost/scss/moodle/variables.scss
+++ b/theme/boost/scss/moodle/variables.scss
@@ -40,15 +40,22 @@ $primary-light-hover: theme-color-level('primary', -10) !default;
 $activity-iconcontainer-height: 50px;
 $activity-iconcontainer-width: 50px;
 
+$activity-icon-administration-bg: #5d63f6 !default;
+$activity-icon-assessment-bg:     #eb66a2 !default;
+$activity-icon-collaboration-bg:  #f7634d !default;
+$activity-icon-communication-bg:  #11a676 !default;
+$activity-icon-content-bg:        #399be2 !default;
+$activity-icon-interface-bg:      #a378ff !default;
+
 $activity-icon-colors: () !default;
 $activity-icon-colors: map-merge(
     (
-        "administration": #5d63f6,
-        "assessment": #eb66a2,
-        "collaboration": #f7634d,
-        "communication": #11a676,
-        "content": #399be2,
-        "interface": #a378ff
+        "administration": $activity-icon-administration-bg,
+        "assessment": $activity-icon-assessment-bg,
+        "collaboration": $activity-icon-collaboration-bg,
+        "communication": $activity-icon-communication-bg,
+        "content": $activity-icon-content-bg,
+        "interface": $activity-icon-interface-bg
     ),
     $activity-icon-colors
 );