diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 53dbd35..96729bb 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,7 +5,7 @@
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon :lineSlugName="$route.params.line" theme="colors" />
+      <LineIcon :lineSlugName="$route.params.line" color="colors" />
       </router-link>
     </div>
     <div>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 4ae9eb9..eb90a81 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -10,7 +10,7 @@
           >
             <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
-                <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
+                <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
                 <span v-if="stop" class="tab-label-text">
                   {{ getStop(line, stop).displayName }}
                 </span>
@@ -38,7 +38,7 @@
             >
               <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
-                  <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
+                  <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
                   <span v-if="stop" class="tab-label-text">
                     {{ getStop(line, stop).displayName }}
                   </span>
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index 4d040ac..fff323a 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -1,39 +1,30 @@
 <template>
-  <img
+  <DesignIcon
     v-if="lineSlugName"
-    :src="`/img/lines-icons/${theme}/${lineSlugName}.svg`"
-    :class="{ 'fade-in': fadeIn }"
+    :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
+    :alt="`${lineSlugName}`"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import DesignIcon from '@/components/design/DesignIcon.vue'
 
 export default Vue.extend({
   name: 'LineIcon',
+  components: {
+    DesignIcon,
+  },
   props: {
     lineSlugName: String,
     fadeIn: {
       type: Boolean,
       default: false,
     },
-    theme: String,
+    color: String,
   },
 })
 </script>
 
 <style scoped>
-.fade-in {
-  opacity: 1;
-  animation: fadeIn 600ms ease;
-}
-
-@keyframes fadeIn {
-  0%{
-    opacity: 0;
-  }
-  100%{
-    opacity: 1;
-  }
-}
 </style>
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index ad4f64d..c1031ae 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -6,7 +6,7 @@
     {{ stopName }}
     <div class="line-connections">
       <LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line" theme="colors" fadeIn
+        :lineSlugName="conn.line" color="colors" fadeIn
       />
     </div>
   </router-link>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 6523879..168b740 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -8,7 +8,7 @@
         :key="`${conn.line}/${conn.slugName}`"
         :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
-        <LineIcon :lineSlugName="conn.line" theme="dark" />
+        <LineIcon :lineSlugName="conn.line" color="dark" />
       </router-link>
     </span>
   </div>
diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index c406ad7..e9b6b7c 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -6,7 +6,7 @@
       <router-link v-for="line in category.lines" :key="line.slugName"
         class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
-        <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
+        <LineIcon :lineSlugName="line.slugName" color="dark" fadeIn />
       </router-link>
     </div>
   </div>
diff --git a/src/components/design/DesignIcon.vue b/src/components/design/DesignIcon.vue
new file mode 100644
index 0000000..cb9e7cd
--- /dev/null
+++ b/src/components/design/DesignIcon.vue
@@ -0,0 +1,39 @@
+<template>
+  <img
+    :class="{ 'fade-in': fadeIn }"
+    :src="src"
+    :alt="alt"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignIcon',
+  props: {
+    src: String,
+    alt: String,
+    fadeIn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.fade-in {
+  opacity: 1;
+  animation: fadeIn 600ms ease;
+}
+
+@keyframes fadeIn {
+  0%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+</style>