radix-ui / icons

A crisp set of 15×15 icons designed by the @workos team.
https://radix-ui.com/icons
MIT License
2.17k stars 109 forks source link

Blurry icons #166

Closed DanielFlores-OG closed 1 year ago

DanielFlores-OG commented 1 year ago

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) image

Non-blurry (container with padding 9x) image

Is there any way to avoid this inconsistency?

Thank you in advance.

vladmoroz commented 1 year ago

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.