arrows, maximize, minimize, eye

13 files changed, 230 insertions, 142 deletions

diff --git a/_icons/arrow-down.svg b/_icons/arrow-down.svg
index a202dfff..1b3a61b9 100644
--- a/_icons/arrow-down.svg
+++ b/_icons/arrow-down.svg
@@ -2,6 +2,6 @@
 ---
 <svg>
   <line x1="12" y1="5" x2="12" y2="19" />
-  <line x1="19" y1="12" x2="12" y2="19" />
-  <line x1="5" y1="12" x2="12" y2="19" />
+  <line x1="18" y1="13" x2="12" y2="19" />
+  <line x1="6" y1="13" x2="12" y2="19" />
 </svg>
diff --git a/_icons/arrow-left.svg b/_icons/arrow-left.svg
index 3d833119..c078b7b7 100644
--- a/_icons/arrow-left.svg
+++ b/_icons/arrow-left.svg
@@ -2,6 +2,6 @@
 ---
 <svg>
   <line x1="5" y1="12" x2="19" y2="12" />
-  <line x1="5" y1="12" x2="12" y2="19" />
-  <line x1="5" y1="12" x2="12" y2="5" />
+  <line x1="5" y1="12" x2="11" y2="18" />
+  <line x1="5" y1="12" x2="11" y2="6" />
 </svg>
diff --git a/_icons/arrow-right.svg b/_icons/arrow-right.svg
index 5869438e..87b75b95 100644
--- a/_icons/arrow-right.svg
+++ b/_icons/arrow-right.svg
@@ -2,6 +2,6 @@
 ---
 <svg>
   <line x1="5" y1="12" x2="19" y2="12" />
-  <line x1="12" y1="19" x2="19" y2="12" />
-  <line x1="12" y1="5" x2="19" y2="12" />
+  <line x1="13" y1="18" x2="19" y2="12" />
+  <line x1="13" y1="6" x2="19" y2="12" />
 </svg>
diff --git a/_icons/arrow-up.svg b/_icons/arrow-up.svg
index c3c4756f..164dec55 100644
--- a/_icons/arrow-up.svg
+++ b/_icons/arrow-up.svg
@@ -2,6 +2,6 @@
 ---
 <svg>
   <line x1="12" y1="5" x2="12" y2="19" />
-  <line x1="19" y1="12" x2="12" y2="5" />
-  <line x1="5" y1="12" x2="12" y2="5" />
+  <line x1="18" y1="11" x2="12" y2="5" />
+  <line x1="6" y1="11" x2="12" y2="5" />
 </svg>
diff --git a/_icons/arrows-diagonal-2.svg b/_icons/arrows-diagonal-2.svg
new file mode 100644
index 00000000..32351faf
--- /dev/null
+++ b/_icons/arrows-diagonal-2.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+  <polyline points="16 20 20 20 20 16" />
+  <line x1="14" y1="14" x2="20" y2="20" />
+  <polyline points="8 4 4 4 4 8" />
+  <line x1="4" y1="4" x2="10" y2="10" />
+</svg>
diff --git a/_icons/arrows-diagonal.svg b/_icons/arrows-diagonal.svg
new file mode 100644
index 00000000..4e2a9fdd
--- /dev/null
+++ b/_icons/arrows-diagonal.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+  <polyline points="16 4 20 4 20 8" />
+  <line x1="14" y1="10" x2="20" y2="4" />
+  <polyline points="8 20 4 20 4 16" />
+  <line x1="4" y1="20" x2="10" y2="14" />
+</svg>
diff --git a/_icons/arrows-maximize.svg b/_icons/arrows-maximize.svg
new file mode 100644
index 00000000..cc02da5f
--- /dev/null
+++ b/_icons/arrows-maximize.svg
@@ -0,0 +1,12 @@
+---
+---
+<svg>
+  <polyline points="16 4 20 4 20 8" />
+  <line x1="14" y1="10" x2="20" y2="4" />
+  <polyline points="8 20 4 20 4 16" />
+  <line x1="4" y1="20" x2="10" y2="14" />
+  <polyline points="16 20 20 20 20 16" />
+  <line x1="14" y1="14" x2="20" y2="20" />
+  <polyline points="8 4 4 4 4 8" />
+  <line x1="4" y1="4" x2="10" y2="10" />
+</svg>
diff --git a/_icons/eye.svg b/_icons/eye.svg
new file mode 100644
index 00000000..0982613c
--- /dev/null
+++ b/_icons/eye.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+  <circle cx="12" cy="12" r="2" />
+  <path d="M2 12l1.5 2a11 11 0 0017 0l1.5 -2" />
+  <path d="M2 12l1.5 -2a11 11 0 0117 0l1.5 2" />
+</svg>
diff --git a/_icons/maximize.svg b/_icons/maximize.svg
new file mode 100644
index 00000000..4e89e8de
--- /dev/null
+++ b/_icons/maximize.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+  <path d="M4 8v-2a2 2 0 012 -2h2" />
+  <path d="M4 16v2a2 2 0 002 2h2" />
+  <path d="M16 4h2a2 2 0 012 2v2" />
+  <path d="M16 20h2a2 2 0 002 -2v-2" />
+</svg>
diff --git a/_icons/minimize.svg b/_icons/minimize.svg
new file mode 100644
index 00000000..80f991f1
--- /dev/null
+++ b/_icons/minimize.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+  <path d="M15 19v-2a2 2 0 012 -2h2" />
+  <path d="M16 5v2a2 2 0 002 2h2" />
+  <path d="M5 15h2a2 2 0 012 2v2" />
+  <path d="M5 9h2a2 2 0 002 -2v-2" />
+</svg>
diff --git a/icons.svg b/icons.svg
index cf302046..42db91a2 100644
--- a/icons.svg
+++ b/icons.svg
@@ -23,11 +23,11 @@
 </symbol>
 	<symbol id="tabler-arrow-down-right" class="icon tabler-icon tabler-icon-arrow-down-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="7" x2="17" y2="17" /><polyline points="17 8 17 17 8 17" />
 </symbol>
-	<symbol id="tabler-arrow-down" class="icon tabler-icon tabler-icon-arrow-down" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="19" y1="12" x2="12" y2="19" /><line x1="5" y1="12" x2="12" y2="19" />
+	<symbol id="tabler-arrow-down" class="icon tabler-icon tabler-icon-arrow-down" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" />
 </symbol>
 	<symbol id="tabler-arrow-left-circle" class="icon tabler-icon tabler-icon-arrow-left-circle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><line x1="8" y1="12" x2="16" y2="12" /><line x1="8" y1="12" x2="12" y2="16" /><line x1="8" y1="12" x2="12" y2="8" />
 </symbol>
-	<symbol id="tabler-arrow-left" class="icon tabler-icon tabler-icon-arrow-left" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="12" y2="19" /><line x1="5" y1="12" x2="12" y2="5" />
+	<symbol id="tabler-arrow-left" class="icon tabler-icon tabler-icon-arrow-left" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" />
 </symbol>
 	<symbol id="tabler-arrow-narrow-down" class="icon tabler-icon tabler-icon-arrow-narrow-down" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="16" y1="15" x2="12" y2="19" /><line x1="8" y1="15" x2="12" y2="19" />
 </symbol>
@@ -39,7 +39,7 @@
 </symbol>
 	<symbol id="tabler-arrow-right-circle" class="icon tabler-icon tabler-icon-arrow-right-circle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><line x1="16" y1="12" x2="8" y2="12" /><line x1="16" y1="12" x2="12" y2="16" /><line x1="16" y1="12" x2="12" y2="8" />
 </symbol>
-	<symbol id="tabler-arrow-right" class="icon tabler-icon tabler-icon-arrow-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><line x1="12" y1="19" x2="19" y2="12" /><line x1="12" y1="5" x2="19" y2="12" />
+	<symbol id="tabler-arrow-right" class="icon tabler-icon tabler-icon-arrow-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><line x1="13" y1="18" x2="19" y2="12" /><line x1="13" y1="6" x2="19" y2="12" />
 </symbol>
 	<symbol id="tabler-arrow-up-circle" class="icon tabler-icon tabler-icon-arrow-up-circle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="8" y2="12" /><line x1="12" y1="8" x2="12" y2="16" /><line x1="16" y1="12" x2="12" y2="8" />
 </symbol>
@@ -51,7 +51,13 @@
 </symbol>
 	<symbol id="tabler-arrow-up-right" class="icon tabler-icon tabler-icon-arrow-up-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="7" x2="7" y2="17" /><polyline points="8 7 17 7 17 16" />
 </symbol>
-	<symbol id="tabler-arrow-up" class="icon tabler-icon tabler-icon-arrow-up" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="19" y1="12" x2="12" y2="5" /><line x1="5" y1="12" x2="12" y2="5" />
+	<symbol id="tabler-arrow-up" class="icon tabler-icon tabler-icon-arrow-up" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" />
+</symbol>
+	<symbol id="tabler-arrows-diagonal-2" class="icon tabler-icon tabler-icon-arrows-diagonal-2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 20 20 20 20 16"></polyline><line x1="14" y1="14" x2="20" y2="20"></line><polyline points="8 4 4 4 4 8"></polyline><line x1="4" y1="4" x2="10" y2="10"></line>
+</symbol>
+	<symbol id="tabler-arrows-diagonal" class="icon tabler-icon tabler-icon-arrows-diagonal" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 4 20 4 20 8"></polyline><line x1="14" y1="10" x2="20" y2="4"></line><polyline points="8 20 4 20 4 16"></polyline><line x1="4" y1="20" x2="10" y2="14"></line>
+</symbol>
+	<symbol id="tabler-arrows-maximize" class="icon tabler-icon tabler-icon-arrows-maximize" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 4 20 4 20 8"></polyline><line x1="14" y1="10" x2="20" y2="4"></line><polyline points="8 20 4 20 4 16"></polyline><line x1="4" y1="20" x2="10" y2="14"></line><polyline points="16 20 20 20 20 16"></polyline><line x1="14" y1="14" x2="20" y2="20"></line><polyline points="8 4 4 4 4 8"></polyline><line x1="4" y1="4" x2="10" y2="10"></line>
 </symbol>
 	<symbol id="tabler-battery-1" class="icon tabler-icon tabler-icon-battery-1" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7h11a2 2 0 012 2v.5a.5 .5 0 00.5 .5a.5 .5 0 01.5 .5v3a.5 .5 0 01-.5 .5a.5 .5 0 00-.5 .5v.5a2 2 0 01-2 2h-11a2 2 0 01-2 -2v-6a2 2 0 012 -2" /><line x1="7" y1="10" x2="7" y2="14" />
 </symbol>
@@ -167,6 +173,8 @@
 </symbol>
 	<symbol id="tabler-external-link" class="icon tabler-icon tabler-icon-external-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 7h-5a2 2 0 00-2 2v9a2 2 0 00 2 2h9a2 2 0 00 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="14 4 20 4 20 10" />
 </symbol>
+	<symbol id="tabler-eye" class="icon tabler-icon tabler-icon-eye" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"></circle><path d="M2 12l1.5 2a11 11 0 0017 0l1.5 -2"></path><path d="M2 12l1.5 -2a11 11 0 0117 0l1.5 2"></path>
+</symbol>
 	<symbol id="tabler-file-check" class="icon tabler-icon tabler-icon-file-check" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="14 3 14 8 19 8" /><path d="M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z" /><path d="M9 15l2 2l4 -4" />
 </symbol>
 	<symbol id="tabler-file-download" class="icon tabler-icon tabler-icon-file-download" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="14 3 14 8 19 8" /><path d="M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><polyline points="9 14 12 17 15 14" />
@@ -221,8 +229,12 @@
 </symbol>
 	<symbol id="tabler-map" class="icon tabler-icon tabler-icon-map" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 4 9 7 15 4 21 7 21 20 15 17 9 20 3 17 3 4" /><line x1="9" y1="7" x2="9" y2="20" /><line x1="15" y1="4" x2="15" y2="17" />
 </symbol>
+	<symbol id="tabler-maximize" class="icon tabler-icon tabler-icon-maximize" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8v-2a2 2 0 012 -2h2"></path><path d="M4 16v2a2 2 0 002 2h2"></path><path d="M16 4h2a2 2 0 012 2v2"></path><path d="M16 20h2a2 2 0 002 -2v-2"></path>
+</symbol>
 	<symbol id="tabler-menu" class="icon tabler-icon tabler-icon-menu" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="8" x2="20" y2="8" /><line x1="4" y1="16" x2="20" y2="16" />
 </symbol>
+	<symbol id="tabler-minimize" class="icon tabler-icon tabler-icon-minimize" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 19v-2a2 2 0 012 -2h2"></path><path d="M16 5v2a2 2 0 002 2h2"></path><path d="M5 15h2a2 2 0 012 2v2"></path><path d="M5 9h2a2 2 0 002 -2v-2"></path>
+</symbol>
 	<symbol id="tabler-minus-circle" class="icon tabler-icon tabler-icon-minus-circle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><line x1="8" y1="12" x2="16" y2="12" />
 </symbol>
 	<symbol id="tabler-minus-square" class="icon tabler-icon tabler-icon-minus-square" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="12" x2="16" y2="12" />
@@ -275,7 +287,7 @@
 </symbol>
 	<symbol id="tabler-tag" class="icon tabler-icon tabler-icon-tag" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3L20 12a1.5 1.5 0 010 2L14 20a1.5 1.5 0 01-2 0L3 11v-4a4 4 0 014 -4h4" /><circle cx="9" cy="9" r="2" />
 </symbol>
-	<symbol id="tabler-target" class="icon tabler-icon tabler-icon-target" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="12" r="5"></circle><circle cx="12" cy="12" r="9"></circle>
+	<symbol id="tabler-target" class="icon tabler-icon tabler-icon-target" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="9" />
 </symbol>
 	<symbol id="tabler-trash" class="icon tabler-icon tabler-icon-trash" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 002 2h8a2 2 0 002 -2l1 -12" /><path d="M9 7v-3a1 1 0 011 -1h4a1 1 0 011 1v3" />
 </symbol>
@@ -335,132 +347,138 @@
 	<use xlink:href="#tabler-arrow-up-right-circle" x="456" y="78" width="24" height="24" />
 	<use xlink:href="#tabler-arrow-up-right" x="510" y="78" width="24" height="24" />
 	<use xlink:href="#tabler-arrow-up" x="564" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery-1" x="618" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery-2" x="672" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery-3" x="726" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery-4" x="780" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery-charging" x="834" y="78" width="24" height="24" />
-	<use xlink:href="#tabler-battery" x="24" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-bookmark" x="78" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-all" x="132" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-bottom" x="186" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-horizontal" x="240" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-inner" x="294" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-left" x="348" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-none" x="402" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-outer" x="456" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-right" x="510" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-top" x="564" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-border-vertical" x="618" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-bulb-off" x="672" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-bulb" x="726" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-calendar" x="780" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-camera" x="834" y="132" width="24" height="24" />
-	<use xlink:href="#tabler-cash" x="24" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-area-line" x="78" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-area" x="132" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-bar" x="186" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-candle" x="240" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-donut" x="294" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-line" x="348" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chart-pie" x="402" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-check" x="456" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevron-down" x="510" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevron-left" x="564" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevron-right" x="618" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevron-up" x="672" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevrons-down" x="726" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevrons-left" x="780" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevrons-right" x="834" y="186" width="24" height="24" />
-	<use xlink:href="#tabler-chevrons-up" x="24" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-circle" x="78" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-clipboard-check" x="132" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-clipboard-list" x="186" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-clipboard-x" x="240" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-clipboard" x="294" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-clock" x="348" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-cloud-rain" x="402" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-cloud-snow" x="456" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-cloud-storm" x="510" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-cloud" x="564" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-code" x="618" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-cog" x="672" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-copy" x="726" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-credit-card" x="780" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-device-desktop" x="834" y="240" width="24" height="24" />
-	<use xlink:href="#tabler-device-mobile" x="24" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-device-tablet" x="78" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-download" x="132" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-external-link" x="186" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-check" x="240" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-download" x="294" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-minus" x="348" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-plus" x="402" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-text" x="456" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file-x" x="510" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-file" x="564" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-flag" x="618" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-folder-minus" x="672" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-folder-plus" x="726" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-folder-x" x="780" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-folder" x="834" y="294" width="24" height="24" />
-	<use xlink:href="#tabler-folders" x="24" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-glass" x="78" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-grid" x="132" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-heart" x="186" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-home" x="240" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-ice-cream" x="294" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-key" x="348" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-layout" x="402" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-lock-open" x="456" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-lock" x="510" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-magnet" x="564" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-mail-opened" x="618" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-mail" x="672" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-map-pin" x="726" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-map" x="780" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-menu" x="834" y="348" width="24" height="24" />
-	<use xlink:href="#tabler-minus-circle" x="24" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-minus-square" x="78" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-minus" x="132" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-mood-confuzed" x="186" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-mood-happy" x="240" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-mood-neutral" x="294" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-mood-sad" x="348" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-mood-smile" x="402" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-moon" x="456" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-more-vertical" x="510" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-more" x="564" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-photo" x="618" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-plus-circle" x="672" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-plus-square" x="726" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-plus" x="780" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-printer" x="834" y="402" width="24" height="24" />
-	<use xlink:href="#tabler-puzzle" x="24" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-qrcode" x="78" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-search" x="132" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-share" x="186" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-square" x="240" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-star" x="294" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-sun" x="348" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-swich-horizontal" x="402" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-switch-vertical" x="456" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-tag" x="510" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-target" x="564" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-trash" x="618" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-trending-down" x="672" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-trending-up" x="726" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-trophy" x="780" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-upload" x="834" y="456" width="24" height="24" />
-	<use xlink:href="#tabler-user-check" x="24" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-user-minus" x="78" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-user-plus" x="132" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-user-x" x="186" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-user" x="240" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-viewfinder" x="294" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-world" x="348" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-x" x="402" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-zoom-in" x="456" y="510" width="24" height="24" />
-	<use xlink:href="#tabler-zoom-out" x="510" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-arrows-diagonal-2" x="618" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrows-diagonal" x="672" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrows-maximize" x="726" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-battery-1" x="780" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-battery-2" x="834" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-battery-3" x="24" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-battery-4" x="78" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-battery-charging" x="132" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-battery" x="186" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-bookmark" x="240" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-all" x="294" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-bottom" x="348" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-horizontal" x="402" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-inner" x="456" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-left" x="510" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-none" x="564" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-outer" x="618" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-right" x="672" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-top" x="726" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-vertical" x="780" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-bulb-off" x="834" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-bulb" x="24" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-calendar" x="78" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-camera" x="132" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-cash" x="186" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-area-line" x="240" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-area" x="294" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-bar" x="348" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-candle" x="402" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-donut" x="456" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-line" x="510" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chart-pie" x="564" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-check" x="618" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-down" x="672" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-left" x="726" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-right" x="780" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-up" x="834" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-down" x="24" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-left" x="78" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-right" x="132" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-up" x="186" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-circle" x="240" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard-check" x="294" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard-list" x="348" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard-x" x="402" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard" x="456" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-clock" x="510" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-cloud-rain" x="564" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-cloud-snow" x="618" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-cloud-storm" x="672" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-cloud" x="726" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-code" x="780" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-cog" x="834" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-copy" x="24" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-credit-card" x="78" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-device-desktop" x="132" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-device-mobile" x="186" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-device-tablet" x="240" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-download" x="294" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-external-link" x="348" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-eye" x="402" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-check" x="456" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-download" x="510" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-minus" x="564" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-plus" x="618" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-text" x="672" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file-x" x="726" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-file" x="780" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-flag" x="834" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-folder-minus" x="24" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-folder-plus" x="78" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-folder-x" x="132" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-folder" x="186" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-folders" x="240" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-glass" x="294" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-grid" x="348" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-heart" x="402" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-home" x="456" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-ice-cream" x="510" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-key" x="564" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-layout" x="618" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-lock-open" x="672" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-lock" x="726" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-magnet" x="780" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-mail-opened" x="834" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-mail" x="24" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-map-pin" x="78" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-map" x="132" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-maximize" x="186" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-menu" x="240" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-minimize" x="294" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-minus-circle" x="348" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-minus-square" x="402" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-minus" x="456" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-mood-confuzed" x="510" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-mood-happy" x="564" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-mood-neutral" x="618" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-mood-sad" x="672" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-mood-smile" x="726" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-moon" x="780" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-more-vertical" x="834" y="402" width="24" height="24" />
+	<use xlink:href="#tabler-more" x="24" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-photo" x="78" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-plus-circle" x="132" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-plus-square" x="186" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-plus" x="240" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-printer" x="294" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-puzzle" x="348" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-qrcode" x="402" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-search" x="456" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-share" x="510" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-square" x="564" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-star" x="618" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-sun" x="672" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-swich-horizontal" x="726" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-switch-vertical" x="780" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-tag" x="834" y="456" width="24" height="24" />
+	<use xlink:href="#tabler-target" x="24" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-trash" x="78" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-trending-down" x="132" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-trending-up" x="186" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-trophy" x="240" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-upload" x="294" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-user-check" x="348" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-user-minus" x="402" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-user-plus" x="456" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-user-x" x="510" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-user" x="564" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-viewfinder" x="618" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-world" x="672" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-x" x="726" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-in" x="780" y="510" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-out" x="834" y="510" width="24" height="24" />
 
 </svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 19a642e3..bed918e8 100644
--- a/index.html
+++ b/index.html
@@ -97,6 +97,17 @@
 		</div>
 
 		<div class="mb">
+			<div class="icons-list icons-list-borders">
+				{% for icon in icons %}
+				{% assign name = icon.slug %}
+				<a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}">
+					{% include icon.html name=name %}
+				</a>
+				{% endfor %}
+			</div>
+		</div>
+
+		<div class="mb">
 			<div class="icons-list icons-list-squares">
 				{% for icon in icons %}
 				{% assign name = icon.slug %}
diff --git a/style.scss b/style.scss
index 68f67ce6..21b4b279 100644
--- a/style.scss
+++ b/style.scss
@@ -5,7 +5,8 @@ $breakpoint: 50rem;
 $primary: #206bc4;
 $border: #eeeeee;
 $muted: #aaaaaa;
-$dark: #222222;
+$dark: #354052;
+$light: #fafbfc;
 $btn-form-height: 2rem;
 $hover: rgba(0, 0, 0, .04);
 
@@ -135,11 +136,17 @@ a {
   margin: -.25rem;
 }
 
+.icons-list-borders {
+  .icons-list-icon {
+    border-color: $dark;
+  }
+}
+
 .icons-list-squares,
 .icons-list-circles {
   .icons-list-icon {
     background: $dark;
-    color: #fff;
+    color: $light;
   }
 }
 
@@ -158,6 +165,7 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid transparent;
 
   &:hover {
     opacity: .75;