Blurry icons

[ghost]

Hello

I am using the plus icon for a component but looks blurry on my screen sometimes. If, for example, I change the padding of the main container, looks good, but then blurry again, depending on the quantity of pixels for the padding.

Size is set to 15px x 15px

Blurry (container with padding 14px)

Non-blurry (container with padding 9x)

Is there any way to avoid this inconsistency?

Thank you in advance.

[vladmoroz]

Hey, make sure there's no sub-pixel positioning going on. Transforms, flex, or grid layouts may introduce that in certain cases.

It looks like you might be trying to center the icon which has a 1px stroke within container with even width, which is going to naturally blur it as it would be subpixel-positioned.

I'll close the issue as this is not something that Radix Icons controls.