diff --git a/src/components/MapControls.js b/src/components/MapControls.js
index 3e8716a..cc3ecd8 100644
--- a/src/components/MapControls.js
+++ b/src/components/MapControls.js
@@ -80,21 +80,23 @@ function MapControls({
               ":active": { color: "secondary" },
             }}
           >
-            <IconButton
-              aria-label={
-                useBrushGridSnapping
-                  ? "Disable Brush Grid Snapping"
-                  : "Enable Brush Grid Snapping"
-              }
-              title={
-                useBrushGridSnapping
-                  ? "Disable Brush Grid Snapping"
-                  : "Enable Brush Grid Snapping"
-              }
-              onClick={() => onBrushGridSnappingChange(!useBrushGridSnapping)}
-            >
-              {useBrushGridSnapping ? <GridOffIcon /> : <GridOnIcon />}
-            </IconButton>
+            {useBrushGridSnapping ? (
+              <IconButton
+                aria-label="Disable Brush Grid Snapping"
+                title="Disable Brush Grid Snapping"
+                onClick={() => onBrushGridSnappingChange(false)}
+              >
+                <GridOnIcon />
+              </IconButton>
+            ) : (
+              <IconButton
+                aria-label="Enable Brush Grid Snapping"
+                title="Enable Brush Grid Snapping"
+                onClick={() => onBrushGridSnappingChange(true)}
+              >
+                <GridOffIcon />
+              </IconButton>
+            )}
             Grid Lock
           </Label>
         </Box>
diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.js
index a1287c2..d7b2950 100644
--- a/src/icons/GridOffIcon.js
+++ b/src/icons/GridOffIcon.js
@@ -8,6 +8,8 @@ function GridOffIcon() {
       viewBox="0 0 24 24"
       width="24"
       fill="currentcolor"
+      // Fixes bug with not firing click event when used in a button
+      style={{ pointerEvents: "none" }}
     >
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path d="M8 4v.89l2 2V4h4v4h-2.89l2 2H14v.89l2 2V10h4v4h-2.89l2 2H20v.89l2 2V4c0-1.1-.9-2-2-2H5.11l2 2H8zm8 0h3c.55 0 1 .45 1 1v3h-4V4zm6.16 17.88L2.12 1.84c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L2 4.55V20c0 1.1.9 2 2 2h15.45l1.3 1.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h3.45l.55.55V14zm6 6h-4v-4h3.45l.55.55V20zm2 0v-1.45L17.45 20H16z" />
diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.js
index 1796b30..0511b25 100644
--- a/src/icons/GridOnIcon.js
+++ b/src/icons/GridOnIcon.js
@@ -8,6 +8,8 @@ function GridOnIcon() {
       viewBox="0 0 24 24"
       width="24"
       fill="currentcolor"
+      // Fixes bug with not firing click event when used in a button
+      style={{ pointerEvents: "none" }}
     >
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h4v4zm0-6H4V5c0-.55.45-1 1-1h3v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm5 12h-3v-4h4v3c0 .55-.45 1-1 1zm1-6h-4v-4h4v4zm0-6h-4V4h3c.55 0 1 .45 1 1v3z" />