diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
index c93b9decf15373a6b2918689f36780cf384a03ac..312033fdaf19aa71e74b1c9e1b204b40faa1de5f 100644
--- a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
@@ -127,7 +127,7 @@ export default injectIntl(withTracker(({ intl }) => {
     const { effectiveConnectionType } = user;
     if (SLOW_CONNECTIONS_TYPES.includes(effectiveConnectionType)) {
       data.message = (
-        <SlowConnection>
+        <SlowConnection effectiveConnectionType={effectiveConnectionType}>
           {intl.formatMessage(intlMessages.slowEffectiveConnectionDetected)}
           <a href={HELP_LINK} target="_blank" rel="noopener noreferrer">
             {intl.formatMessage(intlMessages.slowEffectiveConnectionHelpLink)}
diff --git a/bigbluebutton-html5/imports/ui/components/slow-connection/component.jsx b/bigbluebutton-html5/imports/ui/components/slow-connection/component.jsx
index 1c1cd3e4b5fa6cec669b9d4a6250f16b338107ed..ef494623b93c928dd736785b6e2a683270ab7c08 100644
--- a/bigbluebutton-html5/imports/ui/components/slow-connection/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/slow-connection/component.jsx
@@ -1,15 +1,32 @@
 import React, { Fragment } from 'react';
-import Icon from '/imports/ui/components/icon/component';
+import cx from 'classnames';
+import { styles } from './styles';
 
-const SlowConnection = (props) => {
-  const { children, iconOnly } = props;
-
-  return (
-    <Fragment>
-      <Icon iconName="network" />
-      {!iconOnly ? (<span>{children}</span>) : null}
-    </Fragment>
-  );
+const SLOW_CONNECTIONS_TYPES = {
+  'slow-2g': {
+    level: styles.bad,
+    bars: styles.oneBar,
+  },
+  '2g': {
+    level: styles.bad,
+    bars: styles.twoBars,
+  },
+  '3g': {
+    level: styles.warning,
+    bars: styles.threeBars,
+  },
 };
 
+const SlowConnection = ({ children, effectiveConnectionType, iconOnly }) => (
+  <Fragment>
+    <div className={cx(styles.signalBars, styles.sizingBox, SLOW_CONNECTIONS_TYPES[effectiveConnectionType].level, SLOW_CONNECTIONS_TYPES[effectiveConnectionType].bars)}>
+      <div className={cx(styles.firstBar, styles.bar)} />
+      <div className={cx(styles.secondBar, styles.bar)} />
+      <div className={cx(styles.thirdBar, styles.bar)} />
+      <div className={cx(styles.fourthBar, styles.bar)} />
+    </div>
+    {!iconOnly ? (<span>{children}</span>) : null}
+  </Fragment>
+);
+
 export default SlowConnection;
diff --git a/bigbluebutton-html5/imports/ui/components/slow-connection/styles.scss b/bigbluebutton-html5/imports/ui/components/slow-connection/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7360ee18a1d91dad85b0439f684737486a3e29f1
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/slow-connection/styles.scss
@@ -0,0 +1,34 @@
+.sizingBox {
+  width: 27px;
+  height: 15px;
+  box-sizing: border-box;
+}
+
+.signalBars {
+  display: inline-block;
+}
+
+.signalBars .bar {
+  width: 4px;
+  margin-left: 1px;
+  display: inline-block;
+}
+.signalBars .bar.firstBar  { height: 25%; }
+.signalBars .bar.secondBar { height: 50%; }
+.signalBars .bar.thirdBar  { height: 75%; }
+.signalBars .bar.fourthBar { height: 100%; }
+
+.bad .bar {
+  background-color: #e74c3c;
+}
+.warning .bar {
+  background-color: #f1c40f;
+}
+
+.fourBars .bar.fifthBar,
+.threeBars .bar.fifthBar,
+.threeBars .bar.fourthBar,
+.oneBar .bar:not(.firstBar),
+.twoBars .bar:not(.firstBar):not(.secondBar) {
+  background-color: #c3c3c3;
+}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/component.jsx
index da5a3c774d45974b4b0b542bddc9ebb3841697fd..dc50a5b67e6c2f5f5c837ec749baa3eb93d24292 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/component.jsx
@@ -37,7 +37,7 @@ const UserIcons = (props) => {
       {
         SLOW_CONNECTIONS_TYPES.includes(effectiveConnectionType) ? (
           <span className={styles.userIconsContainer}>
-            <SlowConnection iconOnly />
+            <SlowConnection effectiveConnectionType={effectiveConnectionType} iconOnly />
           </span>
         ) : null
       }