diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx
new file mode 100644
index 00000000000..17f8cf93c95
--- /dev/null
+++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx
@@ -0,0 +1,48 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@leafygreen-ui/icon';
+
+import { TIME_SERIES_COLLECTION_TYPE } from '../../modules/collection';
+
+import styles from './collection-type-icon.less';
+
+const VIEW_COLLECTION_TYPE = 'view';
+
+function CollectionTypeIcon({
+  collectionType
+}) {
+  if (collectionType === TIME_SERIES_COLLECTION_TYPE) {
+    return (
+      <Icon
+        className={styles['compass-sidebar-collection-type-icon']}
+        glyph="TimeSeries"
+        title="Time-Series Collection"
+      />
+    );
+  }
+
+  if (collectionType === VIEW_COLLECTION_TYPE) {
+    return (
+      <Icon
+        className={styles['compass-sidebar-collection-type-icon']}
+        glyph="Visibility"
+        title="Read-only View"
+      />
+    );
+  }
+
+  return (
+    <Icon
+      className={styles['compass-sidebar-collection-type-icon']}
+      glyph="Folder"
+      title="Collection"
+    />
+  );
+}
+
+CollectionTypeIcon.propTypes = {
+  collectionType: PropTypes.string.isRequired
+};
+
+export default CollectionTypeIcon;
diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less
new file mode 100644
index 00000000000..669970fd80c
--- /dev/null
+++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less
@@ -0,0 +1,4 @@
+.compass-sidebar-collection-type-icon {
+  vertical-align: sub;
+  margin-right: 8px;
+}
\ No newline at end of file
diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js
new file mode 100644
index 00000000000..e7bd59784cf
--- /dev/null
+++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Icon from '@leafygreen-ui/icon';
+
+import CollectionTypeIcon from '../collection-type-icon';
+
+describe('CollectionTypeIcon [Component]', () => {
+  let component;
+
+  describe('default collection type', () => {
+    beforeEach(() => {
+      component = mount(<CollectionTypeIcon
+        collectionType="collection"
+      />);
+    });
+
+    it('has a collection type icon folder', () => {
+      expect(component.find(Icon).props().glyph).to.equal('Folder');
+    });
+  });
+
+  describe('time-series collection type', () => {
+    beforeEach(() => {
+      component = mount(<CollectionTypeIcon
+        collectionType="timeseries"
+      />);
+    });
+
+    it('has a time series icon', () => {
+      expect(component.find(Icon).props().glyph).to.equal('TimeSeries');
+    });
+  });
+
+  describe('view collection type', () => {
+    beforeEach(() => {
+      component = mount(<CollectionTypeIcon
+        collectionType="view"
+      />);
+    });
+
+    it('has a view icon', () => {
+      expect(component.find(Icon).props().glyph).to.equal('Visibility');
+    });
+  });
+});
diff --git a/packages/compass-sidebar/src/components/collection-type-icon/index.js b/packages/compass-sidebar/src/components/collection-type-icon/index.js
new file mode 100644
index 00000000000..bf8353a6329
--- /dev/null
+++ b/packages/compass-sidebar/src/components/collection-type-icon/index.js
@@ -0,0 +1,2 @@
+import ColletionTypeIcon from './collection-type-icon';
+export default ColletionTypeIcon;
diff --git a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
index 01107e65393..ca65b663e01 100644
--- a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
@@ -3,14 +3,12 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { DropdownButton, MenuItem } from 'react-bootstrap';
 import toNS from 'mongodb-ns';
-import Icon from '@leafygreen-ui/icon';
 
-import { collectionMetadata, getSource, TIME_SERIES_COLLECTION_TYPE } from '../../modules/collection';
+import { collectionMetadata, getSource } from '../../modules/collection';
+import CollectionTypeIcon from '../collection-type-icon';
 
 import styles from './sidebar-collection.less';
 
-const DEFAULT_COLLECTION_TYPE = 'collection';
-
 class SidebarCollection extends PureComponent {
   static displayName = 'SidebarCollection';
   static propTypes = {
@@ -138,41 +136,6 @@ class SidebarCollection extends PureComponent {
     }
   }
 
-  renderCollectionIcon() {
-    return (
-      <Icon
-        className={styles['compass-sidebar-collection-type-icon']}
-        glyph="Folder"
-        title="Collection"
-      />
-    );
-  }
-
-  /**
-   * Render the readonly icon.
-   *
-   * @returns {Component} The component.
-   */
-  renderViewIcon() {
-    return (
-      <Icon
-        className={styles['compass-sidebar-collection-type-icon']}
-        glyph="Visibility"
-        title="Read-only View"
-      />
-    );
-  }
-
-  renderTimeSeriesIcon() {
-    return (
-      <Icon
-        className={styles['compass-sidebar-collection-type-icon']}
-        glyph="TimeSeries"
-        title="Time-Series Collection"
-      />
-    );
-  }
-
   /**
    * Render the view contextual menu.
    *
@@ -241,9 +204,9 @@ class SidebarCollection extends PureComponent {
           data-test-id="sidebar-collection"
           title={this.props._id}
         >
-          {this.props.type === DEFAULT_COLLECTION_TYPE && this.renderCollectionIcon()}
-          {this.props.readonly && this.renderViewIcon()}
-          {this.props.type === TIME_SERIES_COLLECTION_TYPE && this.renderTimeSeriesIcon()}
+          <CollectionTypeIcon
+            collectionType={this.props.type}
+          />
           {collectionName}
         </div>
         <div
diff --git a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.less b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.less
index db8d5f137a7..ef8d8983b4a 100644
--- a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.less
+++ b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.less
@@ -26,11 +26,6 @@
   }
 }
 
-.compass-sidebar-collection-type-icon {
-  vertical-align: sub;
-  margin-right: 8px;
-}
-
 .compass-sidebar-item {
   display: flex;
   flex-wrap: nowrap;