The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engi

The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions. CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, because border painting involves fairly complex logic compared to drawing a path (and for example in Gecko you have to construct display list items for individual borders but not paths). But we're talking about really small differences: I highly doubt they matter in practice.