Svg

Teams usually treat icons as harmless. They are tiny, static, and easy to ignore in a CSP rollout. Then the first production deploy lands and half the UI loses its glyphs, the marketing tag manager still works, and somebody “fixes” it by adding img-src * data:. I’ve seen this happen more than once. This case study is about a site I’ll call Bytesize Icons: a developer-facing site with a searchable icon catalog, docs pages, a React app shell, analytics, and consent tooling. The goal was simple: lock down CSP without breaking icon rendering. ...

Phosphor Icons are easy to love: clean set, multiple weights, works fine in React, and the SVG output is usually painless. The annoying part starts when you lock down Content Security Policy and realize your icon strategy has security consequences. I’ve run into this a lot. Teams pick an icon package early, then add CSP later, and suddenly a harmless-looking icon library turns into a debate about style-src, font-src, inline SVG, third-party CDNs, and whether someone really needs a runtime script to paint a caret. ...