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>