diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index 1cfd954c2..d4ac2dd2d 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -18,8 +18,8 @@
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
         <div *ngIf="course" class="core-course-thumb" #courseThumb>
-            <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
-            <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
+            <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
+            <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
             </ion-icon>
         </div>
         <div *ngIf="course" class="course-container">
diff --git a/src/core/features/course/pages/course-summary/course-summary.page.ts b/src/core/features/course/pages/course-summary/course-summary.page.ts
index 666d6bd57..502174240 100644
--- a/src/core/features/course/pages/course-summary/course-summary.page.ts
+++ b/src/core/features/course/pages/course-summary/course-summary.page.ts
@@ -466,6 +466,20 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
         CoreNavigator.navigateToSitePath(item.data.page, { params });
     }
 
+    /**
+     * Removes the course image set because it cannot be loaded and set the fallback icon color.
+     */
+    loadFallbackCourseIcon(): void {
+        if (!this.course) {
+            return;
+        }
+
+        this.course.courseimage = undefined;
+
+        // Set the color because it won't be set at this point.
+        this.setCourseColor();
+    }
+
     /**
      * Set course color.
      */
diff --git a/src/core/features/course/pages/course-summary/course-summary.scss b/src/core/features/course/pages/course-summary/course-summary.scss
index 17f6c76af..f0b9ff3c2 100644
--- a/src/core/features/course/pages/course-summary/course-summary.scss
+++ b/src/core/features/course/pages/course-summary/course-summary.scss
@@ -27,6 +27,11 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
+
+            // Fill geopaterns
+            &[src$=".svg"] {
+                min-width: 100%;
+            }
         }
 
         ion-icon.course-icon {
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index 0f0a6ca1d..f8c3a01f3 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -21,12 +21,12 @@
 <div class="core-course-header">
     <ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
         <ng-container *ngIf="course">
-            <div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
-                <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
+            <div *ngIf="!course.courseimage" #courseThumb slot="start" class="core-course-thumb">
+                <ion-icon name="fas-graduation-cap" class="course-icon" aria-hidden="true">
                 </ion-icon>
             </div>
-            <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
-                <img [src]="course.courseImage" core-external-content alt="" />
+            <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
+                <img [src]="course.courseimage" core-external-content alt="" />
             </ion-avatar>
         </ng-container>
 
diff --git a/src/core/features/course/pages/index/index.scss b/src/core/features/course/pages/index/index.scss
index 3ae1498bb..216c0eb75 100644
--- a/src/core/features/course/pages/index/index.scss
+++ b/src/core/features/course/pages/index/index.scss
@@ -27,6 +27,11 @@
             color: var(--course-color-tint);
             background: var(--course-color, transparent);
         }
+
+        // Fill geopaterns
+        img[src$=".svg"] {
+            min-width: 100%;
+        }
     }
 
     @if ($core-hide-courseimage-on-course) {
diff --git a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_46.png b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_46.png
index e9671788f..11540a01a 100644
Binary files a/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_46.png and b/src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_46.png differ
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index 94045bb3b..089600c54 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -2,9 +2,9 @@
     [class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()"
     button [attr.aria-label]="course.displayname || course.fullname">
 
-    <div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
-        <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
-        <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
+    <div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseimage">
+        <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
+        <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
         </ion-icon>
     </div>
 
@@ -30,11 +30,11 @@
     <ion-item class="ion-text-wrap">
 
         <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
-            <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
+            <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
                 aria-hidden="true">
             </ion-icon>
-            <ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
-                <img [src]="course.courseImage" core-external-content alt="" />
+            <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
+                <img [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
             </ion-avatar>
         </ng-container>
 
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index fbcfbe027..31cbcadc2 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -138,6 +138,10 @@ ion-card.core-course-list-item {
     }
 }
 
+// Fill geopaterns
+.core-course-thumb img[src$=".svg"] {
+    min-width: 100%;
+}
 
 // Card layout.
 ion-card.core-course-list-card {
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts
index b648125ff..121b448b6 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.ts
+++ b/src/core/features/courses/components/course-list-item/course-list-item.ts
@@ -111,7 +111,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
                         label: 'core.courses.allowguests',
                         icon: 'fas-unlock',
                     });
-                } else if (instance === 'paypal') {
+                } else if (instance === 'paypal' || instance === 'fee') {
                     this.enrolmentIcons.push({
                         label: 'core.courses.otherenrolments',
                         icon: 'fas-up-right-from-square',
@@ -128,6 +128,16 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
         }
     }
 
+    /**
+     * Removes the course image set because it cannot be loaded and set the fallback icon color.
+     */
+    loadFallbackCourseIcon(): void {
+        this.course.courseimage = undefined;
+
+        // Set the color because it won't be set at this point.
+        this.setCourseColor();
+    }
+
     /**
      * Set course color.
      */
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 528aa6ad6..df6910ac0 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -1,7 +1,7 @@
 <ion-card [attr.course-color]="course.color ? null : course.colorNumber">
-    <div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"
+    <div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseimage"
         [style.background-color]="course.color">
-        <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
+        <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" />
     </div>
     <ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header"
         [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index 1ab3357e5..b8749c358 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -40,6 +40,11 @@
                 right: 0;
                 left: 0;
                 margin: auto;
+
+                // Fill geopaterns
+                &[src$=".svg"] {
+                    min-width: 100%;
+                }
             }
         }
 
diff --git a/src/core/features/courses/services/courses-helper.ts b/src/core/features/courses/services/courses-helper.ts
index b794816d0..d33612e1d 100644
--- a/src/core/features/courses/services/courses-helper.ts
+++ b/src/core/features/courses/services/courses-helper.ts
@@ -205,8 +205,20 @@ export class CoreCoursesHelperProvider {
      * @param course Course data.
      */
     async loadCourseColorAndImage(course: CoreCourseWithImageAndColor): Promise<void> {
+        // Moodle 4.1 downwards geopatterns are embedded in b64 in only some WS, remote them to keep it coherent.
+        if (course.courseimage?.startsWith('data')) {
+            course.courseimage = undefined;
+        }
+
+        if (course.courseimage !== undefined) {
+            course.courseImage = course.courseimage; // @deprecated sinde 4.3 use courseimage instead.
+
+            return;
+        }
+
         if (course.overviewfiles && course.overviewfiles[0]) {
-            course.courseImage = course.overviewfiles[0].fileurl;
+            course.courseimage = course.overviewfiles[0].fileurl;
+            course.courseImage = course.courseimage; // @deprecated sinde 4.3 use courseimage instead.
 
             return;
         }
@@ -436,7 +448,8 @@ export type CoreCourseWithImageAndColor = {
     overviewfiles?: CoreWSExternalFile[];
     colorNumber?: number; // Color index number.
     color?: string; // Color RGB.
-    courseImage?: string; // Course thumbnail.
+    courseImage?: string; // Course thumbnail. @deprecated since 4.3, use courseimage instead.
+    courseimage?: string; // Course thumbnail.
 };
 
 /**