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
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.