home icon

3 files changed, 107 insertions, 97 deletions

diff --git a/_icons/home.svg b/_icons/home.svg
new file mode 100644
index 00000000..fd242206
--- /dev/null
+++ b/_icons/home.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+  <polyline points="5 12 3 12 12 3 21 12 19 12" />
+  <path d="M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+  <path d="M9 21v-6a2 2 0 012 -2h2a2 2 0 012 2v6" />
+</svg>
diff --git a/gulpfile.js b/gulpfile.js
index 07a95de3..7e858bc0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,10 +6,10 @@ const gulp = require('gulp'),
 
 
 gulp.task('icons-sprite', function (cb) {
-	const columnsCount = 10,
-		padding = 24,
+	const columnsCount = 20,
+		padding = 16,
 		paddingOuter = 49,
-		iconSize = 48;
+		iconSize = 24;
 
 	glob("_site/icons/*.svg", {}, function (er, files) {
 		const iconsCount = files.length,
@@ -44,7 +44,7 @@ gulp.task('icons-sprite', function (cb) {
 			}
 		});
 
-		const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><rect x="0" y="0" width="${width}" height="${height}" fill="#fafafa"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
+		const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#f5f7fb"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
 
 		fs.writeFileSync('icons.svg', svgContent);
 		cb();
diff --git a/icons.svg b/icons.svg
index fa350b10..83f8c6f7 100644
--- a/icons.svg
+++ b/icons.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 794 794" width="794" height="794"><rect x="0" y="0" width="794" height="794" fill="#fafafa"></rect>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 882 282" width="882" height="282" style="color: #354052"><rect x="0" y="0" width="882" height="282" fill="#f5f7fb"></rect>
 	<symbol id="tabler-activity" class="icon tabler-icon tabler-icon-activity" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
 </symbol>
 	<symbol id="tabler-ajdustments" class="icon tabler-icon tabler-icon-ajdustments" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="10" r="2" /><line x1="6" y1="4" x2="6" y2="8" /><line x1="6" y1="12" x2="6" y2="20" />
@@ -132,6 +132,8 @@
 </symbol>
 	<symbol id="tabler-heart" class="icon tabler-icon tabler-icon-heart" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
 </symbol>
+	<symbol id="tabler-home" class="icon tabler-icon tabler-icon-home" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /><path d="M9 21v-6a2 2 0 012 -2h2a2 2 0 012 2v6" />
+</symbol>
 	<symbol id="tabler-layout" class="icon tabler-icon tabler-icon-layout" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="6" rx="2" ry="2"></rect><rect x="3" y="13" width="8" height="8" rx="2" ry="2"></rect><rect x="15" y="3" width="6" height="18" rx="2" ry="2"></rect>
 </symbol>
 	<symbol id="tabler-map-pin" class="icon tabler-icon tabler-icon-map-pin" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="11" r="3"></circle><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
@@ -197,97 +199,98 @@
 	<symbol id="tabler-zoom-out" class="icon tabler-icon tabler-icon-zoom-out" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><line x1="7" y1="10" x2="13" y2="10"></line><line x1="21" y1="21" x2="15" y2="15"></line>
 </symbol>
 
-	<use xlink:href="#tabler-activity" x="49" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-ajdustments" x="121" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-alert-circle" x="193" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-align-center" x="265" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-align-justified" x="337" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-align-left" x="409" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-align-right" x="481" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down-circle" x="553" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down-left-circle" x="625" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down-left" x="697" y="49" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down-right-circle" x="49" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down-right" x="121" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-down" x="193" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-left-circle" x="265" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-left" x="337" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-narrow-down" x="409" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-narrow-left" x="481" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-narrow-right" x="553" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-narrow-up" x="625" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-right-circle" x="697" y="121" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-right" x="49" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up-circle" x="121" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up-left-circle" x="193" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up-left" x="265" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up-right-circle" x="337" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up-right" x="409" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-arrow-up" x="481" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-border-all" x="553" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-border-bottom" x="625" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-border-horizontal" x="697" y="193" width="48" height="48" />
-	<use xlink:href="#tabler-border-inner" x="49" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-left" x="121" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-none" x="193" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-outer" x="265" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-right" x="337" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-top" x="409" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-border-vertical" x="481" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-check" x="553" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-chevron-down" x="625" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-chevron-left" x="697" y="265" width="48" height="48" />
-	<use xlink:href="#tabler-chevron-right" x="49" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-chevron-up" x="121" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-chevrons-down" x="193" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-chevrons-left" x="265" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-chevrons-right" x="337" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-chevrons-up" x="409" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-circle" x="481" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-clipboard" x="553" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-clock" x="625" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-code" x="697" y="337" width="48" height="48" />
-	<use xlink:href="#tabler-cog" x="49" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-check" x="121" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-download" x="193" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-minus" x="265" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-plus" x="337" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-text" x="409" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file-x" x="481" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-file" x="553" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-grid" x="625" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-heart" x="697" y="409" width="48" height="48" />
-	<use xlink:href="#tabler-layout" x="49" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-map-pin" x="121" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-menu" x="193" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-minus-circle" x="265" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-minus-square" x="337" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-minus" x="409" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-mood-confuzed" x="481" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-mood-happy" x="553" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-mood-neutral" x="625" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-mood-sad" x="697" y="481" width="48" height="48" />
-	<use xlink:href="#tabler-mood-smile" x="49" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-more-vertical" x="121" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-more" x="193" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-plus-circle" x="265" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-plus-square" x="337" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-plus" x="409" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-qrcode" x="481" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-search" x="553" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-square" x="625" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-star" x="697" y="553" width="48" height="48" />
-	<use xlink:href="#tabler-swich-horizontal" x="49" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-switch-vertical" x="121" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-trending-down" x="193" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-trending-up" x="265" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-user-check" x="337" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-user-minus" x="409" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-user-plus" x="481" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-user-x" x="553" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-user" x="625" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-x" x="697" y="625" width="48" height="48" />
-	<use xlink:href="#tabler-zoom-in" x="49" y="697" width="48" height="48" />
-	<use xlink:href="#tabler-zoom-out" x="121" y="697" width="48" height="48" />
+	<use xlink:href="#tabler-activity" x="49" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-ajdustments" x="89" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-alert-circle" x="129" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-align-center" x="169" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-align-justified" x="209" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-align-left" x="249" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-align-right" x="289" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-circle" x="329" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-left-circle" x="369" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-left" x="409" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-right-circle" x="449" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-right" x="489" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down" x="529" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-left-circle" x="569" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-left" x="609" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-down" x="649" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-left" x="689" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-right" x="729" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-up" x="769" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-right-circle" x="809" y="49" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-right" x="49" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-circle" x="89" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-left-circle" x="129" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-left" x="169" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-right-circle" x="209" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-right" x="249" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up" x="289" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-all" x="329" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-bottom" x="369" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-horizontal" x="409" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-inner" x="449" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-left" x="489" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-none" x="529" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-outer" x="569" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-right" x="609" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-top" x="649" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-border-vertical" x="689" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-check" x="729" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-down" x="769" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-left" x="809" y="89" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-right" x="49" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-up" x="89" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-down" x="129" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-left" x="169" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-right" x="209" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-up" x="249" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-circle" x="289" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard" x="329" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-clock" x="369" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-code" x="409" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-cog" x="449" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-check" x="489" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-download" x="529" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-minus" x="569" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-plus" x="609" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-text" x="649" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file-x" x="689" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-file" x="729" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-grid" x="769" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-heart" x="809" y="129" width="24" height="24" />
+	<use xlink:href="#tabler-home" x="49" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-layout" x="89" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-map-pin" x="129" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-menu" x="169" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-minus-circle" x="209" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-minus-square" x="249" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-minus" x="289" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-mood-confuzed" x="329" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-mood-happy" x="369" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-mood-neutral" x="409" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-mood-sad" x="449" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-mood-smile" x="489" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-more-vertical" x="529" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-more" x="569" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-plus-circle" x="609" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-plus-square" x="649" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-plus" x="689" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-qrcode" x="729" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-search" x="769" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-square" x="809" y="169" width="24" height="24" />
+	<use xlink:href="#tabler-star" x="49" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-swich-horizontal" x="89" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-switch-vertical" x="129" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-trending-down" x="169" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-trending-up" x="209" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-user-check" x="249" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-user-minus" x="289" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-user-plus" x="329" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-user-x" x="369" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-user" x="409" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-x" x="449" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-in" x="489" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-out" x="529" y="209" width="24" height="24" />
 
 </svg>
\ No newline at end of file