Icons
Use Front's custom icon styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Front 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-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>
Air style
Front includes several predefined button styles, each serving its own semantic purpose.
<a class="u-icon u-icon-primary--air" href="#">
<span class="fab fa-linux u-icon__inner"></span>
</a>
<a class="u-icon u-icon-secondary--air" href="#">
<span class="fa fa-mobile-alt u-icon__inner"></span>
</a>
<a class="u-icon u-icon-success--air" href="#">
<span class="fa fa-laptop u-icon__inner"></span>
</a>
<a class="u-icon u-icon-danger--air" href="#">
<span class="fab fa-accusoft u-icon__inner"></span>
</a>
<a class="u-icon u-icon-warning--air" href="#">
<span class="fab fa-apple u-icon__inner"></span>
</a>
<a class="u-icon u-icon-info--air" href="#">
<span class="fab fa-windows u-icon__inner"></span>
</a>
<a class="u-icon u-icon-light--air" href="#">
<span class="fab fa-dribbble u-icon__inner"></span>
</a>
<a class="u-icon u-icon-dark--air" href="#">
<span class="fab fa-telegram u-icon__inner"></span>
</a>
<a class="u-icon u-icon-facebook--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
<a class="u-icon u-icon-google--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
<a class="u-icon u-icon-twitter--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
<a class="u-icon u-icon-github--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
<a class="u-icon u-icon-instagram--air" href="#">
<span class="fab fa-instagram u-icon__inner"></span>
</a>
Border style
Front includes several predefined button styles, each serving its own semantic purpose.
<a class="u-icon u-icon-brd-primary" href="#">
<span class="fab fa-linux u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-secondary" href="#">
<span class="fa fa-mobile-alt u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-success" href="#">
<span class="fa fa-laptop u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-danger" href="#">
<span class="fab fa-accusoft u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-warning" href="#">
<span class="fab fa-apple u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-info" href="#">
<span class="fab fa-windows u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-light" href="#">
<span class="fab fa-dribbble u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-dark" href="#">
<span class="fab fa-telegram u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-facebook" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-google" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-twitter" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-github" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-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--xs u-icon-brd-primary" href="#">
<span class="fab fa-linux u-icon__inner"></span>
</a>
<a class="u-icon u-icon--sm u-icon-brd-secondary" href="#">
<span class="fa fa-mobile-alt u-icon__inner"></span>
</a>
<a class="u-icon u-icon-brd-success" href="#">
<span class="fa fa-laptop u-icon__inner"></span>
</a>
<a class="u-icon u-icon--lg u-icon-brd-danger" href="#">
<span class="fab fa-accusoft u-icon__inner"></span>
</a>
<a class="u-icon u-icon--xl u-icon-brd-warning" href="#">
<span class="fab fa-apple u-icon__inner"></span>
</a>
Bottom minus option
See our modern icon-out-of-box option.
<span class="u-icon u-icon--xl u-icon-primary--air rounded-circle">
<span class="fab fa-linux u-icon__inner u-icon__inner-bottom-minus"></span>
</span>
<span class="u-icon u-icon--xl u-icon-secondary--air rounded-circle">
<span class="fa fa-mobile-alt u-icon__inner u-icon__inner-bottom-minus"></span>
</span>
<span class="u-icon u-icon--xl u-icon-success--air rounded-circle">
<span class="fa fa-laptop u-icon__inner u-icon__inner-bottom-minus"></span>
</span>
<span class="u-icon u-icon--xl u-icon-danger--air rounded-circle">
<span class="fab fa-accusoft u-icon__inner u-icon__inner-bottom-minus"></span>
</span>
<span class="u-icon u-icon--xl u-icon-warning--air rounded-circle">
<span class="fab fa-apple u-icon__inner u-icon__inner-bottom-minus"></span>
</span>