Same icons on hundreds of places on the same page?

[olaj]

I use React (next.js) and FontAwesome. I use the SVG + JS method and load icons via the react component.

Say i have the same icon on 100 places on the same page. When I just view source i see the same SVG code again and again and again.

Is this an issue? Or are various compression (like gzip) and so on taking care of this on the wire? It seems the bytes sent over the wire is significantly higher because of the same icons on multiple places.

Should i use a SVG sprite or something for the most used icons instead? Or am i over thinking this?