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>
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>