diff --git a/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss b/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
new file mode 100644
index 000000000..21ce02313
--- /dev/null
+++ b/src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
@@ -0,0 +1,13 @@
+:host {
+    --mod-icon-filter: brightness(0);
+
+    core-mod-icon {
+        background: transparent;
+        margin: 0;
+        --filter: var(--mod-icon-filter);
+    }
+}
+
+:host-context(body.dark) {
+    --mod-icon-filter: brightness(0) invert(1);
+}
diff --git a/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts b/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
index 60db4a0c0..129c1ca6d 100644
--- a/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
+++ b/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
@@ -28,6 +28,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'addon-block-activitymodules',
     templateUrl: 'addon-block-activitymodules.html',
+    styleUrls: ['activitymodules.scss'],
 })
 export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent implements OnInit {
 
@@ -96,16 +97,13 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
         // Sort the modnames alphabetically.
         modFullNames = CoreUtils.sortValues(modFullNames);
         for (const modName in modFullNames) {
-            let icon: string;
+            const iconModName = modName === 'resources' ? 'page' : modName;
 
-            if (modName === 'resources') {
-                icon = await CoreCourse.getModuleIconSrc('page', modIcons['page']);
-            } else {
-                icon = await CoreCourseModuleDelegate.getModuleIconSrc(modName, modIcons[modName]);
-            }
+            const icon = await CoreCourseModuleDelegate.getModuleIconSrc(iconModName, modIcons[iconModName]);
 
             this.entries.push({
-                icon: icon,
+                icon,
+                iconModName,
                 name: modFullNames[modName],
                 modName,
             });
@@ -145,4 +143,5 @@ type AddonBlockActivityModuleEntry = {
     icon: string;
     name: string;
     modName: string;
+    iconModName: string;
 };
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index 44810d334..a22f3d549 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -5,7 +5,7 @@
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" detail="true" button (click)="gotoCoureListModType(entry)">
-        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.modName" [showAlt]="false">
+        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false">
         </core-mod-icon>
         <ion-label>{{ entry.name }}</ion-label>
     </ion-item>