Why svg looks different when used directly and inside sprite

Question

I want to move icons from svg rendering inside component into the sprite. Most icons look completely same in both versions, but few look different and it is strange.

Left - from new sprite and right from direct svg rendering (direct looks like icon original in Figma). How could it be and what to fix?

Here is the code of direct svg rendering:

export const FooterIcon: React.FC = () => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="path-1-inside-1_3642_58626" fill="white">
      <rect x="2" y="10" width="16" height="8" rx="1" />
    </mask>
    <rect x="2" y="10" width="16" height="8" rx="1" stroke="#969598" strokeWidth="4" mask="url(#path-1-inside-1_3642_58626)"
    />
    <circle cx="3" cy="8" r="1" transform="rotate(-180 3 8)" fill="#D3D3D5" />
    <circle cx="3" cy="5" r="1" transform="rotate(-180 3 5)" fill="#D3D3D5" />
    <circle cx="3" cy="2" r="1" transform="rotate(-180 3 2)" fill="#D3D3D5" />
    <circle cx="6.5" cy="2" r="1" transform="rotate(-180 6.5 2)" fill="#D3D3D5" />
    <circle cx="10" cy="2" r="1" transform="rotate(-180 10 2)" fill="#D3D3D5" />
    <circle cx="13.5" cy="2" r="1" transform="rotate(-180 13.5 2)" fill="#D3D3D5" />
    <circle cx="17" cy="2" r="1" transform="rotate(-180 17 2)" fill="#D3D3D5" />
    <path
      d="M16 5C16 4.44772 16.4477 4 17 4C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6C16.4477 6 16 5.55228 16 5Z"
      fill="#D3D3D5"
    />
    <circle cx="17" cy="8" r="1" transform="rotate(-180 17 8)" fill="#D3D3D5" />
  </svg>
);

Here is sprite, and icons get from here with use

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="footer" viewBox="0 0 20 20" fill="none">
        <mask id="path-1-inside-1_3642_58626" fill="white">
          <rect x="2" y="10" width="16" height="8" rx="1" />
        </mask>
        <rect x="2" y="10" width="16" height="8" rx="1" stroke="#969598" stroke-width="4" mask="url(#path-1-inside-1_3642_58626)"
        />
        <circle cx="3" cy="8" r="1" transform="rotate(-180 3 8)" fill="#D3D3D5" />
        <circle cx="3" cy="5" r="1" transform="rotate(-180 3 5)" fill="#D3D3D5" />
        <circle cx="3" cy="2" r="1" transform="rotate(-180 3 2)" fill="#D3D3D5" />
        <circle cx="6.5" cy="2" r="1" transform="rotate(-180 6.5 2)" fill="#D3D3D5" />
        <circle cx="10" cy="2" r="1" transform="rotate(-180 10 2)" fill="#D3D3D5" />
        <circle cx="13.5" cy="2" r="1" transform="rotate(-180 13.5 2)" fill="#D3D3D5" />
        <circle cx="17" cy="2" r="1" transform="rotate(-180 17 2)" fill="#D3D3D5" />
        <path
          d="M16 5C16 4.44772 16.4477 4 17 4C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6C16.4477 6 16 5.55228 16 5Z"
          fill="#D3D3D5"
        />
        <circle cx="17" cy="8" r="1" transform="rotate(-180 17 8)" fill="#D3D3D5" />
    </symbol>
</svg>

using:

    <svg width={size} height={size}>
      <use xlinkHref={`${icons}#${variant}`} />
    </svg>