diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
index dd5b91c25e..91e8c8f3a4 100755
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
@@ -37,7 +37,7 @@ const defaultProps = {
 };
 
 const { animations } = Settings.application;
-const { isChrome, isFirefox, isEdge } = browserInfo;
+const { isSafari } = browserInfo;
 
 const UserAvatar = ({
   children,
@@ -70,10 +70,7 @@ const UserAvatar = ({
         listenOnly={listenOnly}
         voice={voice}
         noVoice={noVoice && !listenOnly}
-        isChrome={isChrome}
-        isFirefox={isFirefox}
-        isEdge={isEdge}
-        className={className}
+        isSafari={isSafari}
         style={{
           backgroundColor: color,
           color, // We need the same color on both for the border
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
index ddf31d3ce4..511b5477cc 100644
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
@@ -118,7 +118,7 @@ const Avatar = styled.div`
     width: 0;
     height: 0;
     padding-top: .5rem;
-    padding-right: 0;
+    padding-right: ${({ isSafari }) => isSafari ? '.6rem' : '0'};
     padding-left: 0;
     padding-bottom: 0;
     color: inherit;
@@ -158,7 +158,6 @@ const Avatar = styled.div`
   ${({ presenter }) => presenter && `
     &:before {
       content: "\\00a0\\e90b\\00a0";
-      padding: ${mdPaddingY} !important;
       opacity: 1;
       top: ${userIndicatorsOffset};
       left: ${userIndicatorsOffset};
@@ -166,6 +165,8 @@ const Avatar = styled.div`
       right: auto;
       border-radius: 5px;
       background-color: ${colorPrimary};
+      height: 1.2rem;
+      width: 1.2rem;
 
       [dir="rtl"] & {
         left: auto;
@@ -175,18 +176,9 @@ const Avatar = styled.div`
     }
   `}
 
-  ${({
-    presenter, isChrome, isFirefox, isEdge,
-  }) => presenter && (isChrome || isFirefox || isEdge) && `
-    &:before {
-      padding: ${indicatorPadding} !important;
-    }
-  `}
-
   ${({ whiteboardAccess }) => whiteboardAccess && `
     &:before {
       content: "\\00a0\\e925\\00a0";
-      padding: ${mdPaddingY} !important;
       border-radius: 50% !important;
       opacity: 1;
       top: ${userIndicatorsOffset};
@@ -195,6 +187,8 @@ const Avatar = styled.div`
       right: auto;
       border-radius: 5px;
       background-color: ${colorPrimary};
+      height: 1.2rem;
+      width: 1.2rem;
 
       [dir="rtl"] & {
         left: auto;
@@ -205,14 +199,6 @@ const Avatar = styled.div`
     }
   `}
 
-  ${({
-    whiteboardAccess, isChrome, isFirefox, isEdge,
-  }) => whiteboardAccess && (isChrome || isFirefox || isEdge) && `
-    &:before {
-      padding: ${indicatorPadding};
-    }
-  `}
-
   ${({ voice }) => voice && `
     &:after {
       content: "\\00a0\\e931\\00a0";