Solved Win 11 UI Icon Font


atinfo

Well-known member
Power User
VIP
Local time
3:43 PM
Posts
1,170
OS
Win 11 Enterprise
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).
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
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.
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    CPU
    AMD Ryzen 5 5600
    Motherboard
    MSI B550-A Pro
    Memory
    16 GB
    Graphics Card(s)
    Sapphire Radeon RX 6500XT (8 GB version)
    Monitor(s) Displays
    BenQ Mobuiz EX2710Q QHD, Iiyama ProLite X23377HDS
    Hard Drives
    MSI Spatium M461 4TB
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    Acer A114
    CPU
    Intel Celeron N4020
@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).

glyphBrowser.png
fontExpert.png
charMap.png
psGlyph.png

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)

illy.png

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

openType.png
 
Last edited:

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
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

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:

Adobe colorpicker.JPG
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:
color picker file explorer grey.JPG
File Explorer Grey (#F4F2F3).

color picker file explorer lt blue.JPG
File Explorer Light Blue (#A9FAFF).

color picker file explorer dark blue grey.JPG
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.
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    CPU
    AMD Ryzen 5 5600
    Motherboard
    MSI B550-A Pro
    Memory
    16 GB
    Graphics Card(s)
    Sapphire Radeon RX 6500XT (8 GB version)
    Monitor(s) Displays
    BenQ Mobuiz EX2710Q QHD, Iiyama ProLite X23377HDS
    Hard Drives
    MSI Spatium M461 4TB
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    Acer A114
    CPU
    Intel Celeron N4020
:thumbsup:
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!


colourPick.png
inspector.png
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
Screenshot 2022-01-04 153226.jpg
 

My Computers

System One System Two

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Alienware M18 R1
    CPU
    13th Gen Core i9 13900HX
    Memory
    32GB DDR5 @4800MHz 2x16GB
    Graphics Card(s)
    Geforce RTX 4090HX 16GB
    Sound Card
    Nvidia HD / Realtek ALC3254
    Monitor(s) Displays
    18" QHD+
    Screen Resolution
    25660 X 1600
    Hard Drives
    C: KIOXIA (Toshiba) 2TB KXG80ZNV2T04 NVMe PCIe M.2 SSD
    D: KIOXIA (Toshiba) 2TB KXG80ZNV2T04 NVMe PCIe M.2 SSD
    Case
    Dark Metallic Moon
    Keyboard
    Alienware M Series per-key AlienFX RGB
    Mouse
    Alienware AW610M
    Browser
    Chrome and Firefox
    Antivirus
    Norton
    Other Info
    Killer E3000 Ethernet Controller
    Killer Killer AX1690 Wi-Fi Network Adaptor Wi-Fi 6E
    Bluetooth 5.2
    Alienware Z01G Graphic Amplifier
  • Operating System
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Alienware Area 51m R2
    CPU
    10th Gen i-9 10900 K
    Memory
    32Gb Dual Channel DDR4 @ 8843MHz
    Graphics card(s)
    Nvidia RTX 2080 Super
    Sound Card
    Nvidia
    Screen Resolution
    1920 x 1080
    Hard Drives
    Hard Drive C: Samsung 2TB SSD PM981a NVMe
    Hard Drive D:Samsung 2TB SSD 970 EVO Plus
    Mouse
    Alienware 610M
    Browser
    Chrome
    Antivirus
    Norton
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!
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.
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).
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.
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    CPU
    AMD Ryzen 5 5600
    Motherboard
    MSI B550-A Pro
    Memory
    16 GB
    Graphics Card(s)
    Sapphire Radeon RX 6500XT (8 GB version)
    Monitor(s) Displays
    BenQ Mobuiz EX2710Q QHD, Iiyama ProLite X23377HDS
    Hard Drives
    MSI Spatium M461 4TB
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    Acer A114
    CPU
    Intel Celeron N4020
@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).

2.png
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
@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
 

My Computer

System One

  • OS
    Win 11 Enterprise
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD

Latest Support Threads

Back
Top Bottom