diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 8deb104e90c..d95fef4eb85 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2581,8 +2581,13 @@ class core_renderer extends renderer_base {
             $attributes['title'] = $alt;
         }
 
-        // get the image html output fisrt
-        $output = html_writer::empty_tag('img', $attributes);
+        // get the image html output first
+        if ($user->picture == 0 && !defined('BEHAT_SITE_RUNNING')) {
+            $output = html_writer::tag('span', mb_substr($user->firstname, 0, 1) . mb_substr($user->lastname, 0, 1),
+                ['class' => 'userinitials size-' . $size]);
+        } else {
+            $output = html_writer::empty_tag('img', $attributes);
+        }
 
         // Show fullname together with the picture when desired.
         if ($userpicture->includefullname) {
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 58405216d43..9bc7e008a4e 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -370,7 +370,8 @@ a.autolink.glossary:hover {
     font-weight: bold;
 }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
     margin-right: 0.5rem;
 }
 
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index e4262bebd26..6559dfbf0f2 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -1108,6 +1108,13 @@ div#dock {
                 img {
                     vertical-align: baseline;
                 }
+                .userinitials.size-35 {
+                    width: 20px;
+                    height: 20px;
+                    border: $border-width solid $border-color;
+                    background-color: $white;
+                    font-size: $font-size-base * .6;
+                }
             }
             img {
                 width: inherit;
@@ -1122,6 +1129,30 @@ div#dock {
     }
 }
 
+.userinitials {
+    background-color: $gray-200;
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: $gray-800;
+    font-weight: normal;
+    &.size-16 {
+        width: 30px;
+        height: 30px;
+    }
+    &.size-35 {
+        width: 35px;
+        height: 35px;
+    }
+    &.size-100 {
+        width: 100px;
+        height: 100px;
+        font-size: $h2-font-size;
+    }
+}
+
 @include media-breakpoint-down(sm) {
     .usertext {
         display: none;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 79447ab3aba..ffa09d36665 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -9982,7 +9982,8 @@ a.autolink.glossary:hover {
 .pagingbar .thispage {
   font-weight: bold; }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
   margin-right: 0.5rem; }
 
 img.resize {
@@ -17663,6 +17664,12 @@ div#dock {
     border-radius: 50%; }
     .userloggedinas .usermenu .userbutton .avatars .avatar.current img {
       vertical-align: baseline; }
+    .userloggedinas .usermenu .userbutton .avatars .avatar.current .userinitials.size-35 {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #dee2e6;
+      background-color: #fff;
+      font-size: 0.5625rem; }
   .userloggedinas .usermenu .userbutton .avatars .avatar img {
     width: inherit;
     height: inherit; }
@@ -17671,6 +17678,26 @@ div#dock {
     height: 35px;
     display: inline-block; }
 
+.userinitials {
+  background-color: #e9ecef;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #343a40;
+  font-weight: normal; }
+  .userinitials.size-16 {
+    width: 30px;
+    height: 30px; }
+  .userinitials.size-35 {
+    width: 35px;
+    height: 35px; }
+  .userinitials.size-100 {
+    width: 100px;
+    height: 100px;
+    font-size: 1.875rem; }
+
 @media (max-width: 767.98px) {
   .usertext {
     display: none; } }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 44c2d1db9f9..af70f18f85a 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -10194,7 +10194,8 @@ a.autolink.glossary:hover {
 .pagingbar .thispage {
   font-weight: bold; }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
   margin-right: 0.5rem; }
 
 img.resize {
@@ -17898,6 +17899,12 @@ div#dock {
     border-radius: 50%; }
     .userloggedinas .usermenu .userbutton .avatars .avatar.current img {
       vertical-align: baseline; }
+    .userloggedinas .usermenu .userbutton .avatars .avatar.current .userinitials.size-35 {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #dee2e6;
+      background-color: #fff;
+      font-size: 0.5625rem; }
   .userloggedinas .usermenu .userbutton .avatars .avatar img {
     width: inherit;
     height: inherit; }
@@ -17906,6 +17913,26 @@ div#dock {
     height: 35px;
     display: inline-block; }
 
+.userinitials {
+  background-color: #e9ecef;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #343a40;
+  font-weight: normal; }
+  .userinitials.size-16 {
+    width: 30px;
+    height: 30px; }
+  .userinitials.size-35 {
+    width: 35px;
+    height: 35px; }
+  .userinitials.size-100 {
+    width: 100px;
+    height: 100px;
+    font-size: 1.875rem; }
+
 @media (max-width: 767.98px) {
   .usertext {
     display: none; } }
diff --git a/user/tests/userlib_test.php b/user/tests/userlib_test.php
index 68a383fb4a2..b1144124d08 100644
--- a/user/tests/userlib_test.php
+++ b/user/tests/userlib_test.php
@@ -588,11 +588,8 @@ class core_userliblib_testcase extends advanced_testcase {
         $avatarhtml = $opts->metadata['useravatar'];
 
         $matches = [];
-        preg_match('/(?:.*width=")(\d*)(?:" height=")(\d*)(?:".*\/>)/', $avatarhtml, $matches);
-        $this->assertCount(3, $matches);
-
-        $this->assertEquals(intval($matches[1]), $testsize);
-        $this->assertEquals(intval($matches[2]), $testsize);
+        preg_match('/size-100/', $avatarhtml, $matches);
+        $this->assertCount(1, $matches);
     }
 
     /**