diff --git a/src/main/frontend/src/components/Link.js b/src/main/frontend/src/components/Link.js
index b39901c..ca63ae1 100644
--- a/src/main/frontend/src/components/Link.js
+++ b/src/main/frontend/src/components/Link.js
@@ -17,8 +17,33 @@
 import React from 'react';
 import {Link as OriginalRouterLink} from 'react-router-dom';
 import {uid} from '../metadata';
-import {Icon} from './';
-import i from './icons';
+import {
+  Icon,
+  EndpointsIcon,
+  ClusterRoleIcon,
+  ClusterRoleBindingIcon,
+  ConfigMapIcon,
+  CronJobIcon,
+  CustomResourceDefinitionIcon,
+  DaemonSetIcon,
+  DeploymentIcon,
+  DeploymentConfigIcon,
+  HorizontalPodAutoscalerIcon,
+  IngressIcon,
+  JobIcon,
+  NamespaceIcon,
+  NodeIcon,
+  PersistentVolumeIcon,
+  PersistentVolumeClaimIcon,
+  PodIcon,
+  ReplicaSetIcon,
+  RoleIcon,
+  RouteIcon,
+  SecretIcon,
+  ServiceIcon,
+  ServiceAccountIcon,
+  StatefulSetIcon
+} from './';
 
 const variants = {
   none: '',
@@ -95,64 +120,66 @@ Link.ResourceLink = ({
 );
 
 Link.ClusterRole = ({...props}) => (
-  <Link.ResourceLink Icon={i.ClusterRole} {...props} />
+  <Link.ResourceLink Icon={ClusterRoleIcon} {...props} />
 );
 Link.ClusterRoleBinding = ({...props}) => (
-  <Link.ResourceLink Icon={i.ClusterRoleBinding} {...props} />
+  <Link.ResourceLink Icon={ClusterRoleBindingIcon} {...props} />
 );
 Link.ConfigMap = ({...props}) => (
-  <Link.ResourceLink Icon={i.ConfigMap} {...props} />
+  <Link.ResourceLink Icon={ConfigMapIcon} {...props} />
 );
 Link.CronJob = ({...props}) => (
-  <Link.ResourceLink Icon={i.CronJob} {...props} />
+  <Link.ResourceLink Icon={CronJobIcon} {...props} />
 );
 Link.CustomResourceDefinition = ({...props}) => (
-  <Link.ResourceLink Icon={i.CustomResourceDefinition} {...props} />
+  <Link.ResourceLink Icon={CustomResourceDefinitionIcon} {...props} />
 );
 Link.DaemonSet = ({...props}) => (
-  <Link.ResourceLink Icon={i.DaemonSet} {...props} />
+  <Link.ResourceLink Icon={DaemonSetIcon} {...props} />
 );
 Link.DeploymentConfig = ({...props}) => (
-  <Link.ResourceLink Icon={i.DeploymentConfig} {...props} />
+  <Link.ResourceLink Icon={DeploymentConfigIcon} {...props} />
 );
 Link.Deployment = ({...props}) => (
-  <Link.ResourceLink Icon={i.Deployment} {...props} />
+  <Link.ResourceLink Icon={DeploymentIcon} {...props} />
 );
 Link.Endpoints = ({...props}) => (
-  <Link.ResourceLink Icon={i.Endpoints} {...props} />
+  <Link.ResourceLink Icon={EndpointsIcon} {...props} />
 );
 Link.HorizontalPodAutoscaler = ({...props}) => (
-  <Link.ResourceLink Icon={i.HorizontalPodAutoscaler} {...props} />
+  <Link.ResourceLink Icon={HorizontalPodAutoscalerIcon} {...props} />
 );
 Link.Ingress = ({...props}) => (
-  <Link.ResourceLink Icon={i.Ingress} {...props} />
+  <Link.ResourceLink Icon={IngressIcon} {...props} />
 );
-Link.Job = ({...props}) => <Link.ResourceLink Icon={i.Job} {...props} />;
+Link.Job = ({...props}) => <Link.ResourceLink Icon={JobIcon} {...props} />;
 Link.Namespace = ({...props}) => (
-  <Link.ResourceLink Icon={i.Namespace} {...props} />
+  <Link.ResourceLink Icon={NamespaceIcon} {...props} />
 );
-Link.Node = ({...props}) => <Link.ResourceLink Icon={i.Node} {...props} />;
+Link.Node = ({...props}) => <Link.ResourceLink Icon={NodeIcon} {...props} />;
 Link.PersistentVolume = ({...props}) => (
-  <Link.ResourceLink Icon={i.PersistentVolume} {...props} />
+  <Link.ResourceLink Icon={PersistentVolumeIcon} {...props} />
 );
 Link.PersistentVolumeClaim = ({...props}) => (
-  <Link.ResourceLink Icon={i.PersistentVolumeClaim} {...props} />
+  <Link.ResourceLink Icon={PersistentVolumeClaimIcon} {...props} />
 );
-Link.Pod = ({...props}) => <Link.ResourceLink Icon={i.Pod} {...props} />;
+Link.Pod = ({...props}) => <Link.ResourceLink Icon={PodIcon} {...props} />;
 Link.ReplicationController = ({...props}) => (
-  <Link.ResourceLink Icon={i.ReplicaSet} {...props} />
+  <Link.ResourceLink Icon={ReplicaSetIcon} {...props} />
+);
+Link.Role = ({...props}) => <Link.ResourceLink Icon={RoleIcon} {...props} />;
+Link.Route = ({...props}) => <Link.ResourceLink Icon={RouteIcon} {...props} />;
+Link.Secret = ({...props}) => (
+  <Link.ResourceLink Icon={SecretIcon} {...props} />
 );
-Link.Role = ({...props}) => <Link.ResourceLink Icon={i.Role} {...props} />;
-Link.Route = ({...props}) => <Link.ResourceLink Icon={i.Route} {...props} />;
-Link.Secret = ({...props}) => <Link.ResourceLink Icon={i.Secret} {...props} />;
 Link.Service = ({...props}) => (
-  <Link.ResourceLink Icon={i.Service} {...props} />
+  <Link.ResourceLink Icon={ServiceIcon} {...props} />
 );
 Link.ServiceAccount = ({...props}) => (
-  <Link.ResourceLink Icon={i.ServiceAccount} {...props} />
+  <Link.ResourceLink Icon={ServiceAccountIcon} {...props} />
 );
 Link.StatefulSet = ({...props}) => (
-  <Link.ResourceLink Icon={i.StatefulSet} {...props} />
+  <Link.ResourceLink Icon={StatefulSetIcon} {...props} />
 );
 
 Link.EditLink = ({path, resource, ...props}) => (
diff --git a/src/main/frontend/src/components/StatusCard.js b/src/main/frontend/src/components/StatusCard.js
index 4691bd1..133639b 100644
--- a/src/main/frontend/src/components/StatusCard.js
+++ b/src/main/frontend/src/components/StatusCard.js
@@ -16,8 +16,7 @@
  */
 import React from 'react';
 import {useNavigate} from 'react-router-dom';
-import {Tooltip} from './';
-import icons from '../components/icons';
+import {Tooltip, KubernetesIcon} from './';
 
 const Progress = ({
   bg = 'bg-orange-400',
@@ -50,7 +49,7 @@ const Progress = ({
 
 export const StatusCard = ({
   header,
-  Icon = icons.k8s,
+  Icon = KubernetesIcon,
   ready = 0,
   succeeded = 0,
   total = 0,
diff --git a/src/main/frontend/src/components/icons/ClusterRoleBinding.js b/src/main/frontend/src/components/icons/ClusterRoleBindingIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/ClusterRoleBinding.js
rename to src/main/frontend/src/components/icons/ClusterRoleBindingIcon.js
index 5a06b81..3776944 100644
--- a/src/main/frontend/src/components/icons/ClusterRoleBinding.js
+++ b/src/main/frontend/src/components/icons/ClusterRoleBindingIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const ClusterRoleBinding = ({...props}) => (
+export const ClusterRoleBindingIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -45,5 +45,3 @@ const ClusterRoleBinding = ({...props}) => (
     />
   </svg>
 );
-
-export default ClusterRoleBinding;
diff --git a/src/main/frontend/src/components/icons/ClusterRole.js b/src/main/frontend/src/components/icons/ClusterRoleIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/ClusterRole.js
rename to src/main/frontend/src/components/icons/ClusterRoleIcon.js
index 92873a0..465eded 100644
--- a/src/main/frontend/src/components/icons/ClusterRole.js
+++ b/src/main/frontend/src/components/icons/ClusterRoleIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const ClusterRole = ({...props}) => (
+export const ClusterRoleIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -46,5 +46,3 @@ const ClusterRole = ({...props}) => (
     </g>
   </svg>
 );
-
-export default ClusterRole;
diff --git a/src/main/frontend/src/components/icons/ConfigMap.js b/src/main/frontend/src/components/icons/ConfigMapIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/ConfigMap.js
rename to src/main/frontend/src/components/icons/ConfigMapIcon.js
index d56e014..2a530ed 100644
--- a/src/main/frontend/src/components/icons/ConfigMap.js
+++ b/src/main/frontend/src/components/icons/ConfigMapIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const ConfigMap = ({...props}) => (
+export const ConfigMapIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -67,5 +67,3 @@ const ConfigMap = ({...props}) => (
     </g>
   </svg>
 );
-
-export default ConfigMap;
diff --git a/src/main/frontend/src/components/icons/CronJob.js b/src/main/frontend/src/components/icons/CronJobIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/CronJob.js
rename to src/main/frontend/src/components/icons/CronJobIcon.js
index 5df41ec..a797967 100644
--- a/src/main/frontend/src/components/icons/CronJob.js
+++ b/src/main/frontend/src/components/icons/CronJobIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const CronJob = ({...props}) => (
+export const CronJobIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -49,5 +49,3 @@ const CronJob = ({...props}) => (
     </g>
   </svg>
 );
-
-export default CronJob;
diff --git a/src/main/frontend/src/components/icons/CustomResourceDefinition.js b/src/main/frontend/src/components/icons/CustomResourceDefinitionIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/CustomResourceDefinition.js
rename to src/main/frontend/src/components/icons/CustomResourceDefinitionIcon.js
index cf873c1..42c1534 100644
--- a/src/main/frontend/src/components/icons/CustomResourceDefinition.js
+++ b/src/main/frontend/src/components/icons/CustomResourceDefinitionIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const CustomResourceDefinition = ({...props}) => (
+export const CustomResourceDefinitionIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -45,5 +45,3 @@ const CustomResourceDefinition = ({...props}) => (
     />
   </svg>
 );
-
-export default CustomResourceDefinition;
diff --git a/src/main/frontend/src/components/icons/DaemonSet.js b/src/main/frontend/src/components/icons/DaemonSetIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/DaemonSet.js
rename to src/main/frontend/src/components/icons/DaemonSetIcon.js
index 569b86b..9856c69 100644
--- a/src/main/frontend/src/components/icons/DaemonSet.js
+++ b/src/main/frontend/src/components/icons/DaemonSetIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const DaemonSet = ({...props}) => (
+export const DaemonSetIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -81,5 +81,3 @@ const DaemonSet = ({...props}) => (
     </g>
   </svg>
 );
-
-export default DaemonSet;
diff --git a/src/main/frontend/src/components/icons/Deployment.js b/src/main/frontend/src/components/icons/DeploymentIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/Deployment.js
rename to src/main/frontend/src/components/icons/DeploymentIcon.js
index c9d4255..e036706 100644
--- a/src/main/frontend/src/components/icons/Deployment.js
+++ b/src/main/frontend/src/components/icons/DeploymentIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Deployment = ({kubernetesColor = '#326ce5', ...props}) => (
+export const DeploymentIcon = ({kubernetesColor = '#326ce5', ...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -45,5 +45,3 @@ const Deployment = ({kubernetesColor = '#326ce5', ...props}) => (
     </g>
   </svg>
 );
-
-export default Deployment;
diff --git a/src/main/frontend/src/components/icons/Endpoints.js b/src/main/frontend/src/components/icons/EndpointsIcon.js
similarity index 99%
rename from src/main/frontend/src/components/icons/Endpoints.js
rename to src/main/frontend/src/components/icons/EndpointsIcon.js
index f5c1f6d..f87ae41 100644
--- a/src/main/frontend/src/components/icons/Endpoints.js
+++ b/src/main/frontend/src/components/icons/EndpointsIcon.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const Endpoints = props => (
+export const EndpointsIcon = props => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M-6.85 4.272a1.12 1.11 0 0 0-.428.109l-5.852 2.796a1.12 1.11 0 0 0-.606.753l-1.444 6.282a1.12 1.11 0 0 0 .152.85 1.12 1.11 0 0 0 .064.089l4.05 5.037a1.12 1.11 0 0 0 .876.417l6.496-.001a1.12 1.11 0 0 0 .875-.417l4.049-5.038a1.12 1.11 0 0 0 .216-.939L.152 7.93a1.12 1.11 0 0 0-.605-.753L-6.307 4.38a1.12 1.11 0 0 0-.542-.109Z'
diff --git a/src/main/frontend/src/components/icons/HorizontalPodAutoscaler.js b/src/main/frontend/src/components/icons/HorizontalPodAutoscalerIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/HorizontalPodAutoscaler.js
rename to src/main/frontend/src/components/icons/HorizontalPodAutoscalerIcon.js
index 46dc633..1cf771f 100644
--- a/src/main/frontend/src/components/icons/HorizontalPodAutoscaler.js
+++ b/src/main/frontend/src/components/icons/HorizontalPodAutoscalerIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const HorizontalPodAutoscaler = ({...props}) => (
+export const HorizontalPodAutoscalerIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -51,5 +51,3 @@ const HorizontalPodAutoscaler = ({...props}) => (
     </g>
   </svg>
 );
-
-export default HorizontalPodAutoscaler;
diff --git a/src/main/frontend/src/components/icons/Ingress.js b/src/main/frontend/src/components/icons/IngressIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/Ingress.js
rename to src/main/frontend/src/components/icons/IngressIcon.js
index a7cf821..358c6d2 100644
--- a/src/main/frontend/src/components/icons/Ingress.js
+++ b/src/main/frontend/src/components/icons/IngressIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Ingress = ({kubernetesColor = '#326ce5', ...props}) => (
+export const IngressIcon = ({kubernetesColor = '#326ce5', ...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -46,5 +46,3 @@ const Ingress = ({kubernetesColor = '#326ce5', ...props}) => (
     />
   </svg>
 );
-
-export default Ingress;
diff --git a/src/main/frontend/src/components/icons/Job.js b/src/main/frontend/src/components/icons/JobIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/Job.js
rename to src/main/frontend/src/components/icons/JobIcon.js
index 64c9c94..c27966b 100644
--- a/src/main/frontend/src/components/icons/Job.js
+++ b/src/main/frontend/src/components/icons/JobIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Job = ({...props}) => (
+export const JobIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -44,5 +44,3 @@ const Job = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Job;
diff --git a/src/main/frontend/src/components/icons/Kubernetes.js b/src/main/frontend/src/components/icons/KubernetesIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/Kubernetes.js
rename to src/main/frontend/src/components/icons/KubernetesIcon.js
index fbef17f..a45522f 100644
--- a/src/main/frontend/src/components/icons/Kubernetes.js
+++ b/src/main/frontend/src/components/icons/KubernetesIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Kubernetes = ({...props}) => (
+export const KubernetesIcon = ({...props}) => (
   <svg viewBox='0 0 722.846 701.966' {...props}>
     <title>The Kubernetes logo icon</title>
     <path
@@ -44,5 +44,3 @@ const Kubernetes = ({...props}) => (
     />
   </svg>
 );
-
-export default Kubernetes;
diff --git a/src/main/frontend/src/components/icons/Minikube.js b/src/main/frontend/src/components/icons/MinikubeIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/Minikube.js
rename to src/main/frontend/src/components/icons/MinikubeIcon.js
index 15913fb..780b919 100644
--- a/src/main/frontend/src/components/icons/Minikube.js
+++ b/src/main/frontend/src/components/icons/MinikubeIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Minikube = ({...props}) => (
+export const MinikubeIcon = ({...props}) => (
   <svg viewBox='0 0 702 683' {...props}>
     <defs>
       <path id='prefix__a' d='M701.06 684.263V1.593H0v682.67z' />
@@ -47,5 +47,3 @@ const Minikube = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Minikube;
diff --git a/src/main/frontend/src/components/icons/Namespace.js b/src/main/frontend/src/components/icons/NamespaceIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/Namespace.js
rename to src/main/frontend/src/components/icons/NamespaceIcon.js
index 4727686..0944af2 100644
--- a/src/main/frontend/src/components/icons/Namespace.js
+++ b/src/main/frontend/src/components/icons/NamespaceIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Namespace = ({kubernetesColor = '#326ce5', ...props}) => (
+export const NamespaceIcon = ({kubernetesColor = '#326ce5', ...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -51,5 +51,3 @@ const Namespace = ({kubernetesColor = '#326ce5', ...props}) => (
     />
   </svg>
 );
-
-export default Namespace;
diff --git a/src/main/frontend/src/components/icons/Node.js b/src/main/frontend/src/components/icons/NodeIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/Node.js
rename to src/main/frontend/src/components/icons/NodeIcon.js
index 1c6d95d..ae7f1fc 100644
--- a/src/main/frontend/src/components/icons/Node.js
+++ b/src/main/frontend/src/components/icons/NodeIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Node = ({...props}) => (
+export const NodeIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -45,5 +45,3 @@ const Node = ({...props}) => (
     />
   </svg>
 );
-
-export default Node;
diff --git a/src/main/frontend/src/components/icons/OpenShift.js b/src/main/frontend/src/components/icons/OpenShiftIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/OpenShift.js
rename to src/main/frontend/src/components/icons/OpenShiftIcon.js
index e85e28e..100a064 100644
--- a/src/main/frontend/src/components/icons/OpenShift.js
+++ b/src/main/frontend/src/components/icons/OpenShiftIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const OpenShift = ({...props}) => (
+export const OpenShiftIcon = ({...props}) => (
   <svg
     id='prefix__svg45453'
     xmlns='http://www.w3.org/2000/svg'
@@ -57,5 +57,3 @@ const OpenShift = ({...props}) => (
     />
   </svg>
 );
-
-export default OpenShift;
diff --git a/src/main/frontend/src/components/icons/PersistentVolumeClaim.js b/src/main/frontend/src/components/icons/PersistentVolumeClaimIcon.js
similarity index 96%
rename from src/main/frontend/src/components/icons/PersistentVolumeClaim.js
rename to src/main/frontend/src/components/icons/PersistentVolumeClaimIcon.js
index dbaba1b..f7b6914 100644
--- a/src/main/frontend/src/components/icons/PersistentVolumeClaim.js
+++ b/src/main/frontend/src/components/icons/PersistentVolumeClaimIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const PersistentVolumeClaim = ({...props}) => (
+export const PersistentVolumeClaimIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -50,5 +50,3 @@ const PersistentVolumeClaim = ({...props}) => (
     />
   </svg>
 );
-
-export default PersistentVolumeClaim;
diff --git a/src/main/frontend/src/components/icons/PersistentVolume.js b/src/main/frontend/src/components/icons/PersistentVolumeIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/PersistentVolume.js
rename to src/main/frontend/src/components/icons/PersistentVolumeIcon.js
index 0bc82d5..00594dd 100644
--- a/src/main/frontend/src/components/icons/PersistentVolume.js
+++ b/src/main/frontend/src/components/icons/PersistentVolumeIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const PersistentVolume = ({...props}) => (
+export const PersistentVolumeIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -61,5 +61,3 @@ const PersistentVolume = ({...props}) => (
     </g>
   </svg>
 );
-
-export default PersistentVolume;
diff --git a/src/main/frontend/src/components/icons/Pod.js b/src/main/frontend/src/components/icons/PodIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/Pod.js
rename to src/main/frontend/src/components/icons/PodIcon.js
index 0afcbe2..a5b798b 100644
--- a/src/main/frontend/src/components/icons/Pod.js
+++ b/src/main/frontend/src/components/icons/PodIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Pod = ({...props}) => (
+export const PodIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -44,5 +44,3 @@ const Pod = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Pod;
diff --git a/src/main/frontend/src/components/icons/ReplicaSet.js b/src/main/frontend/src/components/icons/ReplicaSetIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/ReplicaSet.js
rename to src/main/frontend/src/components/icons/ReplicaSetIcon.js
index 576489b..d02e4f0 100644
--- a/src/main/frontend/src/components/icons/ReplicaSet.js
+++ b/src/main/frontend/src/components/icons/ReplicaSetIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const ReplicaSet = ({...props}) => (
+export const ReplicaSetIcon = ({...props}) => (
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -76,5 +76,3 @@ const ReplicaSet = ({...props}) => (
     </g>
   </svg>
 );
-
-export default ReplicaSet;
diff --git a/src/main/frontend/src/components/icons/Role.js b/src/main/frontend/src/components/icons/RoleIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/Role.js
rename to src/main/frontend/src/components/icons/RoleIcon.js
index e7b2020..da1d6c2 100644
--- a/src/main/frontend/src/components/icons/Role.js
+++ b/src/main/frontend/src/components/icons/RoleIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Role = ({...props}) => (
+export const RoleIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -71,5 +71,3 @@ const Role = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Role;
diff --git a/src/main/frontend/src/components/icons/Secret.js b/src/main/frontend/src/components/icons/SecretIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/Secret.js
rename to src/main/frontend/src/components/icons/SecretIcon.js
index e59bf1e..90f0906 100644
--- a/src/main/frontend/src/components/icons/Secret.js
+++ b/src/main/frontend/src/components/icons/SecretIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Secret = ({...props}) => (
+export const SecretIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -78,5 +78,3 @@ const Secret = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Secret;
diff --git a/src/main/frontend/src/components/icons/ServiceAccount.js b/src/main/frontend/src/components/icons/ServiceAccountIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/ServiceAccount.js
rename to src/main/frontend/src/components/icons/ServiceAccountIcon.js
index 4fb9b74..becc048 100644
--- a/src/main/frontend/src/components/icons/ServiceAccount.js
+++ b/src/main/frontend/src/components/icons/ServiceAccountIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-export const ServiceAccount = ({...props}) => (
+export const ServiceAccountIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M-6.85 4.272a1.12 1.11 0 0 0-.428.109l-5.852 2.796a1.12 1.11 0 0 0-.606.753l-1.444 6.282a1.12 1.11 0 0 0 .152.85 1.12 1.11 0 0 0 .064.089l4.05 5.037a1.12 1.11 0 0 0 .876.417l6.496-.001a1.12 1.11 0 0 0 .875-.417l4.049-5.038a1.12 1.11 0 0 0 .216-.939L.152 7.93a1.12 1.11 0 0 0-.605-.753L-6.307 4.38a1.12 1.11 0 0 0-.542-.109Z'
diff --git a/src/main/frontend/src/components/icons/Service.js b/src/main/frontend/src/components/icons/ServiceIcon.js
similarity index 97%
rename from src/main/frontend/src/components/icons/Service.js
rename to src/main/frontend/src/components/icons/ServiceIcon.js
index df7af1a..4abebd5 100644
--- a/src/main/frontend/src/components/icons/Service.js
+++ b/src/main/frontend/src/components/icons/ServiceIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const Service = ({...props}) => (
+export const ServiceIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.958.463a1.136 1.126 0 00-.435.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.504 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.064.09l4.112 5.111a1.136 1.126 0 00.888.424l6.592-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.22-.953l-1.468-6.375a1.136 1.126 0 00-.615-.764L9.51.573a1.136 1.126 0 00-.55-.11z'
@@ -64,5 +64,3 @@ const Service = ({...props}) => (
     </g>
   </svg>
 );
-
-export default Service;
diff --git a/src/main/frontend/src/components/icons/StatefulSet.js b/src/main/frontend/src/components/icons/StatefulSetIcon.js
similarity index 98%
rename from src/main/frontend/src/components/icons/StatefulSet.js
rename to src/main/frontend/src/components/icons/StatefulSetIcon.js
index 41c0fca..4fb71b5 100644
--- a/src/main/frontend/src/components/icons/StatefulSet.js
+++ b/src/main/frontend/src/components/icons/StatefulSetIcon.js
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-const StatefulSet = ({...props}) => (
+export const StatefulSetIcon = ({...props}) => (
   <svg viewBox='0 0 18.035 17.5' {...props}>
     <path
       d='M8.994.463a1.136 1.126 0 00-.436.11l-5.94 2.838a1.136 1.126 0 00-.614.764L.54 10.55a1.136 1.126 0 00.154.864 1.136 1.126 0 00.065.09l4.11 5.111a1.136 1.126 0 00.889.424l6.593-.001a1.136 1.126 0 00.888-.424l4.11-5.112a1.136 1.126 0 00.219-.953l-1.468-6.375a1.136 1.126 0 00-.614-.764L9.545.573a1.136 1.126 0 00-.551-.11z'
@@ -92,5 +92,3 @@ const StatefulSet = ({...props}) => (
     </g>
   </svg>
 );
-
-export default StatefulSet;
diff --git a/src/main/frontend/src/components/icons/index.js b/src/main/frontend/src/components/icons/index.js
index b3baecb..1e87722 100644
--- a/src/main/frontend/src/components/icons/index.js
+++ b/src/main/frontend/src/components/icons/index.js
@@ -15,64 +15,38 @@
  *
  */
 import React from 'react';
-import ClusterRole from './ClusterRole';
-import ClusterRoleBinding from './ClusterRoleBinding';
-import ConfigMap from './ConfigMap';
-import CronJob from './CronJob';
-import CustomResourceDefinition from './CustomResourceDefinition';
-import DaemonSet from './DaemonSet';
-import Deployment from './Deployment';
-import {Endpoints} from './Endpoints';
-import HorizontalPodAutoscaler from './HorizontalPodAutoscaler';
-import Ingress from './Ingress';
-import Job from './Job';
-import Kubernetes from './Kubernetes';
-import Minikube from './Minikube';
-import Namespace from './Namespace';
-import Node from './Node';
-import OpenShift from './OpenShift';
-import PersistentVolume from './PersistentVolume';
-import PersistentVolumeClaim from './PersistentVolumeClaim';
-import Pod from './Pod';
-import ReplicaSet from './ReplicaSet';
-import Role from './Role';
-import Secret from './Secret';
-import Service from './Service';
-import {ServiceAccount} from './ServiceAccount';
-import StatefulSet from './StatefulSet';
-import {YAKDLogo} from './YAKDLogo';
+import {DeploymentIcon} from './DeploymentIcon';
+import {IngressIcon} from './IngressIcon';
+export {ClusterRoleIcon} from './ClusterRoleIcon';
+export {ClusterRoleBindingIcon} from './ClusterRoleBindingIcon';
+export {ConfigMapIcon} from './ConfigMapIcon';
+export {CronJobIcon} from './CronJobIcon';
+export {CustomResourceDefinitionIcon} from './CustomResourceDefinitionIcon';
+export {DaemonSetIcon} from './DaemonSetIcon';
+export {DeploymentIcon} from './DeploymentIcon';
+export {EndpointsIcon} from './EndpointsIcon';
+export {HorizontalPodAutoscalerIcon} from './HorizontalPodAutoscalerIcon';
+export {IngressIcon} from './IngressIcon';
+export {JobIcon} from './JobIcon';
+export {KubernetesIcon} from './KubernetesIcon';
+export {MinikubeIcon} from './MinikubeIcon';
+export {NamespaceIcon} from './NamespaceIcon';
+export {NodeIcon} from './NodeIcon';
+export {OpenShiftIcon} from './OpenShiftIcon';
+export {PersistentVolumeIcon} from './PersistentVolumeIcon';
+export {PersistentVolumeClaimIcon} from './PersistentVolumeClaimIcon';
+export {PodIcon} from './PodIcon';
+export {ReplicaSetIcon} from './ReplicaSetIcon';
+export {RoleIcon} from './RoleIcon';
+export {SecretIcon} from './SecretIcon';
+export {ServiceIcon} from './ServiceIcon';
+export {ServiceAccountIcon} from './ServiceAccountIcon';
+export {StatefulSetIcon} from './StatefulSetIcon';
+export {YAKDLogo} from './YAKDLogo';
 
-const icons = {};
-
-icons.ClusterRole = ClusterRole;
-icons.ClusterRoleBinding = ClusterRoleBinding;
-icons.ConfigMap = ConfigMap;
-icons.CronJob = CronJob;
-icons.CustomResourceDefinition = CustomResourceDefinition;
-icons.DaemonSet = DaemonSet;
-icons.DeploymentConfig = ({...props}) => (
-  <Deployment kubernetesColor='#db212e' {...props} />
+export const DeploymentConfigIcon = ({...props}) => (
+  <DeploymentIcon kubernetesColor='#db212e' {...props} />
+);
+export const RouteIcon = ({...props}) => (
+  <IngressIcon kubernetesColor='#db212e' {...props} />
 );
-icons.Deployment = Deployment;
-icons.Endpoints = Endpoints;
-icons.HorizontalPodAutoscaler = HorizontalPodAutoscaler;
-icons.Ingress = Ingress;
-icons.Job = Job;
-icons.Kubernetes = Kubernetes;
-icons.Minikube = Minikube;
-icons.Namespace = Namespace;
-icons.Node = Node;
-icons.OpenShift = OpenShift;
-icons.PersistentVolume = PersistentVolume;
-icons.PersistentVolumeClaim = PersistentVolumeClaim;
-icons.Pod = Pod;
-icons.ReplicaSet = ReplicaSet;
-icons.Role = Role;
-icons.Route = ({...props}) => <Ingress kubernetesColor='#db212e' {...props} />;
-icons.Secret = Secret;
-icons.Service = Service;
-icons.ServiceAccount = ServiceAccount;
-icons.StatefulSet = StatefulSet;
-icons.YAKDLogo = YAKDLogo;
-
-export default icons;
diff --git a/src/main/frontend/src/components/index.js b/src/main/frontend/src/components/index.js
index ac19eaf..79a72cd 100644
--- a/src/main/frontend/src/components/index.js
+++ b/src/main/frontend/src/components/index.js
@@ -16,6 +16,7 @@
  */
 
 export * from './popup';
+export * from './icons';
 export {Age} from './Age';
 export {Alert} from './Alert';
 export {Card} from './Card';
diff --git a/src/main/frontend/src/dashboard/DashboardPage.js b/src/main/frontend/src/dashboard/DashboardPage.js
index f17b887..c135d34 100644
--- a/src/main/frontend/src/dashboard/DashboardPage.js
+++ b/src/main/frontend/src/dashboard/DashboardPage.js
@@ -18,10 +18,17 @@ import React, {useState} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 import {clearError} from '../redux';
 import * as apis from '../apis';
-import i from '../components/icons';
 import {name as metadataName} from '../metadata';
 import {selectors as nodeSelectors} from '../nodes';
-import {Alert, Icon, Link, Tooltip} from '../components';
+import {
+  Alert,
+  Icon,
+  Link,
+  Tooltip,
+  MinikubeIcon,
+  OpenShiftIcon,
+  YAKDLogo
+} from '../components';
 import {NewResource} from './NewResource';
 import {NewResourceButton} from './NewResourceButton';
 import {SideBar} from './SideBar';
@@ -63,17 +70,17 @@ const Header = ({setSideBarOpen, title}) => {
               strokeLinejoin='round'
             />
           </svg>
-          <i.YAKDLogo className='block ml-2 h-6' />
+          <YAKDLogo className='block ml-2 h-6' />
         </button>
         <div className='flex relative items-center mx-4 lg:text-xl lg:mx-0 flex-1 truncate'>
           {isMinikube && (
             <Tooltip content='Minikube cluster detected'>
-              <i.Minikube className='h-6 mr-2' />
+              <MinikubeIcon className='h-6 mr-2' />
             </Tooltip>
           )}
           {isOpenShift && (
             <Tooltip content='OpenShift cluster detected'>
-              <i.OpenShift className='h-6 mr-2' />
+              <OpenShiftIcon className='h-6 mr-2' />
             </Tooltip>
           )}
           {title}
diff --git a/src/main/frontend/src/dashboard/SideBar.js b/src/main/frontend/src/dashboard/SideBar.js
index 03b360e..afc535f 100644
--- a/src/main/frontend/src/dashboard/SideBar.js
+++ b/src/main/frontend/src/dashboard/SideBar.js
@@ -18,10 +18,38 @@ import React, {useRef, useLayoutEffect} from 'react';
 import {connect} from 'react-redux';
 import {useMatch} from 'react-router-dom';
 import * as apis from '../apis';
-import i from '../components/icons';
 import {useUiSidebar} from '../redux';
 import * as crd from '../customresourcedefinitions';
-import {Icon, Link} from '../components';
+import {
+  Icon,
+  Link,
+  EndpointsIcon,
+  ClusterRoleBindingIcon,
+  ClusterRoleIcon,
+  ConfigMapIcon,
+  CronJobIcon,
+  CustomResourceDefinitionIcon,
+  DaemonSetIcon,
+  DeploymentConfigIcon,
+  DeploymentIcon,
+  HorizontalPodAutoscalerIcon,
+  IngressIcon,
+  JobIcon,
+  KubernetesIcon,
+  NamespaceIcon,
+  NodeIcon,
+  PersistentVolumeClaimIcon,
+  PersistentVolumeIcon,
+  PodIcon,
+  ReplicaSetIcon,
+  RoleIcon,
+  RouteIcon,
+  SecretIcon,
+  ServiceAccountIcon,
+  ServiceIcon,
+  StatefulSetIcon,
+  YAKDLogo
+} from '../components';
 
 import './SideBar.css';
 
@@ -117,13 +145,13 @@ const NavSection = ({
       <IconNavItem to='/search' icon='fa-search'>
         Search
       </IconNavItem>
-      <K8sNavItem to='/' Icon={i.Kubernetes}>
+      <K8sNavItem to='/' Icon={KubernetesIcon}>
         Home
       </K8sNavItem>
-      <K8sNavItem to='/nodes' Icon={i.Node}>
+      <K8sNavItem to='/nodes' Icon={NodeIcon}>
         Nodes
       </K8sNavItem>
-      <K8sNavItem to='/namespaces' Icon={i.Namespace}>
+      <K8sNavItem to='/namespaces' Icon={NamespaceIcon}>
         Namespaces
       </K8sNavItem>
       <div>
@@ -133,35 +161,35 @@ const NavSection = ({
           label='Workloads'
           icon='fa-cubes'
         >
-          <K8sNavItem to='/pods' Icon={i.Pod}>
+          <K8sNavItem to='/pods' Icon={PodIcon}>
             Pods
           </K8sNavItem>
-          <K8sNavItem to='/deployments' Icon={i.Deployment}>
+          <K8sNavItem to='/deployments' Icon={DeploymentIcon}>
             Deployments
           </K8sNavItem>
           {isOpenShift && (
-            <K8sNavItem to='/deploymentconfigs' Icon={i.DeploymentConfig}>
+            <K8sNavItem to='/deploymentconfigs' Icon={DeploymentConfigIcon}>
               Deployment Configs
             </K8sNavItem>
           )}
-          <K8sNavItem to='/statefulsets' Icon={i.StatefulSet}>
+          <K8sNavItem to='/statefulsets' Icon={StatefulSetIcon}>
             StatefulSets
           </K8sNavItem>
-          <K8sNavItem to='/cronjobs' Icon={i.CronJob}>
+          <K8sNavItem to='/cronjobs' Icon={CronJobIcon}>
             CronJobs
           </K8sNavItem>
-          <K8sNavItem to='/jobs' Icon={i.Job}>
+          <K8sNavItem to='/jobs' Icon={JobIcon}>
             Jobs
           </K8sNavItem>
-          <K8sNavItem to='/daemonsets' Icon={i.DaemonSet}>
+          <K8sNavItem to='/daemonsets' Icon={DaemonSetIcon}>
             DaemonSets
           </K8sNavItem>
-          <K8sNavItem to='/replicationcontrollers' Icon={i.ReplicaSet}>
+          <K8sNavItem to='/replicationcontrollers' Icon={ReplicaSetIcon}>
             Replication Controllers
           </K8sNavItem>
           <K8sNavItem
             to='/horizontalpodautoscalers'
-            Icon={i.HorizontalPodAutoscaler}
+            Icon={HorizontalPodAutoscalerIcon}
           >
             Horizontal Pod Autoscalers
           </K8sNavItem>
@@ -172,17 +200,17 @@ const NavSection = ({
           label='Network'
           icon='fa-network-wired'
         >
-          <K8sNavItem to='/services' Icon={i.Service}>
+          <K8sNavItem to='/services' Icon={ServiceIcon}>
             Services
           </K8sNavItem>
-          <K8sNavItem to='/endpoints' Icon={i.Endpoints}>
+          <K8sNavItem to='/endpoints' Icon={EndpointsIcon}>
             Endpoints
           </K8sNavItem>
-          <K8sNavItem to='/ingresses' Icon={i.Ingress}>
+          <K8sNavItem to='/ingresses' Icon={IngressIcon}>
             Ingresses
           </K8sNavItem>
           {isOpenShift && (
-            <K8sNavItem to='/routes' Icon={i.Route}>
+            <K8sNavItem to='/routes' Icon={RouteIcon}>
               Routes
             </K8sNavItem>
           )}
@@ -193,10 +221,10 @@ const NavSection = ({
           label='Configuration'
           icon='fa-list'
         >
-          <K8sNavItem to='/configmaps' Icon={i.ConfigMap}>
+          <K8sNavItem to='/configmaps' Icon={ConfigMapIcon}>
             ConfigMaps
           </K8sNavItem>
-          <K8sNavItem to='/secrets' Icon={i.Secret}>
+          <K8sNavItem to='/secrets' Icon={SecretIcon}>
             Secrets
           </K8sNavItem>
         </NavGroup>
@@ -206,12 +234,12 @@ const NavSection = ({
           label='Storage'
           icon='fa-database'
         >
-          <K8sNavItem to='/persistentvolumes' Icon={i.PersistentVolume}>
+          <K8sNavItem to='/persistentvolumes' Icon={PersistentVolumeIcon}>
             PersistentVolumes
           </K8sNavItem>
           <K8sNavItem
             to='/persistentvolumeclaims'
-            Icon={i.PersistentVolumeClaim}
+            Icon={PersistentVolumeClaimIcon}
           >
             PersistentVolume Claims
           </K8sNavItem>
@@ -222,19 +250,19 @@ const NavSection = ({
           label='Access Control'
           icon='fa-shield-alt'
         >
-          <K8sNavItem to='/serviceaccounts' Icon={i.ServiceAccount}>
+          <K8sNavItem to='/serviceaccounts' Icon={ServiceAccountIcon}>
             ServiceAccounts
           </K8sNavItem>
-          <K8sNavItem to='/clusterroles' Icon={i.ClusterRole}>
+          <K8sNavItem to='/clusterroles' Icon={ClusterRoleIcon}>
             ClusterRoles
           </K8sNavItem>
-          <K8sNavItem to='/clusterrolebindings' Icon={i.ClusterRoleBinding}>
+          <K8sNavItem to='/clusterrolebindings' Icon={ClusterRoleBindingIcon}>
             ClusterRoleBindings
           </K8sNavItem>
-          <K8sNavItem to='/roles' Icon={i.Role}>
+          <K8sNavItem to='/roles' Icon={RoleIcon}>
             Roles
           </K8sNavItem>
-          <K8sNavItem to='/secrets' Icon={i.Secret}>
+          <K8sNavItem to='/secrets' Icon={SecretIcon}>
             Secrets
           </K8sNavItem>
         </NavGroup>
@@ -246,7 +274,7 @@ const NavSection = ({
         >
           <K8sNavItem
             to='/customresourcedefinitions'
-            Icon={i.CustomResourceDefinition}
+            Icon={CustomResourceDefinitionIcon}
           >
             Definitions
           </K8sNavItem>
@@ -300,7 +328,7 @@ export const SideBar = connect(mapStateToProps)(({
           variant={Link.variants.none}
           className='flex flex-col items-center'
         >
-          <i.YAKDLogo kubernetesColor='#FFFFFF' className='block h-8 lg:h-12' />
+          <YAKDLogo kubernetesColor='#FFFFFF' className='block h-8 lg:h-12' />
           <div className='text-white text-lg lg:text-xl mt-2 mx-2 font-semibold'>
             Kubernetes Dashboard
           </div>
diff --git a/src/main/frontend/src/deployments/DeploymentsCard.js b/src/main/frontend/src/deployments/DeploymentsCard.js
index 4b8c65b..0080360 100644
--- a/src/main/frontend/src/deployments/DeploymentsCard.js
+++ b/src/main/frontend/src/deployments/DeploymentsCard.js
@@ -16,8 +16,7 @@
  */
 import React from 'react';
 import {connect} from 'react-redux';
-import {StatusCard} from '../components';
-import icons from '../components/icons';
+import {StatusCard, DeploymentIcon} from '../components';
 import {selectors} from './';
 
 const mapStateToProps = ({deployments}) => ({
@@ -35,7 +34,7 @@ export const DeploymentsCard = connect(mapStateToProps)(({
     <StatusCard
       header='Deployments'
       to={'/deployments'}
-      Icon={icons.Deployment}
+      Icon={DeploymentIcon}
       ready={ready}
       total={total}
       readyProgress={Math.round((ready / total) * 100)}
diff --git a/src/main/frontend/src/icons.js b/src/main/frontend/src/icons.js
deleted file mode 100644
index bbd51d3..0000000
--- a/src/main/frontend/src/icons.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2020 Marc Nuri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-import k8s from './assets/k8s-icons/k8s.svg';
-import deployment from './assets/k8s-icons/deploy.svg';
-import ing from './assets/k8s-icons/ing.svg';
-import node from './assets/k8s-icons/node.svg';
-import pod from './assets/k8s-icons/pod.svg';
-import svc from './assets/k8s-icons/svc.svg';
-
-const icons = {
-  k8s,
-  deployment,
-  ing,
-  node,
-  pod,
-  svc
-};
-
-export default icons;
diff --git a/src/main/frontend/src/nodes/NodesCard.js b/src/main/frontend/src/nodes/NodesCard.js
index 5c6c6a7..4e668cc 100644
--- a/src/main/frontend/src/nodes/NodesCard.js
+++ b/src/main/frontend/src/nodes/NodesCard.js
@@ -16,8 +16,7 @@
  */
 import React from 'react';
 import {shallowEqual, useSelector} from 'react-redux';
-import {StatusCard} from '../components';
-import icons from '../components/icons';
+import {StatusCard, NodeIcon} from '../components';
 import {selectors} from './';
 
 export const NodesCard = ({...properties}) => {
@@ -28,7 +27,7 @@ export const NodesCard = ({...properties}) => {
     <StatusCard
       header='Nodes'
       to={'/nodes'}
-      Icon={icons.Node}
+      Icon={NodeIcon}
       ready={ready}
       total={total}
       readyProgress={Math.round((ready / total) * 100)}
diff --git a/src/main/frontend/src/nodes/NodesDetailPage.js b/src/main/frontend/src/nodes/NodesDetailPage.js
index 5616e4b..f99e1da 100644
--- a/src/main/frontend/src/nodes/NodesDetailPage.js
+++ b/src/main/frontend/src/nodes/NodesDetailPage.js
@@ -21,8 +21,7 @@ import {Details, name} from '../metadata';
 import {bytesToHumanReadable, quantityToScalar} from '../metrics';
 import {selectors} from './';
 import {PodsList, selectors as podSelectors} from '../pods';
-import {Card, DonutChart, Form} from '../components';
-import Minikube from '../components/icons/Minikube';
+import {Card, DonutChart, Form, MinikubeIcon} from '../components';
 import {ResourceDetailPage} from '../dashboard';
 
 const Dial = ({
@@ -86,7 +85,7 @@ export const NodesDetailPage = withParams(
         path='nodes'
         resource={node}
         isReadyFunction={selectors.isReady}
-        actions={isMinikube && <Minikube className='ml-2 h-6' />}
+        actions={isMinikube && <MinikubeIcon className='ml-2 h-6' />}
         body={
           <Form>
             <div className='w-full mb-4 flex flex-wrap justify-around'>
diff --git a/src/main/frontend/src/pods/PodsCard.js b/src/main/frontend/src/pods/PodsCard.js
index bce3bb9..c17409b 100644
--- a/src/main/frontend/src/pods/PodsCard.js
+++ b/src/main/frontend/src/pods/PodsCard.js
@@ -16,8 +16,7 @@
  */
 import React from 'react';
 import {connect} from 'react-redux';
-import {StatusCard} from '../components';
-import icons from '../components/icons';
+import {StatusCard, PodIcon} from '../components';
 import {selectors} from './';
 
 const mapStateToProps = ({pods}) => ({
@@ -33,7 +32,7 @@ export const PodsCard = connect(mapStateToProps)(({pods, ...properties}) => {
     <StatusCard
       header='Pods'
       to={'/pods'}
-      Icon={icons.Pod}
+      Icon={PodIcon}
       ready={ready}
       succeeded={succeeded}
       total={total}