diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 1350d18b1..d3a5a6212 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -15,7 +15,8 @@
                 <ion-card>
                     <ion-item class="core-course-module-handler ion-text-wrap" [detail]="false" (click)="action($event, item)" button>
                         <core-mod-icon slot="start" *ngIf="item.iconUrl" [modicon]="item.iconUrl" [modname]="item.modname"
-                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose" [isBranded]="item.branded" />
+                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose" [colorize]="colorizeIcons"
+                            [isBranded]="item.branded" />
                         <ion-label>
                             <!-- Add the icon title so accessibility tools read it. -->
                             <span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span>
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
index b832e7552..90eb98e6d 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
@@ -35,6 +35,7 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
 
     items: AddonBlockRecentlyAccessedItemsItemCalculatedData[] = [];
     scrollElementId!: string;
+    colorizeIcons = false;
 
     protected fetchContentDefaultError = 'Error getting recently accessed items data.';
 
@@ -51,6 +52,9 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
 
         this.scrollElementId = `addon-block-recentlyaccesseditems-scroll-${scrollId}`;
 
+        // Only colorize icons on 4.0 to 4.3 sites.
+        this.colorizeIcons = !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.4');
+
         super.ngOnInit();
     }
 
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 470e99f1a..52aa0092c 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -22,7 +22,8 @@
                             <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">
                                 <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                 <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
-                                    [modname]="event.modulename" [purpose]="event.purpose" [isBranded]="event.branded" />
+                                    [modname]="event.modulename" [purpose]="event.purpose" [colorize]="colorizeIcons"
+                                    [isBranded]="event.branded" />
                             </ion-col>
                             <ion-col class="addon-block-timeline-activity-name ion-no-padding">
                                 <p class="item-heading">
diff --git a/src/addons/block/timeline/components/events/events.ts b/src/addons/block/timeline/components/events/events.ts
index 2b855bd02..b3bc10d9a 100644
--- a/src/addons/block/timeline/components/events/events.ts
+++ b/src/addons/block/timeline/components/events/events.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
@@ -27,7 +27,7 @@ import { AddonBlockTimelineDayEvents } from '@addons/block/timeline/classes/sect
     templateUrl: 'addon-block-timeline-events.html',
     styleUrls: ['events.scss'],
 })
-export class AddonBlockTimelineEventsComponent {
+export class AddonBlockTimelineEventsComponent implements OnInit {
 
     @Input() events: AddonBlockTimelineDayEvents[] = []; // The events to render.
     @Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name.
@@ -36,6 +36,16 @@ export class AddonBlockTimelineEventsComponent {
     @Input() loadingMore = false; // Whether loading is ongoing.
     @Output() loadMore = new EventEmitter(); // Notify that more events should be loaded.
 
+    colorizeIcons = false;
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        // Only colorize icons on 4.0 to 4.3 sites.
+        this.colorizeIcons = !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.4');
+    }
+
     /**
      * Action clicked.
      *
diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss
index 332416b56..349c4b7d0 100644
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@@ -23,7 +23,7 @@
     background-color: transparent;
     line-height: var(--size);
 
-    --color: var(--text-color);
+    --color: var(--activity-base-icon-color);
 
     &.colorize {
         &.version_current {
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 74fbd8a65..4c83f6bb6 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -61,7 +61,7 @@
                                     <ion-icon class="completioninfo completion_complete" name="fas-circle"
                                         *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
                                         [attr.aria-label]="'core.course.done' | translate" />
-                                    <ion-icon class="completioninfo completion_fail" name="fas-circle" *ngIf="module.completionStatus === 3"
+                                    <ion-icon class="completioninfo completion_fail" name="fas-xmark" *ngIf="module.completionStatus === 3"
                                         color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
                                     <ion-label>
                                         <p class="item-heading">
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 1094c8257..884f0e8fd 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -68,7 +68,7 @@
 <ng-template #categories>
     <ion-card>
         <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
-            <ion-icon name="fas-folder" slot="start" aria-hidden="true" />
+            <ion-icon name="far-folder" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
             </ion-label>
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 3d9bc3163..562b7a536 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -4,8 +4,7 @@ ion-item ion-icon {
     display: inline-block;
     border-radius: var(--mdl-shape-borderRadius-xs);
     padding: 4px;
-    background-color: var(--gray-100);
-    color: var(--gray-900);
+    color: var(--text-color);
     line-height: var(--size);
     --margin-end: 8px;
     @include margin-horizontal(null, var(--margin-end));
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 66ad41d56..eb4b3641b 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -174,4 +174,6 @@ html.dark {
     --core-table-odd-cell-hover: var(--gray-600);
     --core-table-even-cell-background: var(--gray-900);
     --core-table-even-cell-hover: var(--gray-700);
+
+    --activity-base-icon-color: var(--white);
 }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 3a6c57f84..c4982111d 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -204,6 +204,7 @@ html {
         --core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))};
     }
 
+    --activity-base-icon-color: var(--gray-900);
     // Make activtity colours available for custom modules.
     @each $type, $value in $activity-icon-colors {
         --activity#{$type}: #{$value};