Icons

Metro UI contains 800+ built-in icons!

Metro Icons is an open source SVG icon library featuring over 800+ glyphs and distributed as a font file. You can include icons in your project either using a CDN or using your favorite bundler.

Include via CDN

Use Metro CDN to deliver a cached version of Metro UI Icons.

Latest
Development

1
<link rel="stylesheet"
2
      href="https://cdn.metroui.org.ua/current/icons.css"/>

1
<link rel="stylesheet"
2
      href="https://cdn.metroui.org.ua/dev/icons.css"/>

If you want to use a specific version of Metro UI, you can specify the version in the URL instead of current or dev. For example, to use version 5.1.1, you can use the following URLs:

1
<link rel="stylesheet"
2
    href="https://cdn.metroui.org.ua/5.1.1/icons.css"/>

Including from NPM

1
import "@olton/metroui/source/icons"

Using

To use icons, you need to add class mif-[icon_name] to the HTML element:

1
<span class="mif-rocket"></span>

Size

To change the icon size, you can:

Add built-in class mif-2x…mif-10x

1
<span class="mif-rocket mif-4x"></span>

Change CSS property font-size in the HTML element

1
<span class="mif-rocket" style="font-size: 24px;"></span>

Color

To change the icon color, you can:

Use built-in classes fg-[color]

1
<span class="mif-rocket fg-red"></span>

Change CSS property color for the HTML element

1
<span class="mif-rocket" style="color: darkred;"></span>

Custom Icons

Of course, you can link your own icons font and use them. Metro UI does not impose any restrictions!