Metro Icon Font

Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes over 400 icons.

How to use

Include in page head:

                <link href="metro-icons.css" rel="stylesheet">
In html use:

                <span class="mif-icon_name"></span>

To change size icon you can use next classes: mif-lg, mif-2x, mif-3x, mif-4x.

Icons can be resized to any sizes over built-in classes 

                <span class="mif-earth mif-2x"></span>

To change icon color you can use fg-* classes or use css property color. 


                <span class="mif-earth fg-green"></span>
                <span class="mif-earth" style="color: red;"></span>

Icons goto

Below is an exhaustive list of icons that are included in Metro Icon Font.

New icons

Application icons

Mobile icons

Device icons

Player icons

Brand icons


  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Metro Icon Font, nor vice versa.

Weather icons

Chart icons

Spinner icons

Animated Spinner icons (with subclass mif-ani-spin)
Animated Spinner icons (with subclass mif-ani-pulse)

Animated icons

Special thanks to Meneses Evandro for adding this animations.
Normal speed
Fast speed (with subclass mif-ani-fast)
Slow speed (with subclass mif-ani-slow)

To use animation only on-hover use classes with mif-ani-hover-*.