Solved Win 11 UI Icon Font

atinfo

Member
Member
VIP
Local time
1:00 AM
Posts
69
OS
Windows 10 Enterprise x64
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
    Windows 10 Enterprise x64
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD

iko22

Well-known member
Member
VIP
Local time
9:30 PM
Posts
554
Location
South West England
OS
Windows 10
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 Computer

System One

  • OS
    Windows 10
    CPU
    TBA
    Motherboard
    TBA

atinfo

Member
Member
VIP
Thread Starter
Local time
1:00 AM
Posts
69
OS
Windows 10 Enterprise x64
@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
    Windows 10 Enterprise x64
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD

iko22

Well-known member
Member
VIP
Local time
9:30 PM
Posts
554
Location
South West England
OS
Windows 10
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 Computer

System One

  • OS
    Windows 10
    CPU
    TBA
    Motherboard
    TBA

atinfo

Member
Member
VIP
Thread Starter
Local time
1:00 AM
Posts
69
OS
Windows 10 Enterprise x64
: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
    Windows 10 Enterprise x64
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD

The-Hive

Well-known member
Power User
VIP
Local time
9:30 PM
Posts
1,654
Location
Wiltshire UK
OS
Windows 11 Pro
Screenshot 2022-01-04 153226.jpg
 

My Computers

System One System Two

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Alienware Area 51m R2
    CPU
    10th Gen Core i9 10900K
    Memory
    32GB
    Graphics Card(s)
    Geforce RTX 2080 Super
    Screen Resolution
    1920x1080
    Hard Drives
    C: Samsung 2TB P981A
    D: Samsung 2TB 970 Evo
    E: Samsung 2TB 970 Evo (External)
    Mouse
    Alienware AW610M
    Browser
    Chrome and Firefox
    Antivirus
    Norton
    Other Info
    Killer E3000 Ethernet Controller
    Killer AX1650i Wi-Fi Network Adaptor
    Alienware Z01G Graphic Amplifier
    Tobii Eye Tracker
  • Operating System
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Dell Inspiron 3501
    CPU
    11th Gen i-7 2.80 gb
    Memory
    16Gb
    Screen Resolution
    1920 x 1080
    Hard Drives
    512Gb SSD
    Browser
    Chrome
    Antivirus
    Norton

iko22

Well-known member
Member
VIP
Local time
9:30 PM
Posts
554
Location
South West England
OS
Windows 10
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 Computer

System One

  • OS
    Windows 10
    CPU
    TBA
    Motherboard
    TBA

atinfo

Member
Member
VIP
Thread Starter
Local time
1:00 AM
Posts
69
OS
Windows 10 Enterprise x64
@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
    Windows 10 Enterprise x64
    Computer type
    Laptop
    CPU
    i7
    Hard Drives
    SSD
Top Bottom