diff --git a/ui/cypress/e2e/collectors.test.ts b/ui/cypress/e2e/collectors.test.ts
index c0d0ab85dd..30bb2753ca 100644
--- a/ui/cypress/e2e/collectors.test.ts
+++ b/ui/cypress/e2e/collectors.test.ts
@@ -283,7 +283,7 @@ describe('Collectors', () => {
               cy.contains('Done')
                 .click()
                 .then(() => {
-                  cy.get('.icon.checkmark').should('exist')
+                  cy.get('.cf-icon.checkmark').should('exist')
                 })
             })
         })
@@ -292,21 +292,14 @@ describe('Collectors', () => {
       it('handles busted input', () => {
         // do nothing when clicking done with no urls
         cy.contains('Done').click()
-        cy.contains('Done').should('exist')
-        cy.contains('Nginx').should('exist')
+        cy.contains('nginx').should('exist')
+        cy.get('.cf-icon.circle-thick').should('exist')
 
+        cy.contains('nginx').click()
         cy.getByTestID('input-field').type('youre mom')
         cy.contains('Add').click()
-
-        cy.contains('youre mom')
-          .should('exist')
-          .then(() => {
-            cy.contains('Done')
-              .click()
-              .then(() => {
-                cy.get('.icon.remove').should('exist')
-              })
-          })
+        cy.contains('Done').click()
+        cy.get('.cf-icon.remove').should('exist')
       })
     })
 
@@ -345,7 +338,7 @@ describe('Collectors', () => {
               cy.contains('alan bean').should('not.exist')
 
               cy.contains('Done').click()
-              cy.get('.icon.checkmark').should('exist')
+              cy.get('.cf-icon.checkmark').should('exist')
             })
         })
       })
@@ -354,8 +347,7 @@ describe('Collectors', () => {
         cy.contains('Done')
           .click()
           .then(() => {
-            cy.contains('Done').should('exist')
-            cy.contains('Redis').should('exist')
+            cy.contains('redis').should('exist')
           })
       })
     })
diff --git a/ui/src/dataLoaders/components/side_bar/SideBarTab.tsx b/ui/src/dataLoaders/components/side_bar/SideBarTab.tsx
index b3a9d9ae22..3099da7fbe 100644
--- a/ui/src/dataLoaders/components/side_bar/SideBarTab.tsx
+++ b/ui/src/dataLoaders/components/side_bar/SideBarTab.tsx
@@ -3,7 +3,7 @@ import React, {Component} from 'react'
 import classnames from 'classnames'
 
 // Types
-import {IconFont} from 'src/clockface'
+import {Icon, IconFont} from '@influxdata/clockface'
 import {SideBarTabStatus as TabStatus} from 'src/dataLoaders/components/side_bar/SideBar'
 
 interface Props {
@@ -20,8 +20,9 @@ class SideBarTab extends Component<Props> {
 
     return (
       <div className={this.className} onClick={this.handleClick}>
-        {this.icon}
-        {label}
+        <pre>
+          {this.icon} {label}
+        </pre>
       </div>
     )
   }
@@ -45,24 +46,16 @@ class SideBarTab extends Component<Props> {
 
   private get icon(): JSX.Element {
     const {status} = this.props
-    let icon
 
     switch (status) {
       case TabStatus.Pending:
       case TabStatus.Success:
-        icon = `side-bar--icon icon ${IconFont.Checkmark}`
-        break
+        return <Icon glyph={IconFont.Checkmark} />
       case TabStatus.Error:
-        icon = `side-bar--icon icon ${IconFont.Remove}`
-        break
-      case TabStatus.Default:
-        icon = `side-bar--icon icon ${IconFont.CircleThick}`
-        break
+        return <Icon glyph={IconFont.Remove} />
       default:
-        icon = `side-bar--icon`
+        return <Icon glyph={IconFont.CircleThick} />
     }
-
-    return <span className={icon} />
   }
 }