I Made a Tool to Generate Images Using Office UI Fabric Icons

— Web Design & Development

I’ve been working on a new intranet project that uses modern communication sites in SharePoint Online, and we’re using the new Quick Links web part in two places; one to display links to important intranet pages using the “compact” view, and another to display links to external news articles using the “filmstrip” view. We needed icon-based images for the first use-case, and we wanted some additional icon-based fallback images for the second. Rather than use a graphics program to create all of these images, I created a web-based tool to do it using the Office UI Fabric icons.

You can check out the tool on CodePen.

It works by loading the Office UI Fabric icon font, setting a canvas element’s font-family to that font, and then rendering the unicode character for whichever icon you specify into the canvas element. There are some options for setting the size, positioning of the icon, and colors. When the image looks right, you can simply right-click on the canvas and save the image. This makes creating new ad-hoc icon images very fast and easy with no additional software required.

Comments

  1. Does this include the Office 365 app icons? Would you be willing to include the font file for the Office 365 icons? Like Word, PowerBI, Flow, etc? I can get you the ref to the font Microsoft uses on their site. Maybe add a dropdown to this to select which images to pull?
    1. It includes all of the icons from the Office Fabric UI icon font: https://developer.microsoft.com/en-us/fabric#/styles/icons. I believe that includes icons for most of the o365 apps.

Comments are closed