fluentui-system-icons icon indicating copy to clipboard operation
fluentui-system-icons copied to clipboard

fix : Unify icons sizes

Open Dommicro opened this issue 8 months ago • 9 comments

Some icons show differences regarding the sizing. For example on images below (taken from fluentUI doc icon explorer) if I compare checkmark and presence icons for the same size (here 24px), they differ :

Image

Image

Image

Image

Expected All icons should have same path size

Dommicro avatar Apr 25 '25 07:04 Dommicro

@vnbaaij do you know by chance who to mention in this thread. I raise my problem more than two month ago and still waiting for an answer, besides the actual fix.

Dommicro avatar Jun 16 '25 14:06 Dommicro

You should be able to find the names by looking at the last commits here

vnbaaij avatar Jun 16 '25 15:06 vnbaaij

Good morning @jasoncuster @spencer-nelson @wood1986. Could someone please look into this.

Dommicro avatar Jun 17 '25 06:06 Dommicro

@jasoncuster @spencer-nelson @wood1986 Can you someone please have a look into this and possibly give it to the correct assignee. Thank would be terrific.

Dommicro avatar Jul 01 '25 11:07 Dommicro

I noticed this too for some icons, uping this topic

@fluentCI @jasoncuster @spencer-nelson @tomi-msft @FluentService thank you guys

mals013 avatar Jul 04 '25 12:07 mals013

which app is this?

programming-with-ia avatar Jul 04 '25 19:07 programming-with-ia

@programming-with-ia It's in the icons catalog of Fluent UI. Search for "checkmarkcircle" https://react.fluentui.dev/?path=/docs/icons-catalog--docs

Dommicro avatar Jul 07 '25 06:07 Dommicro

It seems this works as expected / by design ( maybe @spencer-nelson can provide more context I guess ).

For react-icons specifically:

  • we use svg provided by design
  • then we render the icons in appropriate box based on the size selected

This is source of truth https://github.com/microsoft/fluentui-system-icons/tree/main/assets:

Image

Hotell avatar Sep 29 '25 14:09 Hotell

It seems this works as expected / by design ( maybe @spencer-nelson can provide more context I guess ).

For react-icons specifically:

  • we use svg provided by design
  • then we render the icons in appropriate box based on the size selected

This is source of truth https://github.com/microsoft/fluentui-system-icons/tree/main/assets:

Image

Yes but here you compared the same icon for different size, issue is for different icons for example presence and checkmark for the same indicated size (20) have different actual path size. If I use both for the same chosen size, visually there is a clear mismatch.

https://www.fluentui-blazor.net/Icon#explorer

Here if you check the path size of the 2 svg you will see one has 20 (good) and the other checkmark circle has 16 (bad)

mals013 avatar Nov 19 '25 09:11 mals013