Segoe Fluent Icons Search for Figma

For the last several months, I’ve been working with a few friends on a Windows app. As I mentioned in a previous post, I daily drive Windows, and there’s a noticeable tooling gap for designers and engineers. So, I started building a tool—honestly, mostly for myself.

But that’s not what this post is about.

While working with Microsoft’s UI Kits in Figma, I found using the Segoe Fluent Icons font frustrating. Browsing glyphs, hunting down Unicode values, and copying them manually was tedious. There are a few tools that attempt to solve this, but most focus on Segoe MDL2, which doesn’t have a 1:1 Unicode mapping with Segoe Fluent Icons.

So, I built Segoe Fluent Icons Search—a simple Figma plugin that lets you search for Fluent Icons, preview them, and copy the glyphs directly to your clipboard for use in your designs.

Why Using Fluent Icons in Figma is Clunky

Microsoft's Segoe Fluent Icons font contains over 1,470 glyphs, making it a fantastic resource, but working with it in Figma comes with major challenges:

No built-in search–Browsing icons required referencing outdated documentation or using third-party character map utilities (which again, were outdated, most were using Segoe MDL2).
Copying icons was tedious–I had to tab out of Figma, manually copy Unicode characters, tab back into Figma, and then paste.

How I Built It

I wanted the plugin to feel lightweight, intuitive, and aligned with Fluent UI principles. Here’s how I approached the build:

Technical Architecture

The plugin is built using a simple but effective architecture:

Frontend: Pure HTML/CSS/JavaScript without any frameworks to keep it lightweight
Zero external dependencies to maintain simplicity and fast loading times

Performance Optimization

To ensure snappy performance with 1,470+ icons:

Icons are loaded into memory once at initialization.
Efficient search algorithm filters results in real-time.
CSS Grid with virtualization ensures smooth scrolling.
Document fragments minimize DOM updates for optimal rendering.

UI Design in HTML & CSS

Since Figma plugins run in an iframe, I kept the UI simple:

A search bar at the top.
A grid layout displaying all available icons.
Clickable items that copy the glyph to the clipboard.
No react, no css frameworks.

JavaScript for Search & Icon Handling

For the interactive parts, I used JavaScript:

I manually mapped all 1,470+ glyphs (using this table that Microsoft provides) to their unicode and description (name). This was pretty tredius, but this is how we gain the ability to search an icons actual name.
The search function filters icons in real-time as the user types.
Clicking an icon copies the corresponding Unicode character to the clipboard.

jsCopyEditconst icons = {
    'Wifi': String.fromCodePoint(0xe701),
    'Bluetooth': String.fromCodePoint(0xe702),
    'Connect': String.fromCodePoint(0xe703),
    'InternetSharing': String.fromCodePoint(0xe704),
    'VPN': String.fromCodePoint(0xe705),
    // All the other icons...
};

function searchIcons(query) {
    const results = Object.keys(icons).filter(name => name.toLowerCase().includes(query.toLowerCase()));
    displayResults(results);
}

Copy-to-Clipboard Functionality

To make copying easy, I added this simple clipboard function:

jsCopyEditfunction copyToClipboard(icon) {
    navigator.clipboard.writeText(icon).then(() => {
        console.log("Icon copied:", icon);
    });
}

Try It Out!

If you frequently use the Segoe Fluent Icons Font (I don't know why you would, but if you do) try out the plugin today! It’s free, open-source, and makes working with Fluent UI a lot easier (at least I think so).

⬇️ Install from the Figma Community
🔠 Get Segoe Fluent Icons Font from Microsoft
📂 Checkout the GitHub repository
💬 Join the Discussion

Segoe Fluent Icons Search for Figma

Why Using Fluent Icons in Figma is Clunky