Micon – A Windows 10 Icon Font for Web Designers

By Jake Rocheleau. in Toolkit. Updated on March 5, 2020.

The redesign for Windows 10 came with many new features and a whole new look. One of the biggest changes came to the icon style, especially compared to Windows 7 and XP.

Thanks to the Micon set, you can now bring Win10-style icons right into your website.

This icon pack comes as an icon font and it’s released for free via GitHub. The main repo has the setup information, but the Micon homepage features all the icons on display with their appropriate class names.

The actual website structure follows a similar format to Font Awesome. You can browse through all the icons and click any of them to get more details on a new page.

For example, take this battery charging icon which uses a battery design and a small charging plug. You’ll get a preview of the icon at various sizes, along with its CSS icon class, in this case mi-BatteryCharging10.

This icon set also works much like Font Awesome, where you can embed the icons right into your HTML. The code snippet for this battery icon works just the same:

<i class="mi mi-BatteryCharging10"></i>

It’s super easy to get started, with just a copy of the Micon CSS stylesheet and some basic knowledge of front-end development.

Check out the setup page to learn more. Really, you just need to download a copy of the Micon pack from GitHub and include that stylesheet (along with proper icon fonts) into your page. From there, just reference the class names like above and you’re good to go.

Since this project is open-source, you’re free to use these icons with any project, personal or commercial. And, you can even make your own file by following the build instructions from the Micon GitHub. This way you can pack just the icons you want into the font files and reduce the total file size.

Overall, I’m really impressed with the variety of icons and the easy setup. You can find plenty of examples on the website and even animated icons on the Examples page which does include code snippets.

These icons even work well with Bootstrap, so you can combine it with the BS3/BS4 framework for some real custom layouts.

Download a free copyright from the Micon homepage and see how you can work these Windows 10-style icons into your next design.