Building Fluent Icon Finder with the WinUI Copilot Skill

The original idea was pretty simple: I wanted a Windows app where I could sketch a rough shape and have it find the closest match in the Fluent System Icons font. The set has around 1,600 glyphs, and scrolling through them to find the right one is tedious. I figured it would be more fun to just draw it.

I also wanted to try out Microsoft’s WinUI Skill for GitHub Copilot while I was at it.

The plan

Here was the initial prompt I gave the agent:

Let’s build a new WinUI app for finding icons from the fluent icons in the font icons. I want to have a very basic area where a user can draw a shape and the app will try to find similar shapes in the font icons. The UI will be simple with the ink canvas in most of the window, on the left is a listview of all of the glyphs which can be copied out as SVG, PNG, Glyph code, or XAML FontIcon. When the user draws on the canvas there is a debounce timer and after a moment the application will try to find a similar icon based on the drawing.

Simple enough.

Using the WinUI Skill with autopilot

I don’t usually touch autopilot mode. I like to stay in control of what ends up in git, especially on an existing project where you’d spend an hour cleaning up noisy agent commits later. But since this was a brand new repo, none of that was a concern. No history to clobber, no one to confuse.

The skill got to work and the core of the app came together quickly. The matching logic that ended up in the final build uses Win2D to pre-render every icon at 64×64, converts each one to an L2-normalized grayscale pixel vector, and then does a cosine similarity search when you draw something. It also writes a binary cache on first launch so subsequent starts are nearly instant. I hadn’t spec’d any of that out specifically, the agent arrived at it on its own. That part was genuinely impressive.

Where things were a little strange

The first thing I noticed was that no solution file was created. The project built fine on its own, but I had to set up the .slnx manually afterward. CI was next. The workflow the agent generated didn’t work out of the box, so I just removed it.

Packaging was its own adventure. I always want to run my apps as a packaged app so it shows in Start and is ready for distribution via the Store or a signed MSIX. When I selected to package for x64 and Arm64 I got an error stemming from the runtime identifiers not being set, a quick fix. It is also worth noting that the WinUI Skill and the WinApp CLI are no help signing the MSIX package for distribution. Luckily I had already worked out signing my artifacts, but that was a serious pain to get repeatable.

A small style quirk worth mentioning

One thing I didn’t expect: a greenfield app has no existing style to follow, so the skill just made its own choices. Fair enough. But when I opened the generated code in Visual Studio, it was immediately lit up with hints and suggestions to change things. Formatting, naming conventions, the usual.

It’s not a big deal, nothing broken. But it’s a little odd that Microsoft’s own skill would produce code that Microsoft’s own IDE immediately flags. For a brand new project where there’s no legacy style to preserve, you’d think they’d at least agree on what “correct” looks like.

What ended up in the app

Beyond the original sketch idea, a few extra features found their way in during development:

  • Live text search that floats matches to the top while keeping the full list visible below
  • A Similarity Map view that lays out all icons in a spiral grid around a pivot you pick, so you can browse visual neighbors at a glance
  • Four export formats: Unicode escape, XAML FontIcon snippet, a 256×256 PNG with a transparent background, and a proper SVG with Bezier paths pulled directly from the font outline

That last one came out particularly well. The SVG export uses CanvasGeometry to extract the actual cubic Bezier curves from the font, so you get clean vector data rather than a traced bitmap. It also uses fill="currentColor" so the exported SVG responds to theme changes automatically.

Takeaways

For a greenfield WinUI app, the skill is a solid starting point and I highly recommend it! The core feature logic and the MVVM structure came out well. The gaps were mostly in the operational layer: build pipelines, packaging, and signing. Those needed a human pass anyway, so it wasn’t a surprise, just expected work.

The repo is on GitHub if you want to take a look or give it a try.
https://github.com/TheJoeFin/Win-Icon-Finder

Joe

Leave a Reply