As usual, I’ll preface this that any supplied Custom CSS snippets are not officially supported and you may have to tweak things with future app updates.
I think it’s because you’re only targeting the width with the temperature-and-icon line.
Whereas with the line 2-3 with targeting .icon (which won’t actually apply to a weather tile icon) you’re applying both the height and the width.
So instead of
.tile.--theme-style-weather .temperature-and-icon svg { width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }
Add in the height too:
.tile.--theme-style-weather .temperature-and-icon svg { height: 40%; width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }
And if it’s still too small or too big, you could try adjusting those values up or down together.
Alternatively, you might find just adjusting the font-size of the icon easier:
.tile.--theme-style-weather .temperature-and-icon svg { font-size: 5em; }