diff --git a/application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html b/application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html
index da4913f9..5e0d6abf 100644
--- a/application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html
+++ b/application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html
@@ -65,6 +65,7 @@
     [timezoneOffset]="timezoneOffset"
     [pendingNewPois]="pendingNewPois"
     [pendingOldVisitIds]="pendingOldVisitIds"
+    [color]="color"
     (pointOfInterestClick)="pointOfInterestClick.emit($event)">
   </app-points-of-interest>
 </div>
diff --git a/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html b/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html
index 94e4a681..122b0a82 100644
--- a/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html
+++ b/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html
@@ -9,11 +9,12 @@
 </div>
 <ng-container *ngFor="let p of points">
   <ng-container [ngSwitch]="p[1]" *ngIf="imageAttributeLookup[p[1]] as attr">
-    <mat-icon
+    <svg
       *ngSwitchCase="2"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
@@ -21,13 +22,30 @@
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="pickup"></mat-icon>
-    <mat-icon
+      }">
+      <g transform="matrix(1,0,0,-1,-75,43)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
+    <svg
       *ngSwitchCase="3"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
@@ -35,8 +53,24 @@
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="dropoff"></mat-icon>
+      }">
+      <g transform="matrix(1,0,0,1,-75,-1.00004)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
     <svg
       *ngSwitchCase="1"
       class="poi"
diff --git a/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts b/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts
index 16b8b393..426e3084 100644
--- a/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts
+++ b/application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts
@@ -67,6 +67,7 @@ export class PointsOfInterestComponent implements OnChanges {
   @Input() timezoneOffset: number;
   @Input() routeId: number;
   @Input() changedVisits: ChangedVisits;
+  @Input() color: string;
   @Output() pointOfInterestClick = new EventEmitter<PointOfInterestClick>();
 
   get imageAttributeLookup(): { [key: string]: PointsOfInterestImageAttribute } {
diff --git a/application/frontend/src/app/shared/components/timeline/timeline.component.html b/application/frontend/src/app/shared/components/timeline/timeline.component.html
index 45bb090d..680d3987 100644
--- a/application/frontend/src/app/shared/components/timeline/timeline.component.html
+++ b/application/frontend/src/app/shared/components/timeline/timeline.component.html
@@ -17,7 +17,14 @@
     y2="50%" />
   <g *ngIf="availabilityRange">
     <title>Vehicle availability {{ getSegmentTitle(availability[0], availability[1]) }}</title>
-    <rect [attr.x]="availabilityRange[0]" y="0" [attr.width]="availabilityRange[1] - availabilityRange[0]" height="100%" fill="none" [attr.stroke]="color" stroke-width="2px"/>
+    <rect
+      [attr.x]="availabilityRange[0]"
+      y="0"
+      [attr.width]="availabilityRange[1] - availabilityRange[0]"
+      height="100%"
+      fill="none"
+      [attr.stroke]="color"
+      stroke-width="2px" />
   </g>
   <line
     [attr.x1]="segmentsBound[0]"
diff --git a/application/frontend/src/app/shared/models/points-of-interest-image.ts b/application/frontend/src/app/shared/models/points-of-interest-image.ts
index 3b063406..a25c2f3b 100644
--- a/application/frontend/src/app/shared/models/points-of-interest-image.ts
+++ b/application/frontend/src/app/shared/models/points-of-interest-image.ts
@@ -34,16 +34,16 @@ export const pointsOfInterestImages = {
   },
   [PointOfInterestCategory.Pickup]: {
     href: `/assets/images/pickup.svg`,
-    width: 12.316,
-    height: 10.526,
+    width: 13,
+    height: 13,
     yOffset: 0,
     title: 'Pickup',
   },
   [PointOfInterestCategory.Delivery]: {
     href: '/assets/images/dropoff.svg',
-    width: 12.315,
-    height: 10.527,
-    yOffset: -1,
+    width: 13,
+    height: 13,
+    yOffset: 0,
     title: 'Delivery',
   },
   [PointOfInterestCategory.ServiceCall]: {
diff --git a/application/frontend/src/assets/images/dropoff.svg b/application/frontend/src/assets/images/dropoff.svg
index d2541d7a..401ed417 100644
--- a/application/frontend/src/assets/images/dropoff.svg
+++ b/application/frontend/src/assets/images/dropoff.svg
@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+<svg width="100%" height="100%" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(1,0,0,1,-75,-1.00004)">
         <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
             <circle cx="95" cy="35" r="19" style="fill:white;stroke:rgb(69,90,100);stroke-width:4.11px;"/>
diff --git a/application/frontend/src/assets/images/pickup.svg b/application/frontend/src/assets/images/pickup.svg
index 8839e29a..20923a56 100644
--- a/application/frontend/src/assets/images/pickup.svg
+++ b/application/frontend/src/assets/images/pickup.svg
@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+<svg width="100%" height="100%" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(1,0,0,-1,-75,43)">
         <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
             <circle cx="95" cy="35" r="19" style="fill:white;stroke:rgb(69,90,100);stroke-width:4.11px;"/>