Solved Win 11 UI Icon Font

Does anybody know what is UI Ico-Font name (scalable font name which is contain glyphs for UI, like "Segoe MDL2 Assets"). I am searching for "Explorer" toolbar duotone icons (blue-grey icons).

It looks like most can be located in the Segoe MDL2 Assets font. Here are the Private Use Area (PUA) Uni Codes:
file explorer EC50 - EC51
MoveTo Folder E8DE
Cut E8C6
Copy E8C8
Rename E8AC
Share E72D
Delete E74D
Sort E8CA

I was unable to find the descriptive name for "view" or "extract all" glyphs from the provided symbol lists. Presumably they are under a different name, in an older font, or maybe they are made from layered glyphs.

You can view the symbols in Window's Character Map, or at Segoe MDL2 Assets icons. I also found an utility app called Glyph Browser on the Microsoft Store ( Get Glyph Browser - Microsoft Store en-GB ). The App claims it can view any Unicode glyph stored in any font.

@iko22 Many thanks. Big help.

As I realized "Segoe MDL2 Assets" font (sharp corner, rectangular) is for Win 10 and "Segoe Fluent Icons" font (rounded corner) is for Win 11 (I didn't notice MS has added "Segoe Fluent Icons" font to Windows).

The app you mentioned does not show any glyph (SS below)! FontExpert shows some of them, Windows "CharMap" is better (minimal) but is awful for browsing the font, and Ps (=Photoshop) is the best one (shows complete glyph in "Glyph" panel, you can change glyph preview size too).






I don’t need them for UI design, but just out of curiosity, how they implement two colours to the glyph? (I did that in “Illustrator”, is it separate from the original font or they do that with coding? I need its colour code, blue-grey colour of “Explorer” toolbar icons)



“Segoe Fluent Icon” is mono-colour outline and filled glyphs. There is OpenType-SVG font like “Trajan Color” and “EmojiOne” contain colorized and monochrome glyphs and have ability to combine colours with monochrome glyphs to reproduce new one (OpenType-SVG color fonts (adobe.com).

Yes it is done programmatically. For example:

Layering and mirroring
All glyphs in Segoe Fluent Icons have the same fixed width with a consistent height and left origin point, so layering and colorization effects can be achieved by drawing glyphs directly on top of each other. This example show a black outline drawn on top of the zero-width red heart.
XAML

HTML:

<Grid>
    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEB51;" Foreground="#C72335" />
    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEB52;" />
</Grid>

Many of the icons also have mirrored forms available for use in languages that use right-to-left text directionality such as Arabic, Farsi, and Hebrew.

Source: Segoe Fluent Icons font - Windows apps

Click to expand...

The colour is a a six-digit hex number which indicates the hex/HTML colorspace is used.

You can take a screenshot of the colours you want to use, upload it to Photoshop, then use a combination of the eyedropper tool and the colorpicker tool. For example, this shows the colorpicker tool:


Image Source: https://helpx.adobe.com/photoshop/u...or,the eyedroppers in some color ... See More
Field "I" in the above image shows the hex values of a selected colour.

I do not have Photoshop, so I uploaded a screenshot image to Image Color Picker - Pick colors from a photo online , and read off the HTML/Hex codes for each colour.
Here are the results from the online color-picker:

File Explorer Grey (#F4F2F3).


File Explorer Light Blue (#A9FAFF).


File Explorer Dark Blue Grey (#336B85).

I suggest you take your own screenshot, then upload to Adobe and try the color-picker yourself, to verify the color codes.

I always import "SS" in Ps and use "Color Picker" tool with "Point Sample" option selected from its toolbar (to select exact one pixel colour code).

As you can see in SS below, I have to zoom to pick the desired colour from SS. But whenever you zoom on an image to get the right colour it has many other colours with different colour codes (as you know they are "Anti-Aliasing" artifacts to reproduce transparency with "Alpha" channel) and many of times I don't know what is exact one (the colour code). In SS below you can see different blue colour values (HEX or RGB) in "Share" icon (the actual size pixel is 18 which we see as a large one pixel). In Ps you can extract colours with techniques like "Average Blur" or by indexing colours and create a colour swatches from image, but the first one does not generate exact colour code, the second one generate all colours exist in image and you don't know what is exact colour code you need! For example, the glyph below only have 2 colours, a grey HEX code and blue HEX code (in coding it's just a single HEX or RGB colour code), but in the SS (or in image) you see many other grey and blue colour tone (because of Anti-Aliasing).

In browsers we can use "Inspector" to find the exact colour code used on a web page, because the colour is addressed with a HEX code, and you just copy the HEX and use it. But if I want to pick a colour from a tiny element (from an image), the problem raises!

atinfo said:

In Ps you can extract colours with techniques like "Average Blur" or by indexing colours and create a colour swatches from image, but the first one does not generate exact colour code, the second one generate all colours exist in image and you don't know what is exact colour code you need!

Click to expand...

If you are expecting two colours, I would pick the lightest and the darkest. All other colours in between probably down to the anti-aliasing you mention.
Also, you could experimenting with the Windows ClearType text setting, as that appears to be where Windows does some anti-aliasing.

atinfo said:

But whenever you zoom on an image to get the right colour it has many other colours with different colour codes (as you know they are "Anti-Aliasing" artifacts to reproduce transparency with "Alpha" channel) and many of times I don't know what is exact one (the colour code).

Click to expand...

As it happens, I just discovered this page on Microsoft Documents site:

The page documents colour swatches and their colour codes. I cannot tell if this information is up to date for Win 11, mind.

@iko22 Thanks.

I didn't find the colour code (Explorer icon colours) in that colour table (MS Doc) and I checked many of its links but nothing about the toolbar icon colour code!
I think somehow I get the right colour code in Ps (with "Color Picker" tool).

@iko22
Finally, I have found the icons (Explorer UI icons). They are SVG icons and are not glyphs. They are in CBS (Component Based Servicing) folder, which contains Explorer assets.

SVGs Path: C:\Windows\SystemApps\MicrosoftWindows.Client.CBS_cw5n1h2txyewy\FileExplorerExtensions\Assets\images