Skip to main content

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--xl 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--xl u-icon--primary" href="#">
                <span class="fab fa-apple u-icon__inner"></span>
              </a>

Border radius

Use the .rounded-circle modifier class to make icons more rounded with a larger border-radius or remove the border radius with .rounded-0 class.

            
              <a class="u-icon u-icon--primary rounded-0" href="#">
                <span class="fa fa-mobile-alt u-icon__inner"></span>
              </a>
              <a class="u-icon u-icon--primary rounded-circle" href="#">
                <span class="fa fa-laptop u-icon__inner"></span>
              </a>

Shadow

Use the .u-icon--shadow style class to add more stylish look with box-shadow around them.

            
              <a class="u-icon u-icon--md u-icon--light u-icon--shadow" href="#">
                <span class="fa fa-mobile-alt u-icon__inner"></span>
              </a>
              <span class="u-icon u-icon--md u-icon--light u-icon--shadow">
                <span class="fa fa-laptop u-icon__inner"></span>
              </span>