Icon font for Visual Studio Team Services and visualstudio.com Visual Studio Team Services (formerly Visual Studio Online) is cloud services for teams to share code, track work, and ship software. The rich featured web UI many components that include icons. VSTS used to use png format icons. As the product grows rapidly, the amount of image format icons became a burden to performance as well as asset management. Rasterized image format also could not meet the HDPI display requirements. The visual of the png icons was also outdated and sometimes unnecessarily complicated.

I worked with two PMs investigating a better icon solution and we decided to use icon font. It is compatible with popular browser platforms, scalable for any DPI, and it requires little code change on the dev side. We studied some existing icon font services like Font Awesome and IcoMoon. I created the icon vector source files (svg) and helped write scripts to automate build and deployment workflow.

A few Web UI based apps like Azure Service Fabric Explorer, Azure Storage Explorer, visualstuido.com also started to adopt our icon font for mockup, planning or production.

Demo page for designers and devs to learn about and look up existing icons

See the Pen Bowtie icon catalog by Cherry Wang (@chryw) on CodePen.