diff --git a/css/80_app.css b/css/80_app.css
index 9371b5350..9948bd407 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -987,10 +987,15 @@ a.hide-toggle {
 .preset-icon-line path.line {
     cursor: inherit;
 }
-.preset-icon-line circle.vertex {
+.preset-icon-line circle.vertex,
+.preset-icon-fill circle.vertex {
     fill: #fff;
     stroke: rgba(0, 0, 0, 0.25);
 }
+.preset-icon-fill circle.midpoint {
+    fill: transparent;
+    stroke: rgba(0, 0, 0, 0.25);
+}
 /* use a consistent stroke width */
 .preset-icon-line path.line.stroke {
     stroke-width: 2 !important;
@@ -1018,19 +1023,6 @@ a.hide-toggle {
     fill: #efefef;
     backface-visibility: hidden;
 }
-.preset-icon-frame {
-    width: 100%;
-    height:100%;
-    position: absolute;
-}
-.preset-icon-frame .icon{
-    position: absolute;
-    top: 12%;
-    left: 12%;
-    width: 76%;
-    height: 76%;
-    margin: auto;
-}
 
 .preset-icon {
     width: 100%;
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index daaa2110b..c421561d4 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -56,6 +56,28 @@ export function uiPresetIcon() {
         fillEnter.append('path')
             .attr('d', data)
             .attr('class', 'line area stroke');
+
+        var r = 2.5;
+        var coordinates = [c1, c2];
+        for (var xIndex in coordinates) {
+            for (var yIndex in coordinates) {
+                fillEnter.append('circle')
+                    .attr('class', 'vertex')
+                    .attr('cx', coordinates[xIndex])
+                    .attr('cy', coordinates[yIndex])
+                    .attr('r', r);
+            }
+        }
+
+        var midCoordinates = [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]];
+        for (var index in midCoordinates) {
+            var loc = midCoordinates[index];
+            fillEnter.append('circle')
+                .attr('class', 'midpoint')
+                .attr('cx', loc[0])
+                .attr('cy', loc[1])
+                .attr('r', 1.25);
+        }
     }
 
     function renderLine(lineEnter) {
@@ -165,18 +187,6 @@ export function uiPresetIcon() {
             .attr('class', 'line casing ' + tagClasses);
 
 
-        var areaFrame = container.selectAll('.preset-icon-frame')
-            .data((geom === 'area') ? [0] : []);
-
-        areaFrame.exit()
-            .remove();
-
-        areaFrame = areaFrame.enter()
-            .append('div')
-            .attr('class', 'preset-icon-frame')
-            .call(svgIcon('#iD-preset-icon-frame'));
-
-
         var icon = container.selectAll('.preset-icon')
             .data([0]);
 
diff --git a/svg/iD-sprite/graphics/preset-icon-frame.svg b/svg/iD-sprite/graphics/preset-icon-frame.svg
deleted file mode 100644
index b14ba48f7..000000000
--- a/svg/iD-sprite/graphics/preset-icon-frame.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="45" height="45" viewBox="0 0 45 45">
-    <path d="M7,3.5 C7,5.433 5.433,7 3.5,7 C1.567,7 -0,5.433 -0,3.5 C-0,1.567 1.567,-0 3.5,-0 C5.433,-0 7,1.567 7,3.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M3.5,23.999 C2.963,24 2.467,23.714 2.199,23.25 C1.93,22.786 1.93,22.213 2.199,21.749 C2.467,21.284 2.963,20.999 3.5,20.999 C4.327,21.001 4.998,21.672 4.998,22.499 C4.998,23.327 4.327,23.998 3.5,23.999 z" fill="#000000" opacity="0.2"/>
-    <path d="M7,41.5 C7,43.433 5.433,45 3.5,45 C1.567,45 -0,43.433 -0,41.5 C-0,39.567 1.567,38 3.5,38 C5.433,38 7,39.567 7,41.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M24,41.5 C24,42.328 23.328,43 22.5,43 C21.672,43 21,42.328 21,41.5 C21,40.672 21.672,40 22.5,40 C23.328,40 24,40.672 24,41.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M45,41.5 C45,43.433 43.433,45 41.5,45 C39.567,45 38,43.433 38,41.5 C38,39.567 39.567,38 41.5,38 C43.433,38 45,39.567 45,41.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M41.5,23.999 C40.672,23.999 40.001,23.327 40.001,22.499 C40.001,21.671 40.672,21 41.5,20.999 C42.329,20.999 43.001,21.67 43.001,22.499 C43.001,23.328 42.329,24 41.5,23.999 z" fill="#000000" opacity="0.2"/>
-    <path d="M45,3.5 C45,5.433 43.433,7 41.5,7 C39.567,7 38,5.433 38,3.5 C38,1.567 39.567,0 41.5,0 C43.433,0 45,1.567 45,3.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M24,3.5 C24,4.328 23.328,5 22.5,5 C21.672,5 21,4.328 21,3.5 C21,2.672 21.672,2 22.5,2 C23.328,2 24,2.672 24,3.5 z" fill="#000000" opacity="0.2"/>
-    <path d="M6,3.5 C6,4.881 4.881,6 3.5,6 C2.119,6 1,4.881 1,3.5 C1,2.119 2.119,1 3.5,1 C4.881,1 6,2.119 6,3.5 z" fill="#FFFFFF"/>
-    <path d="M3.5,22 L3.5,22 C3.776,22 4,22.224 4,22.5 L4,22.5 C4,22.776 3.776,23 3.5,23 L3.5,23 C3.224,23 3,22.776 3,22.5 L3,22.5 C3,22.224 3.224,22 3.5,22 z" fill="#FFFFFF" opacity="0.5"/>
-    <path d="M6,41.5 C6,42.881 4.881,44 3.5,44 C2.119,44 1,42.881 1,41.5 C1,40.119 2.119,39 3.5,39 C4.881,39 6,40.119 6,41.5 z" fill="#FFFFFF"/>
-    <path d="M23,41.5 L23,41.5 C23,41.776 22.776,42 22.5,42 L22.5,42 C22.224,42 22,41.776 22,41.5 L22,41.5 C22,41.224 22.224,41 22.5,41 L22.5,41 C22.776,41 23,41.224 23,41.5 z" fill="#FFFFFF" opacity="0.5"/>
-    <path d="M44,41.5 C44,42.881 42.881,44 41.5,44 C40.119,44 39,42.881 39,41.5 C39,40.119 40.119,39 41.5,39 C42.881,39 44,40.119 44,41.5 z" fill="#FFFFFF"/>
-    <path d="M41.5,22 L41.5,22 C41.776,22 42,22.224 42,22.5 L42,22.5 C42,22.776 41.776,23 41.5,23 L41.5,23 C41.224,23 41,22.776 41,22.5 L41,22.5 C41,22.224 41.224,22 41.5,22 z" fill="#FFFFFF" opacity="0.5"/>
-    <path d="M44,3.5 C44,4.881 42.881,6 41.5,6 C40.119,6 39,4.881 39,3.5 C39,2.119 40.119,1 41.5,1 C42.881,1 44,2.119 44,3.5 z" fill="#FFFFFF"/>
-    <path d="M23,3.5 L23,3.5 C23,3.776 22.776,4 22.5,4 L22.5,4 C22.224,4 22,3.776 22,3.5 L22,3.5 C22,3.224 22.224,3 22.5,3 L22.5,3 C22.776,3 23,3.224 23,3.5 z" fill="#FFFFFF" opacity="0.5"/>
-</svg>