Icons

Use Space's custom icon styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Space includes several predefined button styles, each serving its own semantic purpose.

            
              <a class="u-icon u-icon--primary" href="#">
                <span class="fab fa-linux u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--secondary" href="#">
                <span class="fa fa-mobile-alt u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--success" href="#">
                <span class="fa fa-laptop u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--danger" href="#">
                <span class="fab fa-accusoft u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--warning" href="#">
                <span class="fab fa-apple u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--info" href="#">
                <span class="fab fa-windows u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--purple" href="#">
                <span class="fab fa-windows u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--light" href="#">
                <span class="fab fa-dribbble u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--dark" href="#">
                <span class="fab fa-telegram u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--facebook" href="#">
                <span class="fab fa-facebook-f u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--google" href="#">
                <span class="fab fa-google u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--twitter" href="#">
                <span class="fab fa-twitter u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--github" href="#">
                <span class="fab fa-github u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--instagram" href="#">
                <span class="fab fa-instagram u-icon__inner"></span>
              </a>
            
          

Sizes

Fancy larger or smaller buttons? Add .u-icon--lg or .u-icon--sm for additional sizes.

            
              <a class="u-icon u-icon--sm u-icon--primary" href="#">
                <span class="fa fa-mobile-alt u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--primary" href="#">
                <span class="fa fa-laptop u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--md u-icon--primary" href="#">
                <span class="fab fa-accusoft u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--lg u-icon--primary" href="#">
                <span class="fab fa-apple u-icon__inner"></span>
              </a>