diff --git a/scm-ui-components/packages/ui-components/src/navigation/NavLink.js b/scm-ui-components/packages/ui-components/src/navigation/NavLink.js
index 98c3138a8f..e1236371a8 100644
--- a/scm-ui-components/packages/ui-components/src/navigation/NavLink.js
+++ b/scm-ui-components/packages/ui-components/src/navigation/NavLink.js
@@ -1,5 +1,6 @@
 //@flow
 import * as React from "react";
+import classNames from "classnames";
 import {Link, Route} from "react-router-dom";
 
 // TODO mostly copy of PrimaryNavigationLink
@@ -28,7 +29,7 @@ class NavLink extends React.Component<Props> {
 
     let showIcon = null;
     if (icon) {
-      showIcon = (<><i className={icon} />{" "}</>);
+      showIcon = (<><i className={classNames(icon, "fa-fw")} />{" "}</>);
     }
 
     return (
diff --git a/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js b/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
index 0a6612a173..cdf92d068d 100644
--- a/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
+++ b/scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import { Link, Route } from "react-router-dom";
+import classNames from "classnames";
 
 type Props = {
   to: string,
@@ -37,7 +38,7 @@ class SubNavigation extends React.Component<Props> {
     return (
       <li>
         <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
-          <i className={defaultIcon} /> {label}
+          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
         </Link>
         {children}
       </li>