Skip to main content

FluentUIFilledIcons

The filled variant of Microsoft's Fluent UI System Icons, packaged as a Wisej.NET icon pack: 1,060 monochrome SVG icons on a 24 × 24 grid, drawn as solid shapes for emphasis and for the smaller sizes where an outline would blur. They're the icons the FluentUI themes are designed around, and the same set exists as outlines in FluentUIOutlinedIcons, with the same file names, so a Filled and an Outlined icon pair up (home.svg in both). The pack is new in Wisej.NET 4.1.

Installation​

Add the Wisej-4-FluentUIFilledIcons package to your Wisej.NET project, either with the NuGet Package Manager or from the command line:

dotnet add package Wisej-4-FluentUIFilledIcons

The package targets .NET Framework 4.8 and .NET 8 or later. It contains one assembly, Wisej.Ext.FluentUIFilledIcons.dll, and depends on the Wisej-4-Svg package, which NuGet installs with it (see The SVG renderer below). After a rebuild, the pack appears as a folder in the Visual Studio ImageSource editor. See Picking icons in Visual Studio.

Browse the icons​

Every icon in the pack, drawn from the SVG files the assembly embeds. Type to filter by file name or constant name, and select an icon for its constant, its resource.wx URL and a ready-to-paste assignment, each with a copy button. The icons are shown in the page's text color, the way they follow the theme's icon color in an application; the color swatch in the preview tries a ?color= value.

Loading the icons…

Using the icons​

Every icon is an embedded SVG served at resource.wx/Wisej.Ext.FluentUIFilledIcons/<file-name>. In code, use the constants of the static Wisej.Ext.FluentUIFilledIcons.Icons class, which already hold the full URL:

// The constant holds "resource.wx/Wisej.Ext.FluentUIFilledIcons/print.svg".
this.button1.ImageSource = Wisej.Ext.FluentUIFilledIcons.Icons.Print;

// The same icon by URL, for example when the name comes from data.
this.button1.ImageSource = "resource.wx/Wisej.Ext.FluentUIFilledIcons/print.svg";

// A specific color instead of the theme's icon color.
this.button1.ImageSource = Wisej.Ext.FluentUIFilledIcons.Icons.Print + "?color=SteelBlue";

The URL works in any property that takes an image source (ImageSource, Icon, BackgroundImageSource, …), and also in HTML and CSS.

Icon names​

Each constant of the Icons class is the file name in PascalCase:

FileConstant
home.svgIcons.Home
print.svgIcons.Print
settings.svgIcons.Settings
access-time.svgIcons.AccessTime

The file names carry no -filled suffix: the variant is the pack, and the outlined pack spells the same icon the same way.

The SVG renderer​

The pack brings its own way of rendering its icons. Its Wisej-4-Svg dependency (Wisej.Ext.Svg.dll) adds a client-side renderer, built on Snap.svg, that loads each SVG icon in the browser, applies the ?color= value or the control's text color, and caches the result.

warning

The renderer takes over the rendering of every SVG image in the application, not only this pack's icons. The other packs and your own SVG resources keep working, but they're drawn by the new renderer once this package is referenced.

Colors​

The icons are monochrome (drawn in #212121), so they follow the theme's icon color and respond to ?color=. Use a named color, #rrggbb, rgb()/rgba(), or the name of a theme color (for example ?color=activeText). See SVG Colors.

License​

Fluent UI System Icons are released by Microsoft under the MIT license. The Wisej.NET wrapper assembly is part of the Wisej.NET extensions.

See also​