diff --git a/addons/hr_holidays/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/hr_holidays/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
index ff31881aeab..dd7ba153d82 100644
--- a/addons/hr_holidays/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
+++ b/addons/hr_holidays/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
@@ -6,10 +6,10 @@
                 <i class="o_PartnerImStatusIcon_icon o-online fa fa-plane fa-stack-1x" title="Online" role="img" aria-label="User is online"/>
             </t>
             <t t-if="partner.im_status === 'leave_away'">
-                <i class="o_PartnerImStatusIcon_icon o-away fa fa-plane fa-stack-1x" title="Away" role="img" aria-label="User is away"/>
+                <i class="o_PartnerImStatusIcon_icon o-away fa fa-plane fa-stack-1x text-warning" title="Away" role="img" aria-label="User is away"/>
             </t>
             <t t-if="partner.im_status === 'leave_offline'">
-                <i class="o_PartnerImStatusIcon_icon o-offline fa fa-plane fa-stack-1x" title="Out of office" role="img" aria-label="User is out of office"/>
+                <i class="o_PartnerImStatusIcon_icon o-offline fa fa-plane fa-stack-1x text-700" title="Out of office" role="img" aria-label="User is out of office"/>
             </t>
         </xpath>
     </t>
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
index dc541f1779e..448bb6776b1 100644
--- a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
@@ -3,11 +3,8 @@
 // ------------------------------------------------------------------
 
 .o_PartnerImStatusIcon {
-    display: flex;
-    flex-flow: column;
-
-    width: 1.2em;
-    height: 1.2em;
+    width: $o-mail-partner-status-icon-size;
+    height: $o-mail-partner-status-icon-size;
     line-height: 1.3em;
 }
 
@@ -19,30 +16,12 @@
 // Style
 // ------------------------------------------------------------------
 
-.o_PartnerImStatusIcon {
-    &.o-has-open-chat {
-        cursor: pointer;
-    }
-}
-
-.o_PartnerImStatusIcon_innerBackground {
-    color: $white;
-}
-
 .o_PartnerImStatusIcon_icon {
 
-    &.o-away {
-        color: theme-color('warning');
-    }
-
     &.o-bot {
         color: $o-enterprise-primary-color;
     }
 
-    &.o-offline {
-        color: gray('700');
-    }
-
     &.o-online {
         color: $o-enterprise-primary-color;
     }
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
index 5da30e1b577..ebc99637539 100644
--- a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
@@ -3,11 +3,11 @@
 
     <t t-name="mail.PartnerImStatusIcon" owl="1">
         <t t-if="partner">
-            <span class="o_PartnerImStatusIcon fa-stack"
+            <span class="o_PartnerImStatusIcon d-flex flex-column fa-stack"
                 t-att-class="{
                     'o-away': partner.im_status === 'away',
                     'o-bot': messaging.partnerRoot === partner,
-                    'o-has-open-chat': props.hasOpenChat,
+                    'o-has-open-chat o_cursor_pointer': props.hasOpenChat,
                     'o-offline': partner.im_status === 'offline',
                     'o-online': partner.im_status === 'online',
                 }"
@@ -19,16 +19,16 @@
             >
                 <t t-if="props.hasBackground">
                     <i class="o_PartnerImStatusIcon_outerBackground fa fa-circle fa-stack-1x"/>
-                    <i class="o_PartnerImStatusIcon_innerBackground fa fa-circle fa-stack-1x"/>
+                    <i class="o_PartnerImStatusIcon_innerBackground fa fa-circle fa-stack-1x text-white"/>
                 </t>
                 <t t-if="partner.im_status === 'online'">
                     <i class="o_PartnerImStatusIcon_icon o-online fa fa-circle fa-stack-1x" title="Online" role="img" aria-label="User is online"/>
                 </t>
                 <t t-if="partner.im_status === 'away'">
-                    <i class="o_PartnerImStatusIcon_icon o-away fa fa-circle fa-stack-1x" title="Idle" role="img" aria-label="User is idle"/>
+                    <i class="o_PartnerImStatusIcon_icon o-away fa fa-circle fa-stack-1x text-warning" title="Idle" role="img" aria-label="User is idle"/>
                 </t>
                 <t t-if="partner.im_status === 'offline'">
-                    <i class="o_PartnerImStatusIcon_icon o-offline fa fa-circle-o fa-stack-1x" title="Offline" role="img" aria-label="User is offline"/>
+                    <i class="o_PartnerImStatusIcon_icon o-offline fa fa-circle-o fa-stack-1x text-700" title="Offline" role="img" aria-label="User is offline"/>
                 </t>
                 <t t-if="partner === messaging.partnerRoot">
                     <i class="o_PartnerImStatusIcon_icon o-bot fa fa-heart fa-stack-1x" title="Bot" role="img" aria-label="User is a bot"/>
diff --git a/addons/mail/static/src/scss/variables/primary_variables.scss b/addons/mail/static/src/scss/variables/primary_variables.scss
index 3e4cc405442..f2b4460ff9a 100644
--- a/addons/mail/static/src/scss/variables/primary_variables.scss
+++ b/addons/mail/static/src/scss/variables/primary_variables.scss
@@ -10,6 +10,7 @@ $o-mail-attachment-image-size: 100px !default;
 $o-mail-sidebar-icon-opacity: 0.7 !default;
 $o-mail-chat-sidebar-width: 250px !default;
 $o-mail-partner-avatar-size: 24px !default;
+$o-mail-partner-status-icon-size: 1.2em !default;
 // Needed because $border-radius variations are all set to 0 in enterprise.
 $o-mail-rounded-rectangle-border-radius-sm: .2rem !default;
 $o-mail-rounded-rectangle-border-radius-lg: 3 * $o-mail-rounded-rectangle-border-radius-sm !default;