Web Style Guide: Icons

Icons: Font Awesome

Font Awesome, an online icon collection that is free for commercial use, gives you scalable vector icons that can instantly be customized. View the full list of icons

HTML: Basic Icon

<em class="fa fa-user-circle" aria-hidden="true"></em>

HTML: Icon Size

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
    <div><em class="fa fa-user-circle fa-lg" aria-hidden="true">&nbsp;</em> fa-lg</div>
    <div><em class="fa fa-user-circle fa-2x" aria-hidden="true">&nbsp;</em> fa-2x</div>
    <div><em class="fa fa-user-circle fa-3x" aria-hidden="true">&nbsp;</em> fa-3x</div>
    <div><em class="fa fa-user-circle fa-4x" aria-hidden="true">&nbsp;</em> fa-4x</div>
    <div><em class="fa fa-user-circle fa-5x" aria-hidden="true">&nbsp;</em> fa-5x</div>

HTML: Icon Color

Red
Gray
Gray Light
White
Black
Blue
Blue Light
Orange
Green
Green Light
Teal
Teal Light
<div><em class="fa fa-user-circle fa-3x red" aria-hidden="true">&nbsp;</em> Red</div>
<div><em class="fa fa-user-circle fa-3x gray" aria-hidden="true">&nbsp;</em> Gray</div>
<div><em class="fa fa-user-circle fa-3x gray-light" aria-hidden="true">&nbsp;</em> Gray Light</div>
<div><em class="fa fa-user-circle fa-3x white" aria-hidden="true">&nbsp;</em> White</div>
<div><em class="fa fa-user-circle fa-3x black" aria-hidden="true">&nbsp;</em> Black</div>
<div><em class="fa fa-user-circle fa-3x blue" aria-hidden="true">&nbsp;</em> Blue</div>
<div><em class="fa fa-user-circle fa-3x blue-light" aria-hidden="true">&nbsp;</em> Blue Light</div>
<div><em class="fa fa-user-circle fa-3x orange" aria-hidden="true">&nbsp;</em> Orange</div>
<div><em class="fa fa-user-circle fa-3x green" aria-hidden="true">&nbsp;</em> Green</div>
<div><em class="fa fa-user-circle fa-3x green-light" aria-hidden="true">&nbsp;</em> Green Light</div>
<div><em class="fa fa-user-circle fa-3x teal" aria-hidden="true">&nbsp;</em> Teal</div>
<div><em class="fa fa-user-circle fa-3x teal-light" aria-hidden="true">&nbsp;</em> Teal Light</div>

HTML: Rotated & Flipped

 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 fa-flip-vertical
<div><em class="fa fa-shield"></em>&nbsp;normal</div>
<div><em class="fa fa-shield fa-rotate-90"></em>&nbsp;fa-rotate-90</div>
<div><em class="fa fa-shield fa-rotate-180"></em>&nbsp;fa-rotate-180</div>
<div><em class="fa fa-shield fa-rotate-270"></em>&nbsp;fa-rotate-270</div>
<div><em class="fa fa-shield fa-flip-horizontal"></em>&nbsp;fa-flip-horizontal</div>
<div><em class="fa fa-shield fa-flip-vertical"></em>&nbsp;fa-flip-vertical</div>

HTML: Stacked Icons

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
<div><span class="fa-stack fa-lg"><em class="fa fa-square-o fa-stack-2x"></em><em class="fa fa-twitter fa-stack-1x"></em></span> fa-twitter on fa-square-o</div>
<div><span class="fa-stack fa-lg"><em class="fa fa-circle fa-stack-2x"></em><em class="fa fa-flag fa-stack-1x fa-inverse"></em></span>fa-flag on fa-circle</div>
<div><span class="fa-stack fa-lg"><em class="fa fa-square fa-stack-2x"></em><em class="fa fa-terminal fa-stack-1x fa-inverse"></em></span> fa-terminal on fa-square</div>
<div><span class="fa-stack fa-lg"><em class="fa fa-camera fa-stack-1x"></em><em class="fa fa-ban fa-stack-2x text-danger"></em></span>fa-ban on fa-camera</div>

Design, Tools & Training

Top