diff --git a/.stylelintrc b/.stylelintrc
index a1c8ca89778..ed957aa8af0 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -5,6 +5,9 @@
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always-multi-line",
     "declaration-block-single-line-max-declarations": 3,
-    "selector-class-pattern": "mapboxgl-[a-z-]+"
+    "selector-class-pattern": "mapboxgl-[a-z-]+",
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["svg-load"]
+    }]
   }
 }
diff --git a/debug/debug.html b/debug/debug.html
index 6e1da10f4fb..896332b3ca6 100644
--- a/debug/debug.html
+++ b/debug/debug.html
@@ -52,6 +52,7 @@
     }
 }));
 map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.FullscreenControl());
 
 map.on('load', function() {
     map.addSource('geojson', {
diff --git a/postcss.config.js b/postcss.config.js
index 33757c2ac37..bce0de8c729 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,16 @@
 module.exports = {
     plugins: [
         require('postcss-inline-svg'),
-        require('cssnano')
+        require('cssnano')({
+            preset: ['default', {
+                svgo: {
+                    plugins: [{
+                        removeViewBox: false
+                    }, {
+                        removeDimensions: false
+                    }],
+                },
+            }],
+        }),
     ]
 }
diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index be30547d57f..8fd16c60fb0 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -16,7 +16,7 @@
 }
 
 .mapboxgl-canvas-container.mapboxgl-interactive,
-.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass {
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
     cursor: -webkit-grab;
     cursor: -moz-grab;
     cursor: grab;
@@ -31,7 +31,7 @@
 }
 
 .mapboxgl-canvas-container.mapboxgl-interactive:active,
-.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass:active {
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
     cursor: -webkit-grabbing;
     cursor: -moz-grabbing;
     cursor: grabbing;
@@ -84,9 +84,15 @@
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
-.mapboxgl-ctrl-group > button {
-    width: 30px;
-    height: 30px;
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl-group:not(:empty) {
+        box-shadow: 0 0 0 2px ButtonText;
+    }
+}
+
+.mapboxgl-ctrl-group button {
+    width: 29px;
+    height: 29px;
     display: block;
     padding: 0;
     outline: none;
@@ -96,97 +102,224 @@
     cursor: pointer;
 }
 
-.mapboxgl-ctrl-group > button + button {
+.mapboxgl-ctrl-group button + button {
     border-top: 1px solid #ddd;
 }
 
+.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl-icon {
+        background-color: transparent;
+    }
+
+    .mapboxgl-ctrl-group button + button {
+        border-top: 1px solid ButtonText;
+    }
+}
+
 /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
-.mapboxgl-ctrl > button::-moz-focus-inner {
+.mapboxgl-ctrl button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
-.mapboxgl-ctrl-group > button:focus {
+.mapboxgl-ctrl-group button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.mapboxgl-ctrl > button:not(:disabled):hover {
+.mapboxgl-ctrl button:disabled {
+    cursor: not-allowed;
+}
+
+.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+    opacity: 0.25;
+}
+
+.mapboxgl-ctrl button:not(:disabled):hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.mapboxgl-ctrl-group > button:focus:focus-visible {
+.mapboxgl-ctrl-group button:focus:focus-visible {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.mapboxgl-ctrl-group > button:focus:not(:focus-visible) {
+.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
     box-shadow: none;
 }
 
-.mapboxgl-ctrl-group > button:focus:first-child {
+.mapboxgl-ctrl-group button:focus:first-child {
     border-radius: 4px 4px 0 0;
 }
 
-.mapboxgl-ctrl-group > button:focus:last-child {
+.mapboxgl-ctrl-group button:focus:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-.mapboxgl-ctrl-group > button:focus:only-child {
+.mapboxgl-ctrl-group button:focus:only-child {
     border-radius: inherit;
 }
 
-.mapboxgl-ctrl-icon,
-.mapboxgl-ctrl-icon > .mapboxgl-ctrl-compass-arrow {
-    speak: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill: #333);
 }
 
-.mapboxgl-ctrl-icon {
-    padding: 5px;
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill: #333);
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-icon-disabled {
-    opacity: 0.25;
-    border-color: #373737;
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill: #fff);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill: #fff);
+    }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg');
+@media (-ms-high-contrast: black-on-white) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill: #000);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill: #000);
+    }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg');
+.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+    background-image: svg-load('svg/mapboxgl-ctrl-fullscreen.svg', fill: #333);
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#333);
-    content: "";
-    display: block;
-    width: 100%;
-    height: 100%;
+.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-shrink);
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate-disabled.svg', fill=#aaa);
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-fullscreen.svg', fill: #fff);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-shrink.svg', fill: #fff);
+    }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-fullscreen.svg', fill: #000);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-shrink.svg', fill: #000);
+    }
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    background-image: svg-load('svg/mapboxgl-ctrl-compass.svg', fill: #333);
+}
+
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+        @svg-load ctrl-compass-white url(svg/mapboxgl-ctrl-compass.svg) {
+            fill: #fff;
+            #south { fill: #999; }
+        }
+
+        background-image: svg-inline(ctrl-compass-white);
+    }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#33b5e5);
+@media (-ms-high-contrast: black-on-white) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+        background-image: svg-load('svg/mapboxgl-ctrl-compass.svg', fill: #000);
+    }
+}
+
+@svg-load ctrl-geolocate url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #333;
+    #stroke { display: none; }
+}
+
+@svg-load ctrl-geolocate-white url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #fff;
+    #stroke { display: none; }
+}
+
+@svg-load ctrl-geolocate-black url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #000;
+    #stroke { display: none; }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#e58978);
+@svg-load ctrl-geolocate-disabled url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #aaa;
+    #stroke { fill: #f00; }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate-background.svg', fill=#33b5e5);
+@svg-load ctrl-geolocate-disabled-white url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #999;
+    #stroke { fill: #f00; }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error::before {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate-background.svg', fill=#e54e33);
+@svg-load ctrl-geolocate-disabled-black url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #666;
+    #stroke { fill: #f00; }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting::before {
+@svg-load ctrl-geolocate-active url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #33b5e5;
+    #stroke { display: none; }
+}
+
+@svg-load ctrl-geolocate-active-error url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #e58978;
+    #stroke { display: none; }
+}
+
+@svg-load ctrl-geolocate-background url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #33b5e5;
+    #stroke { display: none; }
+    #dot { display: none; }
+}
+
+@svg-load ctrl-geolocate-background-error url(svg/mapboxgl-ctrl-geolocate.svg) {
+    fill: #e54e33;
+    #stroke { display: none; }
+    #dot { display: none; }
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate-disabled);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate-active);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate-active-error);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate-background);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
+    background-image: svg-inline(ctrl-geolocate-background-error);
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
     -webkit-animation: mapboxgl-spin 2s infinite linear;
     -moz-animation: mapboxgl-spin 2s infinite linear;
     -o-animation: mapboxgl-spin 2s infinite linear;
@@ -194,6 +327,42 @@
     animation: mapboxgl-spin 2s infinite linear;
 }
 
+@media (-ms-high-contrast: active) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-white);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-disabled-white);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-active);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-active-error);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-background);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-background-error);
+    }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-black);
+    }
+
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+        background-image: svg-inline(ctrl-geolocate-disabled-black);
+    }
+}
+
 @-webkit-keyframes mapboxgl-spin {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(360deg); }
@@ -219,37 +388,42 @@
     100% { transform: rotate(360deg); }
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen {
-    background-image: svg-load('svg/mapboxgl-ctrl-fullscreen.svg');
-}
-
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink {
-    background-image: svg-load('svg/mapboxgl-ctrl-shrink.svg');
-}
-
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
-    width: 20px;
-    height: 20px;
-    margin: 5px;
-    background-image: svg-load('svg/mapboxgl-ctrl-compass.svg');
-    background-repeat: no-repeat;
-    display: inline-block;
-}
-
 a.mapboxgl-ctrl-logo {
-    width: 85px;
-    height: 21px;
-    margin: 0 0 -3px -3px;
+    width: 88px;
+    height: 23px;
+    margin: 0 0 -4px -4px;
     display: block;
     background-repeat: no-repeat;
     cursor: pointer;
+    overflow: hidden;
     background-image: svg-load('svg/mapboxgl-ctrl-logo.svg');
 }
 
 a.mapboxgl-ctrl-logo.mapboxgl-compact {
-    width: 21px;
-    height: 21px;
-    background-image: svg-load('svg/mapboxgl-ctrl-logo-compact.svg');
+    width: 23px;
+}
+
+@media (-ms-high-contrast: active) {
+    a.mapboxgl-ctrl-logo {
+        @svg-load ctrl-logo-white url(svg/mapboxgl-ctrl-logo.svg) {
+            #outline { opacity: 1; }
+            #fill { opacity: 1; }
+        }
+
+        background-color: transparent;
+        background-image: svg-inline(ctrl-logo-white);
+    }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+    a.mapboxgl-ctrl-logo {
+        @svg-load ctrl-logo-black url(svg/mapboxgl-ctrl-logo.svg) {
+            #outline { opacity: 1; fill: #fff; stroke: #fff; }
+            #fill { opacity: 1; fill: #000; }
+        }
+
+        background-image: svg-inline(ctrl-logo-black);
+    }
 }
 
 .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
@@ -321,6 +495,18 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     }
 }
 
+@media screen and (-ms-high-contrast: active) {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        background-image: svg-load('svg/mapboxgl-ctrl-attrib.svg', fill=#fff);
+    }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        background-image: svg-load('svg/mapboxgl-ctrl-attrib.svg');
+    }
+}
+
 .mapboxgl-ctrl-attrib a {
     color: rgba(0, 0, 0, 0.75);
     text-decoration: none;
diff --git a/src/css/svg/mapboxgl-ctrl-attrib.svg b/src/css/svg/mapboxgl-ctrl-attrib.svg
index 3bedbb0ea6d..f96152c9d4f 100644
--- a/src/css/svg/mapboxgl-ctrl-attrib.svg
+++ b/src/css/svg/mapboxgl-ctrl-attrib.svg
@@ -1,3 +1,3 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-	<path fill='#333333' fill-rule='evenodd' d='M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M9,7a1,1 0 1,0 2,0a1,1 0 1,0 -2,0 M9,10a1,1 0 1,1 2,0l0,3a1,1 0 1,1 -2,0' />
+<svg width="24" height="24" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd">
+    <path d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0"/>
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-compass.svg b/src/css/svg/mapboxgl-ctrl-compass.svg
index dd5e2a880ab..8df846a3fce 100644
--- a/src/css/svg/mapboxgl-ctrl-compass.svg
+++ b/src/css/svg/mapboxgl-ctrl-compass.svg
@@ -1,4 +1,4 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-	<polygon fill='#333333' points='6,9 10,1 14,9'/>
-	<polygon fill='#CCCCCC' points='6,11 10,19 14,11 '/>
-</svg>
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.5 14l4-8 4 8h-8z"/>
+    <path id="south" d="M10.5 16l4 8 4-8h-8z" fill="#ccc"/>
+</svg>
\ No newline at end of file
diff --git a/src/css/svg/mapboxgl-ctrl-fullscreen.svg b/src/css/svg/mapboxgl-ctrl-fullscreen.svg
index 523225231cd..724408d4ad1 100644
--- a/src/css/svg/mapboxgl-ctrl-fullscreen.svg
+++ b/src/css/svg/mapboxgl-ctrl-fullscreen.svg
@@ -1,3 +1,3 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-	<path d='M 5 4 C 4.5 4 4 4.5 4 5 L 4 6 L 4 9 L 4.5 9 L 5.7773438 7.296875 C 6.7771319 8.0602131 7.835765 8.9565728 8.890625 10 C 7.8257121 11.0633 6.7761791 11.951675 5.78125 12.707031 L 4.5 11 L 4 11 L 4 15 C 4 15.5 4.5 16 5 16 L 9 16 L 9 15.5 L 7.2734375 14.205078 C 8.0428931 13.187886 8.9395441 12.133481 9.9609375 11.068359 C 11.042371 12.14699 11.942093 13.2112 12.707031 14.21875 L 11 15.5 L 11 16 L 14 16 L 15 16 C 15.5 16 16 15.5 16 15 L 16 14 L 16 11 L 15.5 11 L 14.205078 12.726562 C 13.177985 11.949617 12.112718 11.043577 11.037109 10.009766 C 12.151856 8.981061 13.224345 8.0798624 14.228516 7.3046875 L 15.5 9 L 16 9 L 16 5 C 16 4.5 15.5 4 15 4 L 11 4 L 11 4.5 L 12.703125 5.7773438 C 11.932647 6.7864834 11.026693 7.8554712 9.9707031 8.9199219 C 8.9584739 7.8204943 8.0698767 6.7627188 7.3046875 5.7714844 L 9 4.5 L 9 4 L 6 4 L 5 4 z ' />
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z"/>
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-geolocate-background.svg b/src/css/svg/mapboxgl-ctrl-geolocate-background.svg
deleted file mode 100644
index 5f25f83d86f..00000000000
--- a/src/css/svg/mapboxgl-ctrl-geolocate-background.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z' />
-</svg>
diff --git a/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg b/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg
deleted file mode 100644
index 697a298e039..00000000000
--- a/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path d="M14.434,7.688c0.213,0.407 0.371,0.848 0.466,1.312l0.1,0c0,0 1,0 1,1c0,1 -1,1 -1,1l-0.1,0c-0.4,1.96 -1.94,3.5 -3.9,3.9l0,0.1c0,0 0,1 -1,1c-1,0 -1,-1 -1,-1l0,-0.1c-0.477,-0.097 -0.93,-0.262 -1.347,-0.484c0.383,-0.377 0.767,-0.753 1.151,-1.129c0.374,0.138 0.777,0.213 1.196,0.213c1.92,0 3.5,-1.58 3.5,-3.5c0,-0.403 -0.07,-0.791 -0.197,-1.153c0.379,-0.384 0.756,-0.77 1.131,-1.159Zm-9.334,1.312c0.4,-1.961 1.94,-3.5 3.9,-3.9l0,-0.1c0,0 0,-1 1,-1c1,0 1,1 1,1l0,0.1c0.477,0.097 0.93,0.262 1.347,0.484c-0.383,0.377 -0.767,0.753 -1.151,1.129c-0.374,-0.138 -0.777,-0.213 -1.196,-0.213c-1.92,0 -3.5,1.58 -3.5,3.5c0,0.403 0.07,0.791 0.197,1.153c-0.379,0.384 -0.756,0.77 -1.131,1.159c-0.213,-0.407 -0.371,-0.848 -0.466,-1.312l-0.1,0c-0.005,0 -1,-0.003 -1,-1c0,-0.997 0.995,-1 1,-1l0.1,0Z" />
-  <path d="M14,5l1,1l-9,9l-1,-1l9,-9Z" />
-</svg>
diff --git a/src/css/svg/mapboxgl-ctrl-geolocate.svg b/src/css/svg/mapboxgl-ctrl-geolocate.svg
index cc907c33cc8..4b2986663dd 100644
--- a/src/css/svg/mapboxgl-ctrl-geolocate.svg
+++ b/src/css/svg/mapboxgl-ctrl-geolocate.svg
@@ -1,3 +1,5 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-	<path d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z' />
+<svg width="29" height="29" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z"/>
+    <circle id="dot" cx="10" cy="10" r="2"/>
+    <path id="stroke" d="M14 5l1 1-9 9-1-1 9-9z"/>
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-logo-compact.svg b/src/css/svg/mapboxgl-ctrl-logo-compact.svg
deleted file mode 100644
index 6a1c7e9f6d2..00000000000
--- a/src/css/svg/mapboxgl-ctrl-logo-compact.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21 21" style="enable-background:new 0 0 21 21;" xml:space="preserve"><g transform="translate(0,0.01)"><path d="m 10.5,1.24 c -5.11,0 -9.25,4.15 -9.25,9.25 0,5.1 4.15,9.25 9.25,9.25 5.1,0 9.25,-4.15 9.25,-9.25 0,-5.11 -4.14,-9.25 -9.25,-9.25 z m 4.39,11.53 c -1.93,1.93 -4.78,2.31 -6.7,2.31 -0.7,0 -1.41,-0.05 -2.1,-0.16 0,0 -1.02,-5.64 2.14,-8.81 0.83,-0.83 1.95,-1.28 3.13,-1.28 1.27,0 2.49,0.51 3.39,1.42 1.84,1.84 1.89,4.75 0.14,6.52 z" style="opacity:0.9;fill:#ffffff;enable-background:new" class="st0" /><path d="M 10.5,-0.01 C 4.7,-0.01 0,4.7 0,10.49 c 0,5.79 4.7,10.5 10.5,10.5 5.8,0 10.5,-4.7 10.5,-10.5 C 20.99,4.7 16.3,-0.01 10.5,-0.01 Z m 0,19.75 c -5.11,0 -9.25,-4.15 -9.25,-9.25 0,-5.1 4.14,-9.26 9.25,-9.26 5.11,0 9.25,4.15 9.25,9.25 0,5.13 -4.14,9.26 -9.25,9.26 z" style="opacity:0.35;enable-background:new" class="st1" /><path d="M 14.74,6.25 C 12.9,4.41 9.98,4.35 8.23,6.1 5.07,9.27 6.09,14.91 6.09,14.91 c 0,0 5.64,1.02 8.81,-2.14 C 16.64,11 16.59,8.09 14.74,6.25 Z m -2.27,4.09 -0.91,1.87 -0.9,-1.87 -1.86,-0.91 1.86,-0.9 0.9,-1.87 0.91,1.87 1.86,0.9 z" style="opacity:0.35;enable-background:new" class="st1" /><polygon points="11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 14.33,9.43 12.47,10.34 " style="opacity:0.9;fill:#ffffff;enable-background:new" class="st0" /></g></svg>
diff --git a/src/css/svg/mapboxgl-ctrl-logo.svg b/src/css/svg/mapboxgl-ctrl-logo.svg
index 0be6b6fcb7c..3d24c610eb9 100644
--- a/src/css/svg/mapboxgl-ctrl-logo.svg
+++ b/src/css/svg/mapboxgl-ctrl-logo.svg
@@ -1 +1,20 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 84.49 21" style="enable-background:new 0 0 84.49 21;" xml:space="preserve"><g>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M83.25,14.26c0,0.12-0.09,0.21-0.21,0.21h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39l-1.44,2.39    c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68L76.2,6.84    c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.4-2.35    c0.06-0.11,0.18-0.17,0.3-0.17H83c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.37,3.63l2.43,3.67    C83.24,14.18,83.25,14.22,83.25,14.26z"/>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M66.24,9.59c-0.39-1.88-1.96-3.28-3.84-3.28c-1.03,0-2.03,0.42-2.73,1.18V3.51c0-0.13-0.1-0.23-0.23-0.23h-1.4    c-0.13,0-0.23,0.11-0.23,0.23v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.11,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.73,1.18    c1.88,0,3.45-1.41,3.84-3.29C66.37,10.79,66.37,10.18,66.24,9.59L66.24,9.59z M62.08,13c-1.32,0-2.39-1.11-2.41-2.48v-0.06    c0.02-1.38,1.09-2.48,2.41-2.48s2.42,1.12,2.42,2.51S63.41,13,62.08,13z"/>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M71.67,6.32c-1.98-0.01-3.72,1.35-4.16,3.29c-0.13,0.59-0.13,1.19,0,1.77c0.44,1.94,2.17,3.32,4.17,3.3    c2.35,0,4.26-1.87,4.26-4.19S74.04,6.32,71.67,6.32z M71.65,13.01c-1.33,0-2.42-1.12-2.42-2.51s1.08-2.52,2.42-2.52    c1.33,0,2.42,1.12,2.42,2.51S72.99,13,71.65,13.01L71.65,13.01z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M62.08,7.98c-1.32,0-2.39,1.11-2.41,2.48v0.06C59.68,11.9,60.75,13,62.08,13s2.42-1.12,2.42-2.51    S63.41,7.98,62.08,7.98z M62.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25    c0.63,0,1.17,0.57,1.17,1.27C63.24,11.2,62.73,11.76,62.08,11.76z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M71.65,7.98c-1.33,0-2.42,1.12-2.42,2.51S70.32,13,71.65,13s2.42-1.12,2.42-2.51S72.99,7.98,71.65,7.98z     M71.65,11.76c-0.64,0-1.17-0.57-1.17-1.27c0-0.7,0.53-1.26,1.17-1.26s1.17,0.57,1.17,1.27C72.82,11.21,72.29,11.76,71.65,11.76z"    />  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M45.74,6.53h-1.4c-0.13,0-0.23,0.11-0.23,0.23v0.73c-0.71-0.75-1.7-1.18-2.73-1.18    c-2.17,0-3.94,1.87-3.94,4.19s1.77,4.19,3.94,4.19c1.04,0,2.03-0.43,2.73-1.19v0.73c0,0.13,0.1,0.23,0.23,0.23h1.4    c0.13,0,0.23-0.11,0.23-0.23V6.74c0-0.12-0.09-0.22-0.22-0.22C45.75,6.53,45.75,6.53,45.74,6.53z M44.12,10.53    C44.11,11.9,43.03,13,41.71,13s-2.42-1.12-2.42-2.51s1.08-2.52,2.4-2.52c1.33,0,2.39,1.11,2.41,2.48L44.12,10.53z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M41.71,7.98c-1.33,0-2.42,1.12-2.42,2.51S40.37,13,41.71,13s2.39-1.11,2.41-2.48v-0.06    C44.1,9.09,43.03,7.98,41.71,7.98z M40.55,10.49c0-0.7,0.52-1.27,1.17-1.27c0.64,0,1.14,0.56,1.17,1.25v0.04    c-0.01,0.68-0.53,1.24-1.17,1.24C41.08,11.75,40.55,11.19,40.55,10.49z"/>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M52.41,6.32c-1.03,0-2.03,0.42-2.73,1.18V6.75c0-0.13-0.1-0.23-0.23-0.23h-1.4c-0.13,0-0.23,0.11-0.23,0.23    v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.1,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.74,1.18c2.17,0,3.94-1.87,3.94-4.19    S54.58,6.32,52.41,6.32z M52.08,13.01c-1.32,0-2.39-1.11-2.42-2.48v-0.07c0.02-1.38,1.09-2.49,2.4-2.49c1.32,0,2.41,1.12,2.41,2.51    S53.4,13,52.08,13.01L52.08,13.01z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M52.08,7.98c-1.32,0-2.39,1.11-2.42,2.48v0.06c0.03,1.38,1.1,2.48,2.42,2.48s2.41-1.12,2.41-2.51    S53.4,7.98,52.08,7.98z M52.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25c0.63,0,1.17,0.58,1.17,1.27    S52.72,11.76,52.08,11.76z"/>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M36.08,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68c0-0.98-0.74-1.71-1.62-1.71    c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.11,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68    c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V6.74    c0.01-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03c1.09,0,2.09,0.6,2.6,1.55    c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78L36.08,14.24z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M84.34,13.59l-0.07-0.13l-1.96-2.99l1.94-2.95c0.44-0.67,0.26-1.56-0.41-2.02c-0.02,0-0.03,0-0.04-0.01    c-0.23-0.15-0.5-0.22-0.78-0.22h-1.61c-0.56,0-1.08,0.29-1.37,0.78L79.72,6.6l-0.34-0.56C79.09,5.56,78.57,5.27,78,5.27h-1.6    c-0.6,0-1.13,0.37-1.35,0.92c-2.19-1.66-5.28-1.47-7.26,0.45c-0.35,0.34-0.65,0.72-0.89,1.14c-0.9-1.62-2.58-2.72-4.5-2.72    c-0.5,0-1.01,0.07-1.48,0.23V3.51c0-0.82-0.66-1.48-1.47-1.48h-1.4c-0.81,0-1.47,0.66-1.47,1.47v3.75    c-0.95-1.36-2.5-2.18-4.17-2.19c-0.74,0-1.46,0.16-2.12,0.47c-0.24-0.17-0.54-0.26-0.84-0.26h-1.4c-0.45,0-0.87,0.21-1.15,0.56    c-0.02-0.03-0.04-0.05-0.07-0.08c-0.28-0.3-0.68-0.47-1.09-0.47h-1.39c-0.3,0-0.6,0.09-0.84,0.26c-0.67-0.3-1.39-0.46-2.12-0.46    c-1.83,0-3.43,1-4.37,2.5c-0.2-0.46-0.48-0.89-0.83-1.25c-0.8-0.81-1.89-1.25-3.02-1.25h-0.01c-0.89,0.01-1.75,0.33-2.46,0.88    c-0.74-0.57-1.64-0.88-2.57-0.88H28.1c-0.29,0-0.58,0.03-0.86,0.11c-0.28,0.06-0.56,0.16-0.82,0.28c-0.21-0.12-0.45-0.18-0.7-0.18    h-1.4c-0.82,0-1.47,0.66-1.47,1.47v7.5c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.48-0.66,1.48-1.48l0,0V9.79    c0.03-0.36,0.23-0.59,0.36-0.59c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41c0.82,0,1.47-0.66,1.47-1.47    l-0.01-4.57c0.06-0.32,0.25-0.47,0.35-0.47c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41    c0.82,0,1.47-0.66,1.47-1.47v-0.38c0.96,1.29,2.46,2.06,4.06,2.06c0.74,0,1.46-0.16,2.12-0.47c0.24,0.17,0.54,0.26,0.84,0.26h1.39    c0.3,0,0.6-0.09,0.84-0.26v2.01c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.47-0.66,1.47-1.47v-1.77c0.48,0.15,0.99,0.23,1.49,0.22    c1.7,0,3.22-0.87,4.17-2.2v0.52c0,0.82,0.66,1.47,1.47,1.47h1.4c0.3,0,0.6-0.09,0.84-0.26c0.66,0.31,1.39,0.47,2.12,0.47    c1.92,0,3.6-1.1,4.49-2.73c1.54,2.65,4.95,3.53,7.58,1.98c0.18-0.11,0.36-0.22,0.53-0.36c0.22,0.55,0.76,0.91,1.35,0.9H78    c0.56,0,1.08-0.29,1.37-0.78l0.37-0.61l0.37,0.61c0.29,0.48,0.81,0.78,1.38,0.78h1.6c0.81,0,1.46-0.66,1.45-1.46    C84.49,14.02,84.44,13.8,84.34,13.59L84.34,13.59z M35.86,14.47h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68    c0-0.98-0.74-1.71-1.62-1.71c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23    V9.68c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23    V6.74c0.01-0.13,0.11-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03    c1.09,0,2.09,0.6,2.6,1.55c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78l0.01,5.16C36.09,14.36,35.98,14.46,35.86,14.47    L35.86,14.47z M45.97,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V13.5c-0.7,0.76-1.69,1.18-2.72,1.18    c-2.17,0-3.94-1.87-3.94-4.19s1.77-4.19,3.94-4.19c1.03,0,2.02,0.43,2.73,1.18V6.74c0-0.13,0.1-0.23,0.23-0.23h1.4    c0.12-0.01,0.22,0.08,0.23,0.21c0,0.01,0,0.01,0,0.02v7.51h-0.01V14.24z M52.41,14.67c-1.03,0-2.02-0.43-2.73-1.18v3.97    c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.1-0.23-0.23V6.75c0-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.23,0.11,0.23,0.23v0.73    c0.71-0.76,1.7-1.18,2.73-1.18c2.17,0,3.94,1.86,3.94,4.18S54.58,14.67,52.41,14.67z M66.24,11.39c-0.39,1.87-1.96,3.29-3.84,3.29    c-1.03,0-2.02-0.43-2.73-1.18v0.73c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V3.51c0-0.13,0.1-0.23,0.23-0.23    h1.4c0.13,0,0.23,0.11,0.23,0.23v3.97c0.71-0.75,1.7-1.18,2.73-1.17c1.88,0,3.45,1.4,3.84,3.28C66.37,10.19,66.37,10.8,66.24,11.39    L66.24,11.39L66.24,11.39z M71.67,14.68c-2,0.01-3.73-1.35-4.17-3.3c-0.13-0.59-0.13-1.19,0-1.77c0.44-1.94,2.17-3.31,4.17-3.3    c2.36,0,4.26,1.87,4.26,4.19S74.03,14.68,71.67,14.68L71.67,14.68z M83.04,14.47h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39    l-1.44,2.39c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68    L76.2,6.84c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.41-2.36    c0.06-0.11,0.18-0.17,0.3-0.17h1.61c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.38,3.64l2.43,3.67    c0.02,0.03,0.03,0.07,0.03,0.12C83.25,14.38,83.16,14.47,83.04,14.47L83.04,14.47L83.04,14.47z"/>  <path class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" d="M10.5,1.24c-5.11,0-9.25,4.15-9.25,9.25s4.15,9.25,9.25,9.25s9.25-4.15,9.25-9.25    C19.75,5.38,15.61,1.24,10.5,1.24z M14.89,12.77c-1.93,1.93-4.78,2.31-6.7,2.31c-0.7,0-1.41-0.05-2.1-0.16c0,0-1.02-5.64,2.14-8.81    c0.83-0.83,1.95-1.28,3.13-1.28c1.27,0,2.49,0.51,3.39,1.42C16.59,8.09,16.64,11,14.89,12.77z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M10.5-0.01C4.7-0.01,0,4.7,0,10.49s4.7,10.5,10.5,10.5S21,16.29,21,10.49C20.99,4.7,16.3-0.01,10.5-0.01z     M10.5,19.74c-5.11,0-9.25-4.15-9.25-9.25s4.14-9.26,9.25-9.26s9.25,4.15,9.25,9.25C19.75,15.61,15.61,19.74,10.5,19.74z"/>  <path class="st1" style="opacity:0.35; enable-background:new;" d="M14.74,6.25C12.9,4.41,9.98,4.35,8.23,6.1c-3.16,3.17-2.14,8.81-2.14,8.81s5.64,1.02,8.81-2.14    C16.64,11,16.59,8.09,14.74,6.25z M12.47,10.34l-0.91,1.87l-0.9-1.87L8.8,9.43l1.86-0.9l0.9-1.87l0.91,1.87l1.86,0.9L12.47,10.34z"    />  <polygon class="st0" style="opacity:0.9; fill: #FFFFFF; enable-background: new;" points="14.33,9.43 12.47,10.34 11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53   "/></g></svg>
\ No newline at end of file
+<svg width="88" height="23" viewBox="0 0 88 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd">
+    <defs>
+        <path id="logo" d="M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z" />
+        <path id="text" d="M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z" />
+    </defs>
+    <mask id="clip">
+        <rect x="0" y="0" width="100%" height="100%" fill="white" />
+        <use xlink:href="#logo" />
+        <use xlink:href="#text" />
+    </mask>
+
+    <g id="outline" opacity="0.3" stroke="#000" stroke-width="3">
+        <circle mask="url(#clip)" cx="11.5" cy="11.5" r="9.25" />
+        <use xlink:href="#text" mask="url(#clip)" />
+    </g>
+    <g id="fill" opacity="0.9" fill="#fff" >
+        <use xlink:href="#logo" />
+        <use xlink:href="#text" />
+    </g>
+</svg>
diff --git a/src/css/svg/mapboxgl-ctrl-shrink.svg b/src/css/svg/mapboxgl-ctrl-shrink.svg
index fd05bfdc1d7..fe6df0966ab 100644
--- a/src/css/svg/mapboxgl-ctrl-shrink.svg
+++ b/src/css/svg/mapboxgl-ctrl-shrink.svg
@@ -1,3 +1,3 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-	<path style='fill:#000000;' d='M 4.2421875 3.4921875 A 0.750075 0.750075 0 0 0 3.71875 4.78125 L 5.9648438 7.0273438 L 4 8.5 L 4 9 L 8 9 C 8.500001 8.9999988 9 8.4999992 9 8 L 9 4 L 8.5 4 L 7.0175781 5.9550781 L 4.78125 3.71875 A 0.750075 0.750075 0 0 0 4.2421875 3.4921875 z M 15.734375 3.4921875 A 0.750075 0.750075 0 0 0 15.21875 3.71875 L 12.984375 5.953125 L 11.5 4 L 11 4 L 11 8 C 11 8.4999992 11.499999 8.9999988 12 9 L 16 9 L 16 8.5 L 14.035156 7.0273438 L 16.28125 4.78125 A 0.750075 0.750075 0 0 0 15.734375 3.4921875 z M 4 11 L 4 11.5 L 5.9648438 12.972656 L 3.71875 15.21875 A 0.75130096 0.75130096 0 1 0 4.78125 16.28125 L 7.0273438 14.035156 L 8.5 16 L 9 16 L 9 12 C 9 11.500001 8.500001 11.000001 8 11 L 4 11 z M 12 11 C 11.499999 11.000001 11 11.500001 11 12 L 11 16 L 11.5 16 L 12.972656 14.035156 L 15.21875 16.28125 A 0.75130096 0.75130096 0 1 0 16.28125 15.21875 L 14.035156 12.972656 L 16 11.5 L 16 11 L 12 11 z ' />
-</svg>
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-in.svg b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
index b26e3d16205..98fb23fab6a 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-in.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
@@ -1,3 +1,3 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path style='fill:#333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z' />
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z"/>
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-out.svg b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
index ab6e9ff222b..4af24deac52 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-out.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
@@ -1,3 +1,3 @@
-<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path style='fill:#333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z' />
-</svg>
+<svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js
index f858ddc21af..a47a39c3171 100644
--- a/src/ui/control/fullscreen_control.js
+++ b/src/ui/control/fullscreen_control.js
@@ -29,7 +29,6 @@ class FullscreenControl {
     _fullscreen: boolean;
     _fullscreenchange: string;
     _fullscreenButton: HTMLElement;
-    _className: string;
     _container: HTMLElement;
 
     constructor(options: Options) {
@@ -54,13 +53,12 @@ class FullscreenControl {
         } else if ('onmsfullscreenchange' in window.document) {
             this._fullscreenchange = 'MSFullscreenChange';
         }
-        this._className = 'mapboxgl-ctrl';
     }
 
     onAdd(map: Map) {
         this._map = map;
         if (!this._container) this._container = this._map.getContainer();
-        this._controlContainer = DOM.create('div', `${this._className} mapboxgl-ctrl-group`);
+        this._controlContainer = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
         if (this._checkFullscreenSupport()) {
             this._setupUI();
         } else {
@@ -86,7 +84,8 @@ class FullscreenControl {
     }
 
     _setupUI() {
-        const button = this._fullscreenButton = DOM.create('button', (`${this._className}-icon ${this._className}-fullscreen`), this._controlContainer);
+        const button = this._fullscreenButton = DOM.create('button', (`mapboxgl-ctrl-fullscreen`), this._controlContainer);
+        DOM.create('span', `mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', true);
         button.type = 'button';
         this._updateTitle();
         this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
@@ -112,8 +111,8 @@ class FullscreenControl {
 
         if ((fullscreenElement === this._container) !== this._fullscreen) {
             this._fullscreen = !this._fullscreen;
-            this._fullscreenButton.classList.toggle(`${this._className}-shrink`);
-            this._fullscreenButton.classList.toggle(`${this._className}-fullscreen`);
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-shrink`);
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-fullscreen`);
             this._updateTitle();
         }
     }
diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js
index 7c2b59215e8..0291c6641ed 100644
--- a/src/ui/control/geolocate_control.js
+++ b/src/ui/control/geolocate_control.js
@@ -30,7 +30,6 @@ const defaultOptions: Options = {
     trackUserLocation: false,
     showUserLocation: true
 };
-const className = 'mapboxgl-ctrl';
 
 let supportsGeolocation;
 
@@ -116,7 +115,7 @@ class GeolocateControl extends Evented {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', `${className} ${className}-group`);
+        this._container = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
         checkGeolocationSupport(this._setupUI);
         return this._container;
     }
@@ -291,9 +290,8 @@ class GeolocateControl extends Evented {
 
     _setupUI(supported: boolean) {
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
-        this._geolocateButton = DOM.create('button',
-            `${className}-icon ${className}-geolocate`,
-            this._container);
+        this._geolocateButton = DOM.create('button', `mapboxgl-ctrl-geolocate`, this._container);
+        DOM.create('span', `mapboxgl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
         this._geolocateButton.type = 'button';
         this._geolocateButton.title = 'Find my location';
         this._geolocateButton.setAttribute('aria-label', 'Find my location');
diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
index e97641715b7..8aa3a456b3c 100644
--- a/src/ui/control/navigation_control.js
+++ b/src/ui/control/navigation_control.js
@@ -36,10 +36,10 @@ class NavigationControl {
     _map: Map;
     options: Options;
     _container: HTMLElement;
-    _zoomInButton: HTMLElement;
-    _zoomOutButton: HTMLElement;
+    _zoomInButton: HTMLButtonElement;
+    _zoomOutButton: HTMLButtonElement;
     _compass: HTMLElement;
-    _compassArrow: HTMLElement;
+    _compassIcon: HTMLElement;
     _handler: DragRotateHandler;
 
     constructor(options: Options) {
@@ -52,36 +52,31 @@ class NavigationControl {
             bindAll([
                 '_updateZoomButtons'
             ], this);
-            this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom in', (e) => this._map.zoomIn({}, {originalEvent: e}));
-            this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            this._zoomInButton = this._createButton('mapboxgl-ctrl-zoom-in', 'Zoom in', (e) => this._map.zoomIn({}, {originalEvent: e}));
+            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
+            this._zoomOutButton = this._createButton('mapboxgl-ctrl-zoom-out', 'Zoom out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
         }
         if (this.options.showCompass) {
             bindAll([
                 '_rotateCompassArrow'
             ], this);
-            this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset bearing to north', (e) => {
+            this._compass = this._createButton('mapboxgl-ctrl-compass', 'Reset bearing to north', (e) => {
                 if (this.options.visualizePitch) {
                     this._map.resetNorthPitch({}, {originalEvent: e});
                 } else {
                     this._map.resetNorth({}, {originalEvent: e});
                 }
             });
-            this._compassArrow = DOM.create('span', 'mapboxgl-ctrl-compass-arrow', this._compass);
+            this._compassIcon = DOM.create('span', 'mapboxgl-ctrl-icon', this._compass);
+            this._compassIcon.setAttribute('aria-hidden', true);
         }
     }
 
     _updateZoomButtons() {
         const zoom = this._map.getZoom();
-        if (zoom === this._map.getMaxZoom()) {
-            this._zoomInButton.classList.add('mapboxgl-ctrl-icon-disabled');
-        } else {
-            this._zoomInButton.classList.remove('mapboxgl-ctrl-icon-disabled');
-        }
-        if (zoom === this._map.getMinZoom()) {
-            this._zoomOutButton.classList.add('mapboxgl-ctrl-icon-disabled');
-        } else {
-            this._zoomOutButton.classList.remove('mapboxgl-ctrl-icon-disabled');
-        }
+        this._zoomInButton.disabled = zoom === this._map.getMaxZoom();
+        this._zoomOutButton.disabled = zoom === this._map.getMinZoom();
     }
 
     _rotateCompassArrow() {
@@ -89,7 +84,7 @@ class NavigationControl {
             `scale(${1 / Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
             `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
 
-        this._compassArrow.style.transform = rotate;
+        this._compassIcon.style.transform = rotate;
     }
 
     onAdd(map: Map) {