2px stroke in Figma thinner than in code

In my team we are using a stroke based icon-set called feather icons.

A 2 px stroke will look much thinner in figma than in code.

I would like to have a both visual and value alignment between figma and code to prevent confusion in handover.

It doesn’t seem like a bug, it’s how feather icons scale the stroke vs how Figma scales (different implementation).

In feather icons the stroke-width is relative to width and height of the object (notice viewBox is still 24x24px!). In Figma to achieve the same result, one would have to use the scale tool and resize the icon to the desired value. In Figma however all three properties will be scaled too: viewBox, width, height and stroke-width.

Screen Recording 2022-05-30 at 09.53.48

Here I am copying the svg code, directly from feather icons app (website) - notice size 92px and stroke-width: 2

Here’s the same icon, pasted in Figma - see border: 7.66667px:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.