diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 96729bb..eda2dd4 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,7 +5,11 @@
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon :lineSlugName="$route.params.line" color="colors" />
+      <LineIcon
+        :lineSlugName="$route.params.line"
+        color="colors"
+        size="md"
+      />
       </router-link>
     </div>
     <div>
@@ -76,11 +80,6 @@ header {
   margin-left: 0.5rem;
 }
 
-.icon-line img {
-  width: 2rem;
-  height: 2rem;
-}
-
 .clock {
   display: flex;
   justify-content: end;
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index eb90a81..7180a57 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -10,7 +10,11 @@
           >
             <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
-                <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
+                <LineIcon
+                  :lineSlugName="line"
+                  :color="tabIndex() === i ? 'dark' : 'light'"
+                  size="sm"
+                />
                 <span v-if="stop" class="tab-label-text">
                   {{ getStop(line, stop).displayName }}
                 </span>
@@ -38,7 +42,11 @@
             >
               <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
-                  <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
+                  <LineIcon
+                    :lineSlugName="line"
+                    :color="tabIndex() === i ? 'dark' : 'light'"
+                    size="sm"
+                  />
                   <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 fff323a..8bcc826 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -3,12 +3,15 @@
     v-if="lineSlugName"
     :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
     :alt="`${lineSlugName}`"
+    :size="size"
   />
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import DesignIcon from '@/components/design/DesignIcon.vue'
+import Vue, { PropType } from 'vue'
+import DesignIcon, { DesignIconSize } from '@/components/design/DesignIcon.vue'
+
+export type LineIconColor = 'colors' | 'light' | 'dark'
 
 export default Vue.extend({
   name: 'LineIcon',
@@ -21,7 +24,8 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    color: String,
+    color: String as PropType<LineIconColor>,
+    size: String as PropType<DesignIconSize>,
   },
 })
 </script>
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index c1031ae..2c0ce5c 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -5,8 +5,13 @@
   >
     {{ stopName }}
     <div class="line-connections">
-      <LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line" color="colors" fadeIn
+      <LineIcon
+        v-for="conn in lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
+        :lineSlugName="conn.line"
+        color="colors"
+        size="sm"
+        fadeIn
       />
     </div>
   </router-link>
@@ -51,6 +56,5 @@ export default Vue.extend({
 .line-connections > img {
   margin-top: 0.2rem;
   margin-right: 0.2rem;
-  width: 1.35rem;
 }
 </style>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 168b740..3ea9bed 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -8,7 +8,11 @@
         :key="`${conn.line}/${conn.slugName}`"
         :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
-        <LineIcon :lineSlugName="conn.line" color="dark" />
+        <LineIcon
+          :lineSlugName="conn.line"
+          color="dark"
+          size="md"
+        />
       </router-link>
     </span>
   </div>
diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index e9b6b7c..4076c57 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -6,7 +6,12 @@
       <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" color="dark" fadeIn />
+        <LineIcon
+          :lineSlugName="line.slugName"
+          color="dark"
+          size="lg"
+          fadeIn
+        />
       </router-link>
     </div>
   </div>
@@ -50,9 +55,4 @@ hr {
   display: inline-block;
   margin: 1rem 1rem 0 0;
 }
-
-.icon-line img {
-  width: 3.5rem;
-  height: 3.5rem;
-}
 </style>
diff --git a/src/components/design/DesignIcon.vue b/src/components/design/DesignIcon.vue
index cb9e7cd..8ee5a48 100644
--- a/src/components/design/DesignIcon.vue
+++ b/src/components/design/DesignIcon.vue
@@ -1,19 +1,27 @@
 <template>
   <img
-    :class="{ 'fade-in': fadeIn }"
+    :class="{
+      'size-sm': size === 'sm',
+      'size-md': size === 'md',
+      'size-lg': size === 'lg',
+      'fade-in': fadeIn,
+    }"
     :src="src"
     :alt="alt"
   />
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
+
+export type DesignIconSize = 'sm' | 'md' | 'lg'
 
 export default Vue.extend({
   name: 'DesignIcon',
   props: {
     src: String,
     alt: String,
+    size: String as PropType<DesignIconSize>,
     fadeIn: {
       type: Boolean,
       default: false,
@@ -23,6 +31,21 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+.size-sm {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.size-md {
+  width: 2rem;
+  height: 2rem;
+}
+
+.size-lg {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
 .fade-in {
   opacity: 1;
   animation: fadeIn 600ms ease;