Icons

In order to ensure that "Design 2.0" is as lightweight as possible, the Material Symbols icon font is used to handle commonplace images. This also has the benefit of ensuring compatibility with high-resolution displays like Apple's Retina Display.

The examples below are based on Material Symbols' documentation; be sure to go there for more examples as well as a list of all available icons.

Basic Icon Example

Calendar
Cloud
Envelope
Lock
Phone
Star (Outline)
Star (Fill) 

<i class="fa fa-calendar"></i> Calendar
<i class="fa fa-cloud"></i> Cloud
<i class="fa fa-envelope"></i> Envelope
<i class="fa fa-lock"></i> Lock
<i class="fa fa-phone"></i> Phone
<i class="fa fa-star-o"></i> Star (Outline)
<i class="fa fa-star"></i> Star (Fill)

Fixed-With Icon Example

Calendar
Cloud
Envelope
Lock
Phone
Star (Outline)
Star (Fill) 

<i class="fa fa-calendar fa-fw"></i> Calendar
<i class="fa fa-cloud fa-fw"></i> Cloud
<i class="fa fa-envelope fa-fw"></i> Envelope
<i class="fa fa-lock fa-fw"></i> Lock
<i class="fa fa-phone fa-fw"></i> Phone
<i class="fa fa-star-o fa-fw"></i> Star (Outline)
<i class="fa fa-star fa-fw"></i> Star (Fill)

Icons with Hidden Labels

Calendar
Cloud
Envelope
Lock
Phone
Star (Outline)
Star (Fill) 

<i class="fa fa-calendar fa-fw"><span>Calendar</span></i>
<i class="fa fa-cloud fa-fw"><span>Cloud</span></i>
<i class="fa fa-envelope fa-fw"><span>Envelope</span></i>
<i class="fa fa-lock fa-fw"><span>Lock</span></i>
<i class="fa fa-phone fa-fw"><span>Phone</span></i>
<i class="fa fa-star-o fa-fw"><span>Star (Outline)</span></i>
<i class="fa fa-star fa-fw"><span>Star (Fill)</span></i>

Icon Sizes

Icons can be easily scaled without any loss in quality or clarity. In addition to using Material Symbols' built-in size classes, you can adjust the size of any icon with custom CSS.

Calendar
Calendar
Calendar
Calendar
Calendar
Calendar 

<i class="fa fa-calendar"></i> Calendar
<i class="fa fa-calendar fa-lg"></i> Calendar
<i class="fa fa-calendar fa-2x"></i> Calendar
<i class="fa fa-calendar fa-3x"></i> Calendar
<i class="fa fa-calendar fa-4x"></i> Calendar
<i class="fa fa-calendar fa-5x"></i> Calendar

Icon Animations

Note: Icon animations do not work in IE9 or older. 

<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Stacked Icons

You can use a combination (or stack) of icons to create new icon styles.

Flag on a circle
Flag on a square
Flag on a square, inverted
Banned flag 

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> Flag on a circle

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x"></i>
</span> Flag on a square

<span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> Flag on a square, inverted

<span class="fa-stack fa-lg">
    <i class="fa fa-flag fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x"></i>
</span> Banned flag