a frequent design trick is to use a neutral, semi-transparent text color, so it blends nicely across different toned backgrounds but when the text is paired with an icon and the same color is applied to the svg, some icons have "stronger spots" where their paths intersect and some llms (not all:)) will insist on fixing this by switching to a solid color tinted for that specific bg but then you need a different color for every background, which defeats the original goal a super easy solution is to keep using the neutral, solid color, and apply opacity separately to the whole svg instead it turns out with the 1st version, every separate stroke/path is semi-transparent, so overlapping parts are painted multiple times and their opacity stacks with the 2nd version, all paths are rendered together first using the solid color, then the opacity is applied to the completed icon as a whole!