Add new Icons

1 files changed, 57 insertions, 20 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 5fd7568..b6c9bfa 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1016,6 +1016,7 @@
           <section class="notes">
             <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
           </section>
+          <header class="text-center"><h4>Navigation</h4></header>
           <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1067,27 +1068,21 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-menu"></i>
-              </button>
-              <p>icon-menu</p>
-            </div>
-            <div class="column col-3 col-md-6">
-              <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-apps"></i>
+                <i class="icon icon-caret"></i>
               </button>
-              <p>icon-apps</p>
+              <p>icon-caret</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-resize-horiz"></i>
+                <i class="icon icon-menu"></i>
               </button>
-              <p>icon-resize-horiz</p>
+              <p>icon-menu</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-resize-vert"></i>
+                <i class="icon icon-apps"></i>
               </button>
-              <p>icon-resize-vert</p>
+              <p>icon-apps</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1101,11 +1096,20 @@
               </button>
               <p>icon-more-vert</p>
             </div>
+          </div>
+          <header class="text-center"><h4>Action</h4></header>
+          <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-caret"></i>
+                <i class="icon icon-resize-horiz"></i>
               </button>
-              <p>icon-caret</p>
+              <p>icon-resize-horiz</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-resize-vert"></i>
+              </button>
+              <p>icon-resize-vert</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1133,6 +1137,18 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-stop"></i>
+              </button>
+              <p>icon-stop</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-shutdown"></i>
+              </button>
+              <p>icon-shutdown</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-refresh"></i>
               </button>
               <p>icon-refresh</p>
@@ -1163,6 +1179,12 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-delete"></i>
+              </button>
+              <p>icon-delete</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-share"></i>
               </button>
               <p>icon-share</p>
@@ -1179,12 +1201,9 @@
               </button>
               <p>icon-upload</p>
             </div>
-            <div class="column col-3 col-md-6">
-              <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-time"></i>
-              </button>
-              <p>icon-time</p>
-            </div>
+          </div>
+          <header class="text-center"><h4>Object</h4></header>
+          <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-mail"></i>
@@ -1199,6 +1218,24 @@
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-message"></i>
+              </button>
+              <p>icon-message</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-photo"></i>
+              </button>
+              <p>icon-photo</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-time"></i>
+              </button>
+              <p>icon-time</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-link"></i>
               </button>
               <p>icon-link</p>