diff --git a/css/80_app.css b/css/80_app.css
index fdd2bac64..7f92de993 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -951,8 +951,13 @@ a.hide-toggle {
 .preset-icon-line {
     margin: auto;
     position: absolute;
-    left: 10px;
+    left: 8px;
     top: 30px;
+    width: 44px;
+}
+.preset-icon-line svg {
+    left: 2px;
+    right: 2px;
 }
 .preset-icon-line path.line {
     cursor: inherit;
@@ -965,6 +970,21 @@ a.hide-toggle {
 .preset-icon-line path.line.casing {
     stroke-width: 3.5 !important;
 }
+.preset-icon-line .vertex {
+    width: 6px;
+    height: 6px;
+    background: #fff;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    position: absolute;
+    top: 10.5px;
+}
+.preset-icon-line .vertex.vertex-left {
+    left: 0;
+}
+.preset-icon-line .vertex.vertex-right {
+    right: 0;
+}
 
 .preset-icon-fill-area {
     cursor: inherit;
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index e821961a9..db716e5a0 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -64,18 +64,26 @@ export function uiPresetIcon() {
             .remove();
 
         line = line.enter()
-            .append('svg')
+            .append('div')
             .attr('class', 'preset-icon-line')
-            .attr('width', 40)
-            .attr('height', 30)
             .merge(line);
 
         line.html('');
 
-        line.append('path')
+        line.append('div')
+            .attr('class', 'vertex vertex-left');
+        line.append('div')
+            .attr('class', 'vertex vertex-right');
+
+        var lineSvg = line.append('svg')
+            .attr('width', 40)
+            .attr('height', 20)
+            .merge(line);
+
+        lineSvg.append('path')
             .attr('d', 'M0 13.5 L40 13.5')
             .attr('class', 'line casing ' + tagClasses);
-        line.append('path')
+        lineSvg.append('path')
             .attr('d', 'M0 13.5 L40 13.5')
             .attr('class', 'line stroke ' + tagClasses);