Icons

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 500+ icons.

How to use

To activate Metro Icon Font you must use metro-all.css or add to page metro-icons.css.

                    <link href="metro-icons.css" rel="stylesheet">
                

And them add class mif-* to element, example span And to change icon size add class mif-lg, mif-2x, mif-3x, mif-4x and mif-5x

                    <span class="mif-home"></span>
                    <span class="mif-home mif-lg"></span>
                    <span class="mif-home mif-2x"></span>
                    <span class="mif-home mif-3x"></span>
                    <span class="mif-home mif-4x"></span>
                    <span class="mif-home mif-5x"></span>
                

Icon color

To change color add class fg-* to icon element. Details for colors see on colors utilities page.

                    <span class="mif-home"></span>
                    <span class="mif-home mif-lg fg-cyan"></span>
                    <span class="mif-home mif-2x fg-pink"></span>
                    <span class="mif-home mif-3x fg-green"></span>
                    <span class="mif-home mif-4x fg-red"></span>
                    <span class="mif-home mif-5x fg-blue"></span>
                

Icon list 0