diff --git a/lib/classes/output/icon_system_fontawesome.php b/lib/classes/output/icon_system_fontawesome.php
index 0650971c65e7e..71d15a671e6ff 100644
--- a/lib/classes/output/icon_system_fontawesome.php
+++ b/lib/classes/output/icon_system_fontawesome.php
@@ -360,6 +360,7 @@ public function get_core_icon_map() {
             'core:t/message' => 'fa-comment',
             'core:t/more' => 'fa-caret-down',
             'core:t/move' => 'fa-arrows-v',
+            'core:t/online' => 'fa-circle',
             'core:t/passwordunmask-edit' => 'fa-pencil',
             'core:t/passwordunmask-reveal' => 'fa-eye',
             'core:t/portfolioadd' => 'fa-plus',
diff --git a/message/templates/message_area_contact.mustache b/message/templates/message_area_contact.mustache
index f63e95933e78c..2ca50f27611d3 100644
--- a/message/templates/message_area_contact.mustache
+++ b/message/templates/message_area_contact.mustache
@@ -25,9 +25,11 @@
         <div class="name">
             {{fullname}}
             {{#showonlinestatus}}
-                <span {{^isonline}}class="hidden"{{/isonline}} data-region="contact-icon-online">
-                    {{#pix}} t/go, core, {{#str}} online, message {{/str}} {{/pix}}
+            <div {{#isonline}}class="d-inline status online"{{/isonline}}{{^isonline}}class="hidden"{{/isonline}}>
+                <span class="online-text" data-region="contact-icon-online">
+                    {{#pix}} t/online, core, {{#str}} online, message {{/str}} {{/pix}}
                 </span>
+            </div>
             {{/showonlinestatus}}
             <span {{^isblocked}}class="hidden"{{/isblocked}} data-region="contact-icon-blocked">
                 {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}
diff --git a/pix/t/online.png b/pix/t/online.png
new file mode 100644
index 0000000000000..c449d4a6d3629
Binary files /dev/null and b/pix/t/online.png differ
diff --git a/pix/t/online.svg b/pix/t/online.svg
new file mode 100644
index 0000000000000..64f57e9a6c91e
--- /dev/null
+++ b/pix/t/online.svg
@@ -0,0 +1,3 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" preserveAspectRatio="xMinYMid meet" overflow="visible"><circle cx="6" cy="6" r="6" fill="#7d7"/></svg>
\ No newline at end of file
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 8c7846deb9352..11be4f635cea8 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -33,7 +33,7 @@
 
         &.online {
             .online-text {
-                display: block;
+                display: inherit;
             }
             .offline-text {
                 display: none;
diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index ef421323e3c26..70aa519cdc2f0 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -29,7 +29,7 @@
 
         &.online {
             .online-text {
-                display: block;
+                display: inherit;
             }
             .offline-text {
                 display: none;
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 6b31450aa7675..eb20dce9c6f6c 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -8128,7 +8128,7 @@ a.ygtvspacer:hover {
   color: #ff6961;
 }
 .messaging-area-container .status.online .online-text {
-  display: block;
+  display: inherit;
 }
 .messaging-area-container .status.online .offline-text {
   display: none;