BEM, JS, Flex

Hello everyone! I wanted to make social icons svg with changing fill by hover or focus, but I could not import with right svg code. When I checked the task, I found an error with social icons in safari ... icons are displayed normally in other browsers. I didn't find anything intelligible in Google, can someone tell me what the problem is or how to correctly change the fill in the exported icons from this layout in Figma? I think they are incorrect. and if inserted with a background, then in safari they are not scaled correctly. Of course I can find svg icons from layout with correct code elsewhere and use them, but there are layouts with unique icons, there is a problem to solve). And also, looked at other solutions - why does everyone wrap social icons in the "i" tag? it's not at all simantic...