diff --git a/CHANGELOG.md b/CHANGELOG.md
index db4d6bcf..5626ba9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### 6.3.7 (2022-09-26)
+
+- [842](https://github.com/influxdata/clockface/pull/842): Labels for Navigation Icons
+
 ### 6.3.6 (2022-09-22)
 
 - [841](https://github.com/influxdata/clockface/pull/841): Inject @charset: UTF-8 into built CSS
diff --git a/package.json b/package.json
index d120e859..2968a337 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/clockface",
-  "version": "6.3.6",
+  "version": "6.3.7",
   "license": "MIT",
   "main": "dist/index.js",
   "style": "dist/index.css",
diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss
index 4bc899d0..a40e1afe 100644
--- a/src/Components/TreeNav/TreeNav.scss
+++ b/src/Components/TreeNav/TreeNav.scss
@@ -32,7 +32,7 @@
   }
 }
 
-$cf-tree-nav__header-height: 60px;
+$cf-tree-nav__header-height: 70px;
 
 .cf-tree-nav--menu {
   position: absolute;
@@ -263,6 +263,7 @@ a.cf-tree-nav--item-block:active {
   &:focus {
     color: $cf-tree-nav__text-hover;
   }
+  margin-left: 5px;
 }
 
 .cf-tree-nav--square {
@@ -271,6 +272,7 @@ a.cf-tree-nav--item-block:active {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 
   .cf-icon {
     font-size: 1.5em;
diff --git a/src/Components/TreeNav/TreeNavItem.tsx b/src/Components/TreeNav/TreeNavItem.tsx
index 2606acf0..8581f1fd 100644
--- a/src/Components/TreeNav/TreeNavItem.tsx
+++ b/src/Components/TreeNav/TreeNavItem.tsx
@@ -20,6 +20,7 @@ export interface TreeNavItemProps extends Omit<StandardFunctionProps, 'id'> {
   active?: boolean
   /** Optional link element. Will override onClick prop */
   linkElement?: RenderLinkElement
+  isTreeNavCollapsed?: boolean
 }
 
 export type TreeNavItemRef = HTMLButtonElement
@@ -37,6 +38,8 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
       children = null,
       className,
       linkElement,
+      shortLabel,
+      isTreeNavCollapsed = true,
     },
     ref
   ) => {
@@ -54,7 +57,21 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
     if (linkElement) {
       const linkItems = (
         <>
-          <div className="cf-tree-nav--square">{icon}</div>
+          <div className="cf-tree-nav--square">
+            {icon}
+            {isTreeNavCollapsed && (
+              <span
+                style={{
+                  fontSize: '9px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                className={'cf-tree-nav--short-label'}
+              >
+                {shortLabel}
+              </span>
+            )}
+          </div>
           <div className="cf-tree-nav--label">{label}</div>
         </>
       )
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a57f85e6..1844ef19 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -372,7 +372,7 @@ $cf-overlay--mask-z: 10;
    -----------------------------------------------------------------------------
 */
 
-$cf-tree-nav__width: 60px;
+$cf-tree-nav__width: 70px;
 $cf-tree-nav__expanded-width: 260px;
 $cf-tree-nav__small-height: 44px;