Windows 10 released the icon font recently. It’s called Segoe UI Symbol and is recommended to the developers of the Windows apps. We can’t recommend it though, because icons have different visual weights, adding visual noise to your apps.

In this article we’ll explain the following:

  1. What visual weight is and why Segoe UI Symbol ignores it
  2. How to evaluate the visual weight of an icon
  3. How to fix visual weight
  4. Introduce a ready-made solution

What Is Visual Weight?

That’s the how big, dense, and heavy an icons is perceived. Although it can’t be evaluated precisely, the human eye evaluates it instantly. Below is our evaluation of the visual weight of some of the icons from Segoe UI Symbol.

Windows 10 Icon Font Is Broken, and We Fixed It! | picture
Visual weight is proportional to the space filled by the icon. Large, densely filled icons are perceived to be heavier.

Squint Test

Squint your eyes, and you’ll see the icons as blurred spots. It’s good to make sure they’re nearly identical. Here’s the squint test of the Microsoft’s icons, where that’s clearly not the case:

out_of_focus

There’s a Fix!

Here are some general tips for resizing icons according to their shapes:

  • Images with a complex shape, like a star, could fill the whole canvas
  • Square shapes are heavy. Therefore, the size of the icon should be limited to around 75% of canvas
  • Circles are a little lighter than squares, therefore they could have a little larger dimension, filling around 78% of the area
  • Just use our Windows 10 icon pack!

We like how Jon Hicks explains it in his Icon Handbook:

Balanced Icons

Therefore, for balancing the visual weights of the icons:

  1. Resize as described above
  2. Squint
  3. Adjust the size. Squint again

Height Done Right

We crafted the Windows 10 icon pack which follows the style of the original SegoeUI Symbol. Needless to say, the visual weight of the icons are far more consistent than Microsoft’s attempt:

icns8
Squint test:
icns8_blured

Best Wishes

Dear Microsoft, please take better care of your square icons. Maybe a style guide could help? Not to brag, but a lot of developers are taking advantage of our icon packs. As for the developers out there, keep using our icons instead of the original ones. Your apps will thank us.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Photo Creator Photo Creator, free collage maker with AI technologies to make custom photos
Vector Creator Vector Creator, free collage maker to make custom illustrations for your designs
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit