diff --git a/css/_participants-pane.scss b/css/_participants-pane.scss
index 3bc548a4e..32ca61f7e 100644
--- a/css/_participants-pane.scss
+++ b/css/_participants-pane.scss
@@ -25,10 +25,6 @@
     }
 }
 
-.participant-avatar {
-    margin: 8px 16px 8px 0;
-}
-
 @media (max-width: 580px) {
     .participants_pane {
         height: 100vh;
diff --git a/react/features/base/ui/constants.js b/react/features/base/ui/constants.js
index 76f89997e..9e64d22ae 100644
--- a/react/features/base/ui/constants.js
+++ b/react/features/base/ui/constants.js
@@ -9,6 +9,7 @@ export const commonClassName = {
     emptyList: 'empty-list',
     overflowMenuItem: 'overflow-menu-item',
     overflowMenuItemIcon: 'overflow-menu-item-icon',
+    participantAvatar: 'participant-avatar',
     toolboxIcon: 'toolbox-icon',
     toolboxButton: 'toolbox-button',
     toolboxContentItems: 'toolbox-content-items'
@@ -96,6 +97,9 @@ export const commonStyles = (theme: Object) => {
                 width: 20
             }
         },
+        [commonClassName.participantAvatar]: {
+            margin: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} 0`
+        },
         [commonClassName.toolboxIcon]: {
             display: 'flex',
             borderRadius: 3,