icons preview fix

2 files changed, 104 insertions, 104 deletions

diff --git a/gulpfile.js b/gulpfile.js
index 7e858bc..5b5d81e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,9 +6,9 @@ const gulp = require('gulp'),
 
 
 gulp.task('icons-sprite', function (cb) {
-	const columnsCount = 20,
-		padding = 16,
-		paddingOuter = 49,
+	const columnsCount = 16,
+		padding = 30,
+		paddingOuter = 24,
 		iconSize = 24;
 
 	glob("_site/icons/*.svg", {}, function (er, files) {
diff --git a/icons.svg b/icons.svg
index db8eeea..b7d59ac 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 882 282" width="882" height="282" style="color: #354052"><rect x="0" y="0" width="882" height="282" fill="#f5f7fb"></rect>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 882 396" width="882" height="396" style="color: #354052"><rect x="0" y="0" width="882" height="396" 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" />
@@ -213,105 +213,105 @@
 	<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="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-device-desktop" x="489" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-device-mobile" x="529" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-device-tablet" x="569" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-download" x="609" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-check" x="649" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-download" x="689" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-minus" x="729" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-plus" x="769" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-text" x="809" y="129" width="24" height="24" />
-	<use xlink:href="#tabler-file-x" x="49" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-file" x="89" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-grid" x="129" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-heart" x="169" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-home" x="209" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-layout" x="249" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-map-pin" x="289" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-menu" x="329" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-minus-circle" x="369" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-minus-square" x="409" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-minus" x="449" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-mood-confuzed" x="489" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-mood-happy" x="529" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-mood-neutral" x="569" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-mood-sad" x="609" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-mood-smile" x="649" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-more-vertical" x="689" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-more" x="729" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-photo" x="769" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-plus-circle" x="809" y="169" width="24" height="24" />
-	<use xlink:href="#tabler-plus-square" x="49" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-plus" x="89" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-qrcode" x="129" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-search" x="169" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-square" x="209" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-star" x="249" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-swich-horizontal" x="289" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-switch-vertical" x="329" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-trending-down" x="369" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-trending-up" x="409" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-upload" x="449" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-user-check" x="489" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-user-minus" x="529" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-user-plus" x="569" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-user-x" x="609" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-user" x="649" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-viewfinder" x="689" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-x" x="729" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-zoom-in" x="769" y="209" width="24" height="24" />
-	<use xlink:href="#tabler-zoom-out" x="809" y="209" width="24" height="24" />
+	<use xlink:href="#tabler-activity" x="24" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-ajdustments" x="78" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-alert-circle" x="132" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-align-center" x="186" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-align-justified" x="240" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-align-left" x="294" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-align-right" x="348" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-circle" x="402" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-left-circle" x="456" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-left" x="510" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-right-circle" x="564" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down-right" x="618" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-down" x="672" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-left-circle" x="726" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-left" x="780" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-down" x="834" y="24" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-left" x="24" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-right" x="78" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-narrow-up" x="132" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-right-circle" x="186" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-right" x="240" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-circle" x="294" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-left-circle" x="348" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-arrow-up-left" x="402" y="78" width="24" height="24" />
+	<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-border-all" x="618" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-border-bottom" x="672" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-border-horizontal" x="726" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-border-inner" x="780" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-border-left" x="834" y="78" width="24" height="24" />
+	<use xlink:href="#tabler-border-none" x="24" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-outer" x="78" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-right" x="132" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-top" x="186" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-border-vertical" x="240" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-check" x="294" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-down" x="348" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-left" x="402" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-right" x="456" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevron-up" x="510" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-down" x="564" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-left" x="618" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-right" x="672" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-chevrons-up" x="726" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-circle" x="780" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-clipboard" x="834" y="132" width="24" height="24" />
+	<use xlink:href="#tabler-clock" x="24" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-code" x="78" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-cog" x="132" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-device-desktop" x="186" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-device-mobile" x="240" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-device-tablet" x="294" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-download" x="348" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-check" x="402" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-download" x="456" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-minus" x="510" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-plus" x="564" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-text" x="618" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file-x" x="672" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-file" x="726" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-grid" x="780" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-heart" x="834" y="186" width="24" height="24" />
+	<use xlink:href="#tabler-home" x="24" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-layout" x="78" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-map-pin" x="132" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-menu" x="186" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-minus-circle" x="240" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-minus-square" x="294" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-minus" x="348" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-mood-confuzed" x="402" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-mood-happy" x="456" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-mood-neutral" x="510" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-mood-sad" x="564" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-mood-smile" x="618" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-more-vertical" x="672" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-more" x="726" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-photo" x="780" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-plus-circle" x="834" y="240" width="24" height="24" />
+	<use xlink:href="#tabler-plus-square" x="24" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-plus" x="78" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-qrcode" x="132" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-search" x="186" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-square" x="240" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-star" x="294" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-swich-horizontal" x="348" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-switch-vertical" x="402" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-trending-down" x="456" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-trending-up" x="510" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-upload" x="564" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-user-check" x="618" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-user-minus" x="672" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-user-plus" x="726" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-user-x" x="780" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-user" x="834" y="294" width="24" height="24" />
+	<use xlink:href="#tabler-viewfinder" x="24" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-x" x="78" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-in" x="132" y="348" width="24" height="24" />
+	<use xlink:href="#tabler-zoom-out" x="186" y="348" width="24" height="24" />
 
 </svg>
\ No newline at end of file