diff --git a/www/css/main.diary.css b/www/css/main.diary.css
index 4832d6e98..89eafbac6 100644
--- a/www/css/main.diary.css
+++ b/www/css/main.diary.css
@@ -97,11 +97,26 @@ a.item-content {
 }
 .leaflet-div-icon-start {
   background-color: #80D0FF;
-  border-radius: 6px;
+  border-radius: 100%;
 }
 .leaflet-div-icon-stop {
   background-color: #0088ce;
-  border-radius: 6px;
+  border-radius: 100%;
+}
+.leaflet-div-ionicon {
+  background: transparent; 
+  color: white;
+  font-size: 100%;
+  justify-content: center; 
+  display: flex;
+}
+.leaflet-div-ionicon-start {
+  color: white;
+}
+.leaflet-div-ionicon-stop {
+  color: white;
+  margin-top: 1px;
+  margin-left: 3px;
 }
 .inner-icon {
   background-color: white;
diff --git a/www/js/diary/services.js b/www/js/diary/services.js
index a7665188e..d81f872cb 100644
--- a/www/js/diary/services.js
+++ b/www/js/diary/services.js
@@ -352,8 +352,8 @@ angular.module('emission.main.diary.services', ['emission.plugin.logger',
     }
   };
     var pointIcon = L.divIcon({className: 'leaflet-div-icon', iconSize: [0, 0]});
-    var startIcon = L.divIcon({className: 'leaflet-div-icon-start', iconSize: [12, 12], html: '<div class="inner-icon">'});
-    var stopIcon = L.divIcon({className: 'leaflet-div-icon-stop', iconSize: [12, 12], html: '<div class="inner-icon">'});
+    var startIcon = L.divIcon({className: 'leaflet-div-icon-start', iconSize: [18, 18], html: '<div class="leaflet-div-ionicon leaflet-div-ionicon-start"><i class="ion-location"></i></div>'});
+    var stopIcon = L.divIcon({className: 'leaflet-div-icon-stop', iconSize: [18, 18], html: '<div class="leaflet-div-ionicon leaflet-div-ionicon-stop"><i class="ion-flag"></i></div>'});
 
     var style_stop = function(feature) {
       return {fillColor: 'yellow', fillOpacity: 0.8};
diff --git a/www/templates/diary/diary_list_item.html b/www/templates/diary/diary_list_item.html
index 3410e8a09..16ab1fb20 100644
--- a/www/templates/diary/diary_list_item.html
+++ b/www/templates/diary/diary_list_item.html
@@ -42,12 +42,12 @@
             <div class="col-90 start-end-addresses-container">
                 <!-- Fixed font size issue here by adding the style to the second ng-class. -->
                 <div ng-class="listLocationClass" id="no-border" href="#" style="background-color: transparent; font-size: 0.8em; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; margin-top: 0; margin-bottom: 0;">
-                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
+                <i class="icon ion-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
                         {{tripgj.start_place.properties.display_name.split(',')[0]}}
 
                 </div>
                 <div ng-class="listLocationClass" id="no-border" href="#" style="background-color: transparent; font-size: 0.8em; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; margin-top: 0; margin-bottom: 0;">
-                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #0088ce;"></i>
+                <i class="icon ion-flag" style="font-size: 16px; left: 0; color: #0088ce;"></i>
                         {{tripgj.end_place.properties.display_name.split(',')[0]}}
                 </div>
             </div>
diff --git a/www/templates/diary/infinite_scroll_detail.html b/www/templates/diary/infinite_scroll_detail.html
index 347c67f96..81b55f6f9 100644
--- a/www/templates/diary/infinite_scroll_detail.html
+++ b/www/templates/diary/infinite_scroll_detail.html
@@ -16,12 +16,12 @@
             <div class="col-70">
 
                 <div class="item item-icon-left" id="no-border" href="#" style="font-size: 1em; padding-top: 5px; padding-bottom: 5px;padding-left: 25px; margin-top: 0; margin-bottom: '0'}};">
-                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
+                <i class="icon ion-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
             {{tripgj.start_display_name}}
 
                 </div>
                 <div class="item item-icon-left" id="no-border" href="#" style="font-size: 1em; padding-top: 5px; padding-bottom: 5px;padding-left: 25px; margin-top: 0; margin-bottom: 0;">
-                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #0088ce;"></i>
+                <i class="icon ion-flag" style="font-size: 16px; left: 0; color: #0088ce;"></i>
             {{tripgj.end_display_name}}
                 </div>
             </div>
diff --git a/www/templates/diary/trip_list_item.html b/www/templates/diary/trip_list_item.html
index 17fefb7b2..3799f26fe 100644
--- a/www/templates/diary/trip_list_item.html
+++ b/www/templates/diary/trip_list_item.html
@@ -66,14 +66,14 @@
                     <div class="row" style="padding: 4px">
                         <div class="col-100">
                             <!-- Origin for Trip -->
-                            <div class="diary-street" ng-click="showDetail($event, trip)">
-                                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
+                            <div class="diary-street two-lines" ng-click="showDetail($event, trip)">
+                                <i class="icon ion-location" style="font-size: 16px; left: 0; color: #80D0FF;"></i>
                                 {{trip.start_display_name}}
                                 </div>
 
                             <!-- Destination for Trip -->
-                            <div class="diary-street" ng-click="showDetail($event, trip)">
-                                <i class="icon ion-ios-location" style="font-size: 16px; left: 0; color: #0088ce;"></i>
+                            <div class="diary-street two-lines" ng-click="showDetail($event, trip)">
+                                <i class="icon ion-flag" style="font-size: 16px; left: 0; color: #0088ce;"></i>
                                 {{trip.end_display_name}}
                             </div>
                         </div>