From dcee47616093c0730b1868fa287b20bf5b1381fe Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Mar 2017 15:18:54 +0800 Subject: Add Popovers code --- docs/index.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 5f2cb09..6992015 100644 --- a/docs/index.html +++ b/docs/index.html @@ -108,6 +108,9 @@
  • Utilities
    • +
  • + Experimentals +
    • -- cgit v1.3.1-23-gd82d From 92012cae19ff70b693ef8b2a6a927c5a4d18c104 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Mar 2017 15:32:25 +0800 Subject: Add Popovers docs --- README.md | 1 + docs/components.html | 22 +++++++++++++++++++--- docs/index.html | 3 +++ 3 files changed, 23 insertions(+), 3 deletions(-) (limited to 'docs/index.html') diff --git a/README.md b/README.md index d3d1040..b07c1eb 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Menus](http://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Modals](http://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Navigation](http://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs +- [Popovers](http://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers - [Steps](http://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tiles](http://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks - [Toasts](http://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications diff --git a/docs/components.html b/docs/components.html index 4512945..565f1b9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1469,11 +1469,27 @@
    -

    +

    Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

    +

    Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

    - -
    
+
+
    <div class="popover popover-right">
+  <button class="btn btn-primary">right popover</button>
+  <div class="popover-container">
+    <div class="card">
+      <div class="card-header">
+        ...
+      </div>
+      <div class="card-body">
+        ...
+      </div>
+      <div class="card-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
 
    
 
         
diff --git a/docs/index.html b/docs/index.html
index 6992015..23b260c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -309,6 +309,9 @@
           
    
             
    March 2017
    
             
    
 
         
    
-          
    Icons
    
+          
    Icons experimental
    
           
    
             
    Icons are pure CSS icons.
    
           
    
           
    
             
    
-              
    
-                
-              
    
+              
               
    icon-arrow-up
    
             
    
             
    
-              
    
-                
-              
    
+              
               
    icon-arrow-right
    
             
    
             
    
-              
    
-                
-              
    
+              
               
    icon-arrow-down
    
             
    
             
    
-              
    
-                
-              
    
+              
               
    icon-arrow-left
    
             
    
+            
    
+              
+              
    icon-menu
    
+            
    
+            
    
+              
+              
    icon-caret
    
+            
    
+            
    
+              
+              
    icon-more-horiz
    
+            
    
+            
    
+              
+              
    icon-more-vert
    
+            
    
+            
    
+              
+              
    icon-plus
    
+            
    
+            
    
+              
+              
    icon-minus
    
+            
    
+            
    
+              
+              
    icon-cross
    
+            
    
+            
    
+              
+              
    icon-check
    
+            
    
           
    
 
         
    
diff --git a/docs/experimentals.html b/docs/experimentals.html
index be498a0..f9f7b5f 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -9,8 +9,8 @@
   Experimentals - Spectre.css
   
   
+  
   
-  
 
 
   
    
diff --git a/docs/index.html b/docs/index.html
index 23b260c..48b6d68 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,8 +8,8 @@
   
   Spectre.css - The lightweight, responsive and modern CSS framework
   
+  
   
-  
 
 
   
    
diff --git a/docs/layout.html b/docs/layout.html
index cf09726..6ff7244 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -8,8 +8,8 @@
   
   Layout - Spectre.css
   
+  
   
-  
 
 
   
    
diff --git a/docs/src/docs.less b/docs/src/docs.less
index 15e57f8..6f7393a 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -266,7 +266,7 @@
   }
 
   .docs-sidebar {
-    background: bg-color-light;
+    background: @bg-color-light;
     height: 100%;
     overflow-y: auto;
     padding: 6rem 3rem;
diff --git a/docs/utilities.html b/docs/utilities.html
index 5695dbe..4128ae1 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -8,8 +8,8 @@
   
   Utilities - Spectre.css 
   
+  
   
-  
 
 
   
    
diff --git a/spectre-icons.less b/spectre-icons.less
new file mode 100644
index 0000000..a366e7d
--- /dev/null
+++ b/spectre-icons.less
@@ -0,0 +1,8 @@
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
+
+// Core variables and mixins
+@import 'src/variables.less';
+@import 'src/mixins.less';
+
+// Icons
+@import 'src/icons.less';
diff --git a/spectre.less b/spectre.less
index 6f8d386..23cae0b 100644
--- a/spectre.less
+++ b/spectre.less
@@ -14,7 +14,6 @@
 @import 'src/tables.less';
 @import 'src/buttons.less';
 @import 'src/forms.less';
-@import 'src/icons.less';
 @import 'src/labels.less';
 @import 'src/codes.less';
 @import 'src/media.less';
diff --git a/src/buttons.less b/src/buttons.less
index 1e06884..96eb084 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -32,6 +32,7 @@
     background: @primary-color-dark;
     border-color: darken(@primary-color-dark, 5%);
     color: @light-color;
+    text-decoration: none;
   }
   &[disabled],
   &:disabled,
diff --git a/src/icons.less b/src/icons.less
index 9c071c5..99c6b75 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,32 +1,36 @@
 // CSS Icons
 .icon {
+  box-sizing: border-box;
+  display: inline-block;
   font-size: inherit;
+  height: 1em;
+  position: relative;
+  text-indent: -999rem;
   vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
+// Icon arrows
 .icon-arrow-down,
 .icon-arrow-left,
 .icon-arrow-right,
 .icon-arrow-up {
-  display: inline-block;
-  height: 1em;
-  margin: 0;
-  position: relative;
-  width: 1em;
-
   &::before {
-    border: .2rem solid currentColor;
+    border: @icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
-    display: block;
     height: .65em;
-    left: 50%;
-    position: absolute;
-    top: 50%;
     width: .65em;
     transform: translate(-25%, -50%) rotate(-45deg);
-    transform-origin: 50% 50%;
   }
 }
 
@@ -42,15 +46,86 @@
   transform: rotate(90deg);
 }
 
+// Icon caret
 .icon-caret {
-  border-top: .4rem solid currentColor;
-  border-right: .4rem solid transparent;
-  border-left: .4rem solid transparent;
-  display: inline-block;
-  height: 0;
-  margin: 0;
-  vertical-align: middle;
-  width: 0;
+  &::before {
+    border-top: .3em solid currentColor;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+    content: "";
+    height: 0;
+    width: 0;
+    transform: translate(-50%, -25%);
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -.35em, 0 .35em;
+    content: "";
+    height: @icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    content: "";
+    height: @icon-border-width * 2;
+    width: @icon-border-width * 2;
+  }
+}
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    width: 100%;
+  }
+}
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 100%;
+    width: @icon-border-width;
+  }
+}
+.icon-cross {
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: .6em;
+    width: 1em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
 }
 
 // Components with icons
diff --git a/src/variables.less b/src/variables.less
index 4217610..9547cfd 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -22,6 +22,7 @@
 @control-min-width: 18rem;
 @border-radius: .2rem;
 @border-width: .1rem;
+@icon-border-width: .2rem;
 
 // Colors
 // Core colors
-- 
cgit v1.3.1-23-gd82d


From bc2ebdd15b0d729f45553e7d877eb3308b02e153 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Mon, 27 Mar 2017 19:08:02 +0800
Subject: Add more CSS icons: refresh, search, edit, share, download, upload,
 people and link

---
 dist/spectre-icons.css         | 142 ++++++++++++++++++++++++++++++--
 dist/spectre-icons.min.css     |   2 +-
 docs/components.html           |  11 ++-
 docs/css/spectre-icons.css     | 170 ++++++++++++++++++++++++++++++++++++--
 docs/css/spectre-icons.min.css |   2 +-
 docs/elements.html             |  56 ++++++++++++-
 docs/index.html                |   4 +
 docs/layout.html               |  14 ++--
 src/icons.less                 | 181 +++++++++++++++++++++++++++++++++++++++--
 9 files changed, 547 insertions(+), 35 deletions(-)

(limited to 'docs/index.html')

diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
index 627fb09..535b06c 100644
--- a/dist/spectre-icons.css
+++ b/dist/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: 80%;
+  width: .8em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -141,23 +141,155 @@
   transform: translate(-50%, -75%) rotate(-45deg);
   width: .9em;
 }
+.icon-refresh::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  border-right-color: transparent;
+  content: "";
+  height: .9em;
+  width: .9em;
+}
+.icon-refresh::after {
+  border: .2em solid currentColor;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: 75%;
+  top: 25%;
+  width: 0;
+}
+.icon-search::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  content: "";
+  height: .75em;
+  left: 5%;
+  top: 5%;
+  -webkit-transform: translate(0, 0) rotate(45deg);
+  -ms-transform: translate(0, 0) rotate(45deg);
+  transform: translate(0, 0) rotate(45deg);
+  width: .75em;
+}
+.icon-search::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  left: 80%;
+  top: 80%;
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  -ms-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: .4em;
+}
+.icon-edit::before {
+  border: .2rem solid currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-40%, -60%) rotate(-45deg);
+  -ms-transform: translate(-40%, -60%) rotate(-45deg);
+  transform: translate(-40%, -60%) rotate(-45deg);
+  width: .85em;
+}
+.icon-edit::after {
+  border: .15em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: 10%;
+  top: 95%;
+  -webkit-transform: translate(0, -100%);
+  -ms-transform: translate(0, -100%);
+  transform: translate(0, -100%);
+  width: 0;
+}
+.icon-download::before,
+.icon-upload::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  height: .5em;
+  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+  -ms-transform: translate(-50%, -50%) rotate(-135deg);
+  transform: translate(-50%, -50%) rotate(-135deg);
+  width: .5em;
+}
+.icon-download::after,
+.icon-upload::after {
+  background: currentColor;
+  content: "";
+  height: .6em;
+  top: 40%;
+  width: .2rem;
+}
+.icon-download {
+  border-bottom: .2rem solid currentColor;
+}
+.icon-upload {
+  border-top: .2rem solid currentColor;
+}
+.icon-upload::before {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  -ms-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.icon-upload::after {
+  top: 60%;
+}
 .icon-mail::before {
   border: .2rem solid currentColor;
   border-radius: .2rem;
   content: "";
-  height: 75%;
-  width: 100%;
+  height: .8em;
+  width: 1em;
 }
 .icon-mail::after {
   border: .2rem solid currentColor;
   border-right: 0;
   border-top: 0;
   content: "";
-  height: 50%;
+  height: .5em;
   -webkit-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-  width: 50%;
+  width: .5em;
+}
+.icon-people::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  content: "";
+  height: .45em;
+  top: 25%;
+  width: .45em;
+}
+.icon-people::after {
+  border: .2rem solid currentColor;
+  border-radius: 50% 50% 0 0;
+  content: "";
+  height: .4em;
+  top: 75%;
+  width: .9em;
+}
+.icon-link::before,
+.icon-link::after {
+  border: .2rem solid currentColor;
+  border-radius: 5em;
+  border-right-color: transparent;
+  content: "";
+  height: .5em;
+  width: .75em;
+}
+.icon-link::before {
+  -webkit-transform: translate(-70%, -45%) rotate(-45deg);
+  -ms-transform: translate(-70%, -45%) rotate(-45deg);
+  transform: translate(-70%, -45%) rotate(-45deg);
+}
+.icon-link::after {
+  -webkit-transform: translate(-30%, -55%) rotate(135deg);
+  -ms-transform: translate(-30%, -55%) rotate(135deg);
+  transform: translate(-30%, -55%) rotate(135deg);
 }
 .btn .icon,
 .toast .icon,
diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
index 6d3b859..ad7b3d3 100644
--- a/dist/spectre-icons.min.css
+++ b/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:80%}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:75%;width:100%}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:50%;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:50%}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index cbe664e..3d074b2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -10,7 +10,6 @@
   
   
   
-  
 
 
   
    
@@ -512,7 +511,7 @@
                   
                 
                 
    
-                  
+                  
                   
    Google I/O
    
                   
    Software and hardware
    
                 
    
@@ -1607,7 +1606,7 @@
 
    <div class="tile">
   <div class="tile-icon">
     <div class="example-tile-icon">
-      <i class="icon icon-explore centered"></i>
+      <i class="icon icon-file centered"></i>
     </div>
   </div>
   <div class="tile-content">
@@ -1629,7 +1628,7 @@
               
    
                 
    
                   
    
-                    
+                    
                   
    
                 
    
                 
    
@@ -1647,7 +1646,7 @@
 
    <div class="tile tile-centered">
   <div class="tile-icon">
     <div class="example-tile-icon">
-      <i class="icon icon-explore centered"></i>
+      <i class="icon icon-file centered"></i>
     </div>
   </div>
   <div class="tile-content">
@@ -1673,7 +1672,7 @@
             
    
               
    
                 
-                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
    
             
    
           
    
diff --git a/docs/css/spectre-icons.css b/docs/css/spectre-icons.css
index 627fb09..f6f8325 100644
--- a/docs/css/spectre-icons.css
+++ b/docs/css/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: 80%;
+  width: .8em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -141,23 +141,183 @@
   transform: translate(-50%, -75%) rotate(-45deg);
   width: .9em;
 }
+.icon-refresh::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  border-right-color: transparent;
+  content: "";
+  height: .9em;
+  width: .9em;
+}
+.icon-refresh::after {
+  border: .2em solid currentColor;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: 75%;
+  top: 25%;
+  width: 0;
+}
+.icon-search::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  content: "";
+  height: .75em;
+  left: 5%;
+  top: 5%;
+  -webkit-transform: translate(0, 0) rotate(45deg);
+  -ms-transform: translate(0, 0) rotate(45deg);
+  transform: translate(0, 0) rotate(45deg);
+  width: .75em;
+}
+.icon-search::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  left: 80%;
+  top: 80%;
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  -ms-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: .4em;
+}
+.icon-edit::before {
+  border: .2rem solid currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-40%, -60%) rotate(-45deg);
+  -ms-transform: translate(-40%, -60%) rotate(-45deg);
+  transform: translate(-40%, -60%) rotate(-45deg);
+  width: .85em;
+}
+.icon-edit::after {
+  border: .15em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: 10%;
+  top: 95%;
+  -webkit-transform: translate(0, -100%);
+  -ms-transform: translate(0, -100%);
+  transform: translate(0, -100%);
+  width: 0;
+}
+.icon-share {
+  border: .2rem solid currentColor;
+  border-radius: .2rem;
+  border-right: 0;
+  border-top: 0;
+}
+.icon-share::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  height: .4em;
+  left: 100%;
+  top: 35%;
+  -webkit-transform: translate(-125%, -50%) rotate(135deg);
+  -ms-transform: translate(-125%, -50%) rotate(135deg);
+  transform: translate(-125%, -50%) rotate(135deg);
+  width: .4em;
+}
+.icon-share::after {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  border-top-left-radius: 50%;
+  content: "";
+  height: .4em;
+  width: .5em;
+}
+.icon-download::before,
+.icon-upload::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  height: .5em;
+  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+  -ms-transform: translate(-50%, -50%) rotate(-135deg);
+  transform: translate(-50%, -50%) rotate(-135deg);
+  width: .5em;
+}
+.icon-download::after,
+.icon-upload::after {
+  background: currentColor;
+  content: "";
+  height: .6em;
+  top: 40%;
+  width: .2rem;
+}
+.icon-download {
+  border-bottom: .2rem solid currentColor;
+}
+.icon-upload {
+  border-top: .2rem solid currentColor;
+}
+.icon-upload::before {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  -ms-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.icon-upload::after {
+  top: 60%;
+}
 .icon-mail::before {
   border: .2rem solid currentColor;
   border-radius: .2rem;
   content: "";
-  height: 75%;
-  width: 100%;
+  height: .8em;
+  width: 1em;
 }
 .icon-mail::after {
   border: .2rem solid currentColor;
   border-right: 0;
   border-top: 0;
   content: "";
-  height: 50%;
+  height: .5em;
   -webkit-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-  width: 50%;
+  width: .5em;
+}
+.icon-people::before {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+  content: "";
+  height: .45em;
+  top: 25%;
+  width: .45em;
+}
+.icon-people::after {
+  border: .2rem solid currentColor;
+  border-radius: 50% 50% 0 0;
+  content: "";
+  height: .4em;
+  top: 75%;
+  width: .9em;
+}
+.icon-link::before,
+.icon-link::after {
+  border: .2rem solid currentColor;
+  border-radius: 5em;
+  border-right-color: transparent;
+  content: "";
+  height: .5em;
+  width: .75em;
+}
+.icon-link::before {
+  -webkit-transform: translate(-70%, -45%) rotate(-45deg);
+  -ms-transform: translate(-70%, -45%) rotate(-45deg);
+  transform: translate(-70%, -45%) rotate(-45deg);
+}
+.icon-link::after {
+  -webkit-transform: translate(-30%, -55%) rotate(135deg);
+  -ms-transform: translate(-30%, -55%) rotate(135deg);
+  transform: translate(-30%, -55%) rotate(135deg);
 }
 .btn .icon,
 .toast .icon,
diff --git a/docs/css/spectre-icons.min.css b/docs/css/spectre-icons.min.css
index 6d3b859..a9735de 100644
--- a/docs/css/spectre-icons.min.css
+++ b/docs/css/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:80%}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:75%;width:100%}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:50%;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:50%}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.4em;left:100%;top:35%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.4em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-right:0;border-top-left-radius:50%;content:"";height:.4em;width:.5em}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index fcba870..12b0dd2 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -411,9 +411,9 @@
               
             
    
             
    
-              
-              
-              
+              
+              
+              
             
    
             
    
               
@@ -1014,7 +1014,7 @@
         
    
           
    Icons experimental
    
           
    
-            
    Icons are pure CSS icons.
    
+            
    Icons are pure CSS icons. You can include spectre-icons.css in the dist folder to your web <head> to have these CSS icons.
    
           
    
           
    
             
    
@@ -1113,12 +1113,60 @@
               
               
    icon-check
    
             
    
+            
    
+              
+              
    icon-refresh
    
+            
    
+            
    
+              
+              
    icon-search
    
+            
    
+            
    
+              
+              
    icon-edit
    
+            
    
+            
    
+              
+              
    icon-share
    
+            
    
+            
    
+              
+              
    icon-download
    
+            
    
+            
    
+              
+              
    icon-upload
    
+            
    
             
    
               
               
    icon-mail
    
             
    
+            
    
+              
+              
    icon-people
    
+            
    
+            
    
+              
+              
    icon-link
    
+            
    
           
    
 
 
diff --git a/docs/index.html b/docs/index.html
index 48b6d68..ad39d67 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -156,6 +156,7 @@
 
 
    <link rel="stylesheet" href="dist/spectre.min.css" />
 <link rel="stylesheet" href="dist/spectre-exp.min.css" />
+<link rel="stylesheet" href="dist/spectre-icons.min.css" />
 
    
 
           
    
@@ -180,6 +181,8 @@
 ├── dist/
 │   ├── spectre-exp.css
 │   ├── spectre-exp.min.css
+│   ├── spectre-icons.css
+│   ├── spectre-icons.min.css
 │   ├── spectre.css
 │   └── spectre.min.css
 │
@@ -197,6 +200,7 @@
 │   └── ...
 │
 ├── spectre-exp.less
+├── spectre-icons.less
 └── spectre.less
 
    
 
diff --git a/docs/layout.html b/docs/layout.html
index e026059..7115502 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -474,7 +474,7 @@
                       
    bruce.banner@hulk.com
    
                     
                     
    
-                      
+                      
                     
    
                   
                   
    
@@ -483,7 +483,7 @@
                       
    bruce.banner
    
                     
    
                     
    
-                      
+                      
                     
    
                   
                   
    
@@ -492,12 +492,12 @@
                       
    Dayton, Ohio
    
                     
    
                     
    
-                      
+                      
                     
    
                   
                 
                 
    
-                  
+                  
                 
    
               
             
@@ -600,7 +600,7 @@
             
    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
    
           
    
           
    
-            
    
+            
    
               
    
                 
    
                   
@@ -612,7 +612,7 @@
                 
    
               
    
             
    
-            
    
+            
    
               
    
                 
    
                   
@@ -627,7 +627,7 @@
                 
    
               
    
             
    
-            
    
+            
    
               
    
                 
    
                   
diff --git a/src/icons.less b/src/icons.less
index 2082c75..f922569 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -33,8 +33,8 @@
     border-right: 0;
     content: "";
     height: .65em;
-    width: .65em;
     transform: translate(-25%, -50%) rotate(-45deg);
+    width: .65em;
   }
 }
 
@@ -65,7 +65,7 @@
     content: "";
     height: @icon-border-width;
     left: 60%;
-    width: 80%;
+    width: .8em;
   }
 }
 
@@ -157,23 +157,192 @@
   }
 }
 
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: .9em;
+    width: .9em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    content: "";
+    height: 0;
+    left: 75%;
+    top: 25%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: 10%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: @icon-border-width solid currentColor;
+  border-radius: @border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .4em;
+    left: 100%;
+    top: 35%;
+    transform: translate(-125%, -50%) rotate(135deg);
+    width: .4em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-top-left-radius: 50%;
+    content: "";
+    height: .4em;
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .6em;
+    top: 40%;
+    width: @icon-border-width;
+  }
+}
+
+.icon-download {
+  border-bottom: @icon-border-width solid currentColor;
+}
+
+.icon-upload {
+  border-top: @icon-border-width solid currentColor;
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  &::after {
+    top: 60%;
+  }
+}
+
 // Icon mail
 .icon-mail {
   &::before {
     border: @icon-border-width solid currentColor;
     border-radius: @border-radius;
     content: "";
-    height: 75%;
-    width: 100%;
+    height: .8em;
+    width: 1em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
     content: "";
-    height: 50%;
+    height: .5em;
     transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-    width: 50%;
+    width: .5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .45em;
+    top: 25%;
+    width: .45em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    content: "";
+    height: .4em;
+    top: 75%;
+    width: .9em;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-radius: 5em;
+    border-right-color: transparent;
+    content: "";
+    height: .5em;
+    width: .75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
   }
 }
 
-- 
cgit v1.3.1-23-gd82d


From 2ced542b8ca284c6de5cc063cf00062f8ceaa25f Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Tue, 28 Mar 2017 17:44:21 +0800
Subject: Improve icons

---
 dist/spectre-icons.css         | 149 ++++++++++++++++++++++++++++++++++++-----
 dist/spectre-icons.min.css     |   2 +-
 docs/components.html           |   2 +-
 docs/css/docs.css              |   3 +
 docs/css/docs.min.css          |   2 +-
 docs/css/spectre-icons.css     | 131 ++++++++++++++++++++++++++++++------
 docs/css/spectre-icons.min.css |   2 +-
 docs/elements.html             |  20 +++++-
 docs/experimentals.html        |   2 +-
 docs/index.html                |  13 ++--
 docs/src/docs.less             |   4 ++
 spectre-icons.less             |   1 +
 src/component-icons.less       |   8 +++
 src/icons.less                 | 136 ++++++++++++++++++++++++++++++-------
 14 files changed, 400 insertions(+), 75 deletions(-)
 create mode 100644 src/component-icons.less

(limited to 'docs/index.html')

diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
index 535b06c..469f7a7 100644
--- a/dist/spectre-icons.css
+++ b/dist/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: .8em;
+  width: .9em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -91,14 +91,21 @@
   height: .2rem;
   width: 100%;
 }
+.icon-apps::before {
+  background: currentColor;
+  box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+  content: "";
+  height: .3rem;
+  width: .3rem;
+}
 .icon-more-horiz::before,
 .icon-more-vert::before {
   background: currentColor;
   border-radius: 50%;
   box-shadow: -.4em 0, .4em 0;
   content: "";
-  height: .4rem;
-  width: .4rem;
+  height: .3rem;
+  width: .3rem;
 }
 .icon-more-vert::before {
   box-shadow: 0 -.4em, 0 .4em;
@@ -197,13 +204,85 @@
   border-top-color: transparent;
   content: "";
   height: 0;
-  left: 10%;
+  left: 5%;
   top: 95%;
   -webkit-transform: translate(0, -100%);
   -ms-transform: translate(0, -100%);
   transform: translate(0, -100%);
   width: 0;
 }
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+}
+.icon-delete::before {
+  border: .2rem solid currentColor;
+  border-bottom-left-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+  border-top: 0;
+  content: "";
+  height: .7em;
+  top: 65%;
+  width: .75em;
+}
+.icon-delete::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  top: 10%;
+  width: .9em;
+}
+.icon-share {
+  border: .2rem solid currentColor;
+  border-radius: .2rem;
+  border-right: 0;
+  border-top: 0;
+}
+.icon-share::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  height: .45em;
+  left: 100%;
+  top: 36%;
+  -webkit-transform: translate(-125%, -50%) rotate(135deg);
+  -ms-transform: translate(-125%, -50%) rotate(135deg);
+  transform: translate(-125%, -50%) rotate(135deg);
+  width: .45em;
+}
+.icon-share::after {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-radius: 75% 5%;
+  border-right: 0;
+  content: "";
+  height: .4em;
+  width: .6em;
+}
+.icon-flag::before {
+  background: currentColor;
+  content: "";
+  height: 1em;
+  left: 10%;
+  width: .2rem;
+}
+.icon-flag::after {
+  border: .2rem solid currentColor;
+  border-bottom-right-radius: .2rem;
+  border-left: 0;
+  border-top-right-radius: .2rem;
+  content: "";
+  height: .65em;
+  left: 55%;
+  top: 35%;
+  width: .75em;
+}
+.icon-download,
+.icon-upload {
+  border-bottom: .2rem solid currentColor;
+}
 .icon-download::before,
 .icon-upload::before {
   border: .2rem solid currentColor;
@@ -211,9 +290,9 @@
   border-right: 0;
   content: "";
   height: .5em;
-  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
-  -ms-transform: translate(-50%, -50%) rotate(-135deg);
-  transform: translate(-50%, -50%) rotate(-135deg);
+  -webkit-transform: translate(-50%, -60%) rotate(-135deg);
+  -ms-transform: translate(-50%, -60%) rotate(-135deg);
+  transform: translate(-50%, -60%) rotate(-135deg);
   width: .5em;
 }
 .icon-download::after,
@@ -224,19 +303,38 @@
   top: 40%;
   width: .2rem;
 }
-.icon-download {
-  border-bottom: .2rem solid currentColor;
-}
-.icon-upload {
-  border-top: .2rem solid currentColor;
-}
 .icon-upload::before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
-  transform: translate(-50%, -50%) rotate(45deg);
+  -webkit-transform: translate(-50%, -60%) rotate(45deg);
+  -ms-transform: translate(-50%, -60%) rotate(45deg);
+  transform: translate(-50%, -60%) rotate(45deg);
 }
 .icon-upload::after {
-  top: 60%;
+  top: 50%;
+}
+.icon-time {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+}
+.icon-time::before {
+  background: currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-50%, -75%);
+  -ms-transform: translate(-50%, -75%);
+  transform: translate(-50%, -75%);
+  width: .2rem;
+}
+.icon-time::after {
+  background: currentColor;
+  content: "";
+  height: .3em;
+  -webkit-transform: translate(-50%, -75%) rotate(90deg);
+  -ms-transform: translate(-50%, -75%) rotate(90deg);
+  transform: translate(-50%, -75%) rotate(90deg);
+  -webkit-transform-origin: 50% 90%;
+  -ms-transform-origin: 50% 90%;
+  transform-origin: 50% 90%;
+  width: .2rem;
 }
 .icon-mail::before {
   border: .2rem solid currentColor;
@@ -272,6 +370,23 @@
   top: 75%;
   width: .9em;
 }
+.icon-file::before {
+  border: .2rem solid currentColor;
+  border-radius: .2rem .4em .2rem .2rem;
+  content: "";
+  height: 1em;
+  width: .9em;
+}
+.icon-file::after {
+  border: .2em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: .8em;
+  top: .2em;
+  width: 0;
+}
 .icon-link::before,
 .icon-link::after {
   border: .2rem solid currentColor;
diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
index ad7b3d3..6aa12b5 100644
--- a/dist/spectre-icons.min.css
+++ b/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.9em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:.3rem;width:.3rem}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.3rem;width:.3rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete{height:.7em;margin:.15em .1em;width:.8em}.icon-delete::before{border:.2rem solid currentColor;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;border-top:0;content:"";height:.7em;top:65%;width:.75em}.icon-delete::after{background:currentColor;content:"";height:.2rem;top:10%;width:.9em}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;left:100%;top:36%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.45em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-radius:75% 5%;border-right:0;content:"";height:.4em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:10%;width:.2rem}.icon-flag::after{border:.2rem solid currentColor;border-bottom-right-radius:.2rem;border-left:0;border-top-right-radius:.2rem;content:"";height:.65em;left:55%;top:35%;width:.75em}.icon-download,.icon-upload{border-bottom:.2rem solid currentColor}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-60%) rotate(-135deg);-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-upload::before{-webkit-transform:translate(-50%,-60%) rotate(45deg);-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.2rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-webkit-transform:translate(-50%,-75%);-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.2rem}.icon-time::after{background:currentColor;content:"";height:.3em;-webkit-transform:translate(-50%,-75%) rotate(90deg);-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-webkit-transform-origin:50% 90%;-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.2rem}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-file::before{border:.2rem solid currentColor;border-radius:.2rem .4em .2rem .2rem;content:"";height:1em;width:.9em}.icon-file::after{border:.2em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:.8em;top:.2em;width:0}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index 3d074b2..80e3a5b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1628,7 +1628,7 @@
               
    
                 
    
                   
    
-                    
+                    
                   
    
                 
    
                 
    
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 2502c44..24af3bb 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -184,6 +184,9 @@
   height: 4rem;
   width: 4rem;
 }
+.docs-content .example-tile-icon .icon {
+  margin: auto;
+}
 @media screen and (min-width: 601px) {
   .section-header .navbar-section {
     padding: 0 .5rem;
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index 1cde555..b5effd3 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
diff --git a/docs/css/spectre-icons.css b/docs/css/spectre-icons.css
index f6f8325..469f7a7 100644
--- a/docs/css/spectre-icons.css
+++ b/docs/css/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: .8em;
+  width: .9em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -91,14 +91,21 @@
   height: .2rem;
   width: 100%;
 }
+.icon-apps::before {
+  background: currentColor;
+  box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+  content: "";
+  height: .3rem;
+  width: .3rem;
+}
 .icon-more-horiz::before,
 .icon-more-vert::before {
   background: currentColor;
   border-radius: 50%;
   box-shadow: -.4em 0, .4em 0;
   content: "";
-  height: .4rem;
-  width: .4rem;
+  height: .3rem;
+  width: .3rem;
 }
 .icon-more-vert::before {
   box-shadow: 0 -.4em, 0 .4em;
@@ -197,13 +204,35 @@
   border-top-color: transparent;
   content: "";
   height: 0;
-  left: 10%;
+  left: 5%;
   top: 95%;
   -webkit-transform: translate(0, -100%);
   -ms-transform: translate(0, -100%);
   transform: translate(0, -100%);
   width: 0;
 }
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+}
+.icon-delete::before {
+  border: .2rem solid currentColor;
+  border-bottom-left-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+  border-top: 0;
+  content: "";
+  height: .7em;
+  top: 65%;
+  width: .75em;
+}
+.icon-delete::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  top: 10%;
+  width: .9em;
+}
 .icon-share {
   border: .2rem solid currentColor;
   border-radius: .2rem;
@@ -215,22 +244,44 @@
   border-bottom: 0;
   border-right: 0;
   content: "";
-  height: .4em;
+  height: .45em;
   left: 100%;
-  top: 35%;
+  top: 36%;
   -webkit-transform: translate(-125%, -50%) rotate(135deg);
   -ms-transform: translate(-125%, -50%) rotate(135deg);
   transform: translate(-125%, -50%) rotate(135deg);
-  width: .4em;
+  width: .45em;
 }
 .icon-share::after {
   border: .2rem solid currentColor;
   border-bottom: 0;
+  border-radius: 75% 5%;
   border-right: 0;
-  border-top-left-radius: 50%;
   content: "";
   height: .4em;
-  width: .5em;
+  width: .6em;
+}
+.icon-flag::before {
+  background: currentColor;
+  content: "";
+  height: 1em;
+  left: 10%;
+  width: .2rem;
+}
+.icon-flag::after {
+  border: .2rem solid currentColor;
+  border-bottom-right-radius: .2rem;
+  border-left: 0;
+  border-top-right-radius: .2rem;
+  content: "";
+  height: .65em;
+  left: 55%;
+  top: 35%;
+  width: .75em;
+}
+.icon-download,
+.icon-upload {
+  border-bottom: .2rem solid currentColor;
 }
 .icon-download::before,
 .icon-upload::before {
@@ -239,9 +290,9 @@
   border-right: 0;
   content: "";
   height: .5em;
-  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
-  -ms-transform: translate(-50%, -50%) rotate(-135deg);
-  transform: translate(-50%, -50%) rotate(-135deg);
+  -webkit-transform: translate(-50%, -60%) rotate(-135deg);
+  -ms-transform: translate(-50%, -60%) rotate(-135deg);
+  transform: translate(-50%, -60%) rotate(-135deg);
   width: .5em;
 }
 .icon-download::after,
@@ -252,19 +303,38 @@
   top: 40%;
   width: .2rem;
 }
-.icon-download {
-  border-bottom: .2rem solid currentColor;
-}
-.icon-upload {
-  border-top: .2rem solid currentColor;
-}
 .icon-upload::before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
-  transform: translate(-50%, -50%) rotate(45deg);
+  -webkit-transform: translate(-50%, -60%) rotate(45deg);
+  -ms-transform: translate(-50%, -60%) rotate(45deg);
+  transform: translate(-50%, -60%) rotate(45deg);
 }
 .icon-upload::after {
-  top: 60%;
+  top: 50%;
+}
+.icon-time {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+}
+.icon-time::before {
+  background: currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-50%, -75%);
+  -ms-transform: translate(-50%, -75%);
+  transform: translate(-50%, -75%);
+  width: .2rem;
+}
+.icon-time::after {
+  background: currentColor;
+  content: "";
+  height: .3em;
+  -webkit-transform: translate(-50%, -75%) rotate(90deg);
+  -ms-transform: translate(-50%, -75%) rotate(90deg);
+  transform: translate(-50%, -75%) rotate(90deg);
+  -webkit-transform-origin: 50% 90%;
+  -ms-transform-origin: 50% 90%;
+  transform-origin: 50% 90%;
+  width: .2rem;
 }
 .icon-mail::before {
   border: .2rem solid currentColor;
@@ -300,6 +370,23 @@
   top: 75%;
   width: .9em;
 }
+.icon-file::before {
+  border: .2rem solid currentColor;
+  border-radius: .2rem .4em .2rem .2rem;
+  content: "";
+  height: 1em;
+  width: .9em;
+}
+.icon-file::after {
+  border: .2em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: .8em;
+  top: .2em;
+  width: 0;
+}
 .icon-link::before,
 .icon-link::after {
   border: .2rem solid currentColor;
diff --git a/docs/css/spectre-icons.min.css b/docs/css/spectre-icons.min.css
index a9735de..6aa12b5 100644
--- a/docs/css/spectre-icons.min.css
+++ b/docs/css/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.4em;left:100%;top:35%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.4em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-right:0;border-top-left-radius:50%;content:"";height:.4em;width:.5em}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.9em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:.3rem;width:.3rem}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.3rem;width:.3rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete{height:.7em;margin:.15em .1em;width:.8em}.icon-delete::before{border:.2rem solid currentColor;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;border-top:0;content:"";height:.7em;top:65%;width:.75em}.icon-delete::after{background:currentColor;content:"";height:.2rem;top:10%;width:.9em}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;left:100%;top:36%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.45em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-radius:75% 5%;border-right:0;content:"";height:.4em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:10%;width:.2rem}.icon-flag::after{border:.2rem solid currentColor;border-bottom-right-radius:.2rem;border-left:0;border-top-right-radius:.2rem;content:"";height:.65em;left:55%;top:35%;width:.75em}.icon-download,.icon-upload{border-bottom:.2rem solid currentColor}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-60%) rotate(-135deg);-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-upload::before{-webkit-transform:translate(-50%,-60%) rotate(45deg);-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.2rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-webkit-transform:translate(-50%,-75%);-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.2rem}.icon-time::after{background:currentColor;content:"";height:.3em;-webkit-transform:translate(-50%,-75%) rotate(90deg);-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-webkit-transform-origin:50% 90%;-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.2rem}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-file::before{border:.2rem solid currentColor;border-radius:.2rem .4em .2rem .2rem;content:"";height:1em;width:.9em}.icon-file::after{border:.2em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:.8em;top:.2em;width:0}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 12b0dd2..cde99eb 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1014,7 +1014,7 @@
         
    
           
    Icons experimental
    
           
    
-            
    Icons are pure CSS icons. You can include spectre-icons.css in the dist folder to your web <head> to have these CSS icons.
    
+            
    Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.
    
           
    
           
    
             
    
@@ -1071,6 +1071,12 @@
               
               
    icon-menu
    
             
    
+            
    
+              
+              
    icon-apps
    
+            
    
             
    
               
               
    icon-search
    
             
    
+            
    
+              
+              
    icon-flag
    
+            
    
             
    
               
               
    icon-upload
    
             
    
+            
    
+              
+              
    icon-time
    
+            
    
             
    
               
    
                     
    
                     
    
-                    
    
+                    
    
                     
    
                     
    
                     
    
diff --git a/docs/index.html b/docs/index.html
index ad39d67..42ba080 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -298,11 +298,11 @@
           
    
             
    Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
    
             
      
-              
    • Chrome (last 4)
      • 
-              
    • Microsoft Edge (last 4)
      • 
-              
    • Firefox (last 4)
      • 
-              
    • Safari (last 4)
      • 
-              
    • Opera (last 4)
      • 
+              
    • Chrome Last 4
      • 
+              
    • Microsoft Edge Last 4
      • 
+              
    • Firefox Last 4
      • 
+              
    • Safari Last 4
      • 
+              
    • Opera Last 4
      • 
               
    • Internet Explorer 10+
      • 
             
    
           
    
@@ -313,6 +313,9 @@
           
    
             
    March 2017
    
             
      
+              
    • 
+                Icons: single-element, responsive and pure CSS icons NEW
+              
      • 
               
    • 
                 Popovers: small overlay content containers NEW
               
      • 
diff --git a/docs/src/docs.less b/docs/src/docs.less
index 6f7393a..a458b5d 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -219,6 +219,10 @@
     font-size: 2.4rem;
     height: 4rem;
     width: 4rem;
+
+    .icon {
+      margin: auto;
+    }
   }
 }
 
diff --git a/spectre-icons.less b/spectre-icons.less
index a366e7d..3491565 100644
--- a/spectre-icons.less
+++ b/spectre-icons.less
@@ -6,3 +6,4 @@
 
 // Icons
 @import 'src/icons.less';
+@import 'src/component-icons.less';
diff --git a/src/component-icons.less b/src/component-icons.less
new file mode 100644
index 0000000..7551d05
--- /dev/null
+++ b/src/component-icons.less
@@ -0,0 +1,8 @@
+// Component icon support
+.btn,
+.toast,
+.menu {
+  .icon {
+    vertical-align: -10%;
+  }
+}
diff --git a/src/icons.less b/src/icons.less
index f922569..4384d48 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -65,7 +65,7 @@
     content: "";
     height: @icon-border-width;
     left: 60%;
-    width: .8em;
+    width: .9em;
   }
 }
 
@@ -93,6 +93,17 @@
   }
 }
 
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    content: "";
+    height: .3rem;
+    width: .3rem;
+  }
+}
+
 // Icon more
 .icon-more-horiz,
 .icon-more-vert {
@@ -101,8 +112,8 @@
     box-shadow: -.4em 0, .4em 0;
     border-radius: 50%;
     content: "";
-    height: @icon-border-width * 2;
-    width: @icon-border-width * 2;
+    height: .3rem;
+    width: .3rem;
   }
 }
 .icon-more-vert {
@@ -217,13 +228,37 @@
     border-right-color: transparent;
     content: "";
     height: 0;
-    left: 10%;
+    left: 5%;
     top: 95%;
     transform: translate(0, -100%);
     width: 0;
   }
 }
 
+// Icon delete
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-bottom-left-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
+    border-top: 0;
+    content: "";
+    height: .7em;
+    top: 65%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    top: 10%;
+    width: .9em;
+  }
+}
+
 // Icon share
 .icon-share {
   border: @icon-border-width solid currentColor;
@@ -235,26 +270,49 @@
     border-bottom: 0;
     border-right: 0;
     content: "";
-    height: .4em;
+    height: .45em;
     left: 100%;
-    top: 35%;
+    top: 36%;
     transform: translate(-125%, -50%) rotate(135deg);
-    width: .4em;
+    width: .45em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    border-top-left-radius: 50%;
+    border-radius: 75% 5%;
     content: "";
     height: .4em;
-    width: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 1em;
+    left: 10%;
+    width: @icon-border-width;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom-right-radius: @border-radius;
+    border-left: 0;
+    border-top-right-radius: @border-radius;
+    content: "";
+    height: .65em;
+    top: 35%;
+    left: 55%;
+    width: .75em;
   }
 }
 
 // Icon download & upload
 .icon-download,
 .icon-upload {
+  border-bottom: @icon-border-width solid currentColor;
   &::before {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
@@ -262,7 +320,7 @@
     content: "";
     height: .5em;
     width: .5em;
-    transform: translate(-50%, -50%) rotate(-135deg);
+    transform: translate(-50%, -60%) rotate(-135deg);
   }
   &::after {
     background: currentColor;
@@ -273,17 +331,33 @@
   }
 }
 
-.icon-download {
-  border-bottom: @icon-border-width solid currentColor;
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
 }
 
-.icon-upload {
-  border-top: @icon-border-width solid currentColor;
+// Icon time
+.icon-time {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
   &::before {
-    transform: translate(-50%, -50%) rotate(45deg);
+    background: currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: @icon-border-width;
   }
   &::after {
-    top: 60%;
+    background: currentColor;
+    content: "";
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: @icon-border-width;
   }
 }
 
@@ -327,6 +401,27 @@
   }
 }
 
+// Icon file
+.icon-file {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: @border-radius .4em @border-radius @border-radius;
+    content: "";
+    height: 1em;
+    width: .9em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: .8em;
+    top: .2em;
+    width: 0;
+  }
+}
+
 // Icon link
 .icon-link {
   &::before,
@@ -345,12 +440,3 @@
     transform: translate(-30%, -55%) rotate(135deg);
   }
 }
-
-// Components with icons
-.btn,
-.toast,
-.menu {
-  .icon {
-    vertical-align: -10%;
-  }
-}
-- 
cgit v1.3.1-23-gd82d