diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
index 19ef839ff8..f6cc2689e1 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
@@ -140,16 +140,6 @@
         fill: currentColor;
     }
 
-    &__icon {
-        display: inline-flex;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        font-family: "compass-icons";
-        font-size: 18px;
-    }
-
     &__cell {
         position: relative;
         display: flex;
diff --git a/webapp/channels/src/components/announcement_bar/__snapshots__/text_dismissable_bar.test.tsx.snap b/webapp/channels/src/components/announcement_bar/__snapshots__/text_dismissable_bar.test.tsx.snap
index 2afa084b99..4f661ef9bc 100644
--- a/webapp/channels/src/components/announcement_bar/__snapshots__/text_dismissable_bar.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/__snapshots__/text_dismissable_bar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`components/TextDismissableBar should match snapshot 1`] = `
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="sample text"
@@ -32,7 +32,7 @@ exports[`components/TextDismissableBar should match snapshot, with an internal a
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/) with an internal url and a [link](http://other-url.com/admin_console/) with an external url"
@@ -58,7 +58,7 @@ exports[`components/TextDismissableBar should match snapshot, with an internal u
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/) with an internal url"
@@ -84,7 +84,7 @@ exports[`components/TextDismissableBar should match snapshot, with ean external
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://otherurl.com/admin_console/) with an external url"
@@ -110,7 +110,7 @@ exports[`components/TextDismissableBar should match snapshot, with link but with
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/)"
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index ea06463e5f..9660682e19 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -164,7 +164,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
 
         const announcementIcon = () => {
             return this.props.showLinkAsButton &&
-            (this.props.showCloseButton ? <div className='content__icon'>{'\uF5D6'}</div> : <div className='content__icon'>{'\uF02A'}</div>);
+            (this.props.showCloseButton ? <i className='icon icon-alert-circle-outline'/> : <i className='icon icon-alert-outline'/>);
         };
 
         return (
diff --git a/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx b/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
index fb98c017b5..16477b5048 100644
--- a/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
@@ -67,7 +67,7 @@ export default class TextDismissableBar extends React.PureComponent<Props, State
                 handleClose={this.handleDismiss}
                 message={
                     <>
-                        <i className='icon-information-outline'/>
+                        <i className='icon icon-information-outline'/>
                         {typeof text === 'string' ? (
                             <Markdown
                                 message={text}
diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.scss b/webapp/channels/src/components/status_dropdown/status_dropdown.scss
index 0facf11388..a95f9281ee 100644
--- a/webapp/channels/src/components/status_dropdown/status_dropdown.scss
+++ b/webapp/channels/src/components/status_dropdown/status_dropdown.scss
@@ -160,11 +160,6 @@ button.custom_status__row {
     padding: 4px 8px;
     border-radius: 4px;
 
-    .icon > i:not(.status-icon) {
-        color: rgba(var(--center-channel-color-rgb), 0.64);
-        font-family: "compass-icons";
-    }
-
     &:hover {
         background: var(--sidebar-text-08);
         cursor: pointer;
diff --git a/webapp/channels/src/sass/components/_announcement-bar.scss b/webapp/channels/src/sass/components/_announcement-bar.scss
index f1c04e489b..2eabfc4fac 100644
--- a/webapp/channels/src/sass/components/_announcement-bar.scss
+++ b/webapp/channels/src/sass/components/_announcement-bar.scss
@@ -87,10 +87,7 @@
         content: "\00a0 ";
     }
 
-    .content__icon,
-    i {
-        margin-right: 4px;
-        font-family: 'compass-icons';
+    .icon {
         font-size: 16px;
     }