[EuiIcon] Adding custom sizes to icons

[cindychangy]

Was recently using EuiButton and when using the iconType prop noticed that some of the default sizes of the icons might not match in size. As you can see below, without declaring any iconSize the questionInCircle icon appears much smaller than the faceHappy and exit icon:

Using the iconSize prop never really got us the intended look as there always ended up being a size mismatch and we also wanted to avoid using custom styling to override the default styles. Wondering about the possibility to add custom sizes to icons with a width and height prop?

[miukimiu]

During our weekly Figma EUI Library Revamp sync, we started questioning the use of the prop iconSize. We're not sure yet if we should deprecate this prop. It is something we still investigating. But we recognize it doesn't work as expected.

The buttons use the EuiIcon and as you mentioned, it doesn't accept custom sizes. Providing a custom size as an option could create a lot of usage inconsistencies in our products. That's why we only provide some specific sizes. This is a design decision.

we also wanted to avoid using custom styling to override the default styles

I think for now, this is the best option.

Icons size mismatch

The icons' size mismatch seems to be the real problem here. As a user, I would expect to list the icons side by side and have them look consistent in size.

So in our next Figma EUI Library Revamp we can discuss if there is something we can do to improve the icons and decrease the size mismatch.

CC / @hbharding @MichaelMarcialis @dborodyansky

[cindychangy]

The buttons use the EuiIcon and as you mentioned, it doesn't accept custom sizes. Providing a custom size as an option could create a lot of usage inconsistencies in our products. That's why we only provide some specific sizes. This is a design decision.

That makes sense as to the implications of what allowing custom sizes would be and thanks for the info and context @miukimiu! For now, we have kept to the size prop, but good to know for future reference what the best thing to do would be, thanks!

cc @alisonelizabeth and @yuliacech

[MichaelMarcialis]

So in our next Figma EUI Library Revamp we can discuss if there is something we can do to improve the icons and decrease the size mismatch.

Yeah, this would be great to discuss in our next meeting. I think we're probably overdue for a general icon audit. We should determine whether it would be worthwhile for us to make adjustments to existing icons so that they appear equally sized/weighted and visually consistent when in close proximity to one another.

[miukimiu]

As mentioned in #6322 (comment), the icons' size mismatch seems to be the real problem here. As a user, we would expect to list the icons side by side and have them look consistent in size.

So I'm moving this issue to our design system team to address first in Figma: https://github.com/elastic/design-system-team/issues/176