diff --git a/addon/components/docs-header/component.js b/addon/components/docs-header/component.js
index 3b1ba0b47..6fc6f0468 100644
--- a/addon/components/docs-header/component.js
+++ b/addon/components/docs-header/component.js
@@ -3,6 +3,7 @@ import layout from './template';
 import config from 'dummy/config/environment';
 import { computed } from '@ember/object';
 import { classify } from '@ember/string';
+import { addonLogo } from 'ember-cli-addon-docs/utils/computed';
 
 const packageJson = config['ember-cli-addon-docs'].packageJson;
 
@@ -32,22 +33,9 @@ export default Component.extend({
 
   packageJson: packageJson,
 
-  addonLogo: computed(function() {
-    let name = packageJson.name;
-    let logo;
-
-    if (name.match('ember-cli-')) {
-      logo = 'ember-cli';
-    } else if (name.match('ember-data-')) {
-      logo = 'ember-data';
-    } else if (name.match('ember-data-')) {
-      logo = 'ember';
-    }
-
-    return logo;
-  }),
+  logo: addonLogo(packageJson),
 
-  addonName: computed(function() {
+  name: computed(function() {
     let name = packageJson.name;
     name = name.replace('ember-data-', '');
     name = name.replace('ember-cli-', '');
diff --git a/addon/components/docs-header/template.hbs b/addon/components/docs-header/template.hbs
index 58fa12278..f5e2ed3ef 100644
--- a/addon/components/docs-header/template.hbs
+++ b/addon/components/docs-header/template.hbs
@@ -4,10 +4,10 @@
       <div class="text-center text-xs">
         {{#if logo}}
           <div class='h-4 pb-1'>
-            {{docs-logo logo=addonLogo}}
+            {{docs-logo logo=logo}}
           </div>
         {{/if}}
-        <span class='font-medium normal-case block -mt-2px'>{{addonName}}</span>
+        <span class='font-medium normal-case block -mt-2px'>{{name}}</span>
       </div>
     {{/docs-header/link}}
 
diff --git a/addon/components/docs-viewer/x-nav/component.js b/addon/components/docs-viewer/x-nav/component.js
index e44ff1b9f..9fc5c62bc 100644
--- a/addon/components/docs-viewer/x-nav/component.js
+++ b/addon/components/docs-viewer/x-nav/component.js
@@ -4,6 +4,7 @@ import Component from '@ember/component';
 import layout from './template';
 import config from 'dummy/config/environment';
 import { classify } from '@ember/string';
+import { addonLogo } from 'ember-cli-addon-docs/utils/computed';
 
 const packageJson = config['ember-cli-addon-docs'].packageJson;
 
@@ -17,19 +18,7 @@ export default Component.extend({
   store: service(),
   packageJson,
 
-  addonLogo: computed(function() {
-    let name = packageJson.name;
-    let logo;
-    if (name.match(/ember-cli/)) {
-      logo = 'ember-cli';
-    } else if (name.match(/ember-data/)) {
-      logo = 'ember-data';
-    } else {
-      logo = 'ember';
-    }
-
-    return logo;
-  }),
+  addonLogo: addonLogo(packageJson),
 
   addonTitle: computed('addonLogo', function() {
     let logo = this.get('addonLogo');
diff --git a/addon/utils/computed.js b/addon/utils/computed.js
index 91bc639c1..c45dc8090 100644
--- a/addon/utils/computed.js
+++ b/addon/utils/computed.js
@@ -111,3 +111,21 @@ export function hasMemberType(...memberKeys) {
   });
 }
 
+/**
+  @hide
+*/
+export function addonLogo(packageJson) {
+  return computed(function() {
+    let name = packageJson.name;
+    let logo;
+    if (name.match(/ember-cli/)) {
+      logo = 'ember-cli';
+    } else if (name.match(/ember-data/)) {
+      logo = 'ember-data';
+    } else {
+      logo = 'ember';
+    }
+
+    return logo;
+  });
+}