diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg
new file mode 100644
index 000000000..5ea953565
--- /dev/null
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+	<path d="M12,8c3.46,0,5.91,2.82,6.79,4c-0.88,1.19-3.33,4-6.79,4c-3.46,0-5.91-2.82-6.79-4C6.09,10.81,8.54,8,12,8 M12,7c-5,0-8,5-8,5s3,5,8,5s8-5,8-5S17,7,12,7L12,7z"/>
+</svg>
diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg
new file mode 100644
index 000000000..79819a7a6
--- /dev/null
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24">
+	<path d="M12,7c-5,0-8,5-8,5s3,5,8,5s8-5,8-5S17,7,12,7z M12,16c-2.21,0-4-1.79-4-4c0-2.21,1.79-4,4-4s4,1.79,4,4C16,14.21,14.21,16,12,16z "/>
+	<circle cx="13" cy="11" r="1.25" />
+</svg>
diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index ee197ea4c..0b04c1431 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -15,8 +15,8 @@
 					:key="layerId"
 				>
 					<div class="layer-visibility">
-						<IconButton @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton>
-						<IconButton @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
+						<IconButton v-if="layerId % 2 == 0" @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton>
+						<IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
 					</div>
 					<div class="layer-thumbnail"></div>
 					<div class="layer-type-icon">
@@ -41,21 +41,15 @@
 
 	.layer-row {
 		display: flex;
-		height: 36px;
+		height: 24px;
 		align-items: center;
 
 		& + .layer-row {
 			margin-top: 2px;
 		}
 
-		.layer-visibility {
-			.icon-button + .icon-button {
-				display: none;
-			}
-		}
-
 		.layer-thumbnail {
-			width: 54px;
+			width: 36px;
 			height: 100%;
 			background: white;
 		}
@@ -76,8 +70,8 @@ import NumberInput from "../widgets/NumberInput.vue";
 import DropdownButton from "../widgets/DropdownButton.vue";
 import IconButton from "../widgets/IconButton.vue";
 import IconContainer from "../widgets/IconContainer.vue";
-import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg";
-import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg";
+import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
+import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
 import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
 
 export default defineComponent({