Host SVG Icons & Logos

SVGs are the ideal frontend asset — vector-crisp at any DPI, tiny, and they gzip beautifully — but where you host them decides whether they render at all and whether they're safe. GitHub raw serves SVGs as text/plain, so <img src> refuses to draw them and it isn't a CDN anyway; an unconfigured origin may send the wrong content-type or skip caching entirely.

The reliable way to host SVG assets is a CDN that returns the right content-type: files.link stores SVGs on a global CDN with the correct image/svg+xml content-type, so <img>, CSS background-image, and srcset all just work, served from the nearest edge. Public icons and logos get a permanent URL; brand assets you don't want hot-linked can be private behind short-lived signed URLs.

Embedding is the easy part and works three ways with no extra config. As an image: <img src="https://cdn.files.link/.../logo.svg" width="120" alt="Logo">. As a CSS background: .hero { background-image: url('https://cdn.files.link/.../bg.svg'); }. Both run the SVG in image mode, which means any script embedded in the file is inert — important, because an SVG can legally contain <script>.

The risk only appears if you fetch the SVG text and inline it into your DOM as raw <svg> (which people do to style icons with currentColor): that executes whatever is in the file, so only inline SVGs you authored, or sanitize first with DOMPurify — DOMPurify.sanitize(svg, {USE_PROFILES:{svg:true}}) — before injecting. For third-party icons, prefer <img> and skip the risk.

Sprites deserve a specific warning. Upload one file of <symbol id="..."> defs and reference each icon with <svg><use href="https://cdn.files.link/.../sprite.svg#icon-search"></use></svg>, but cross-origin <use> is gated by CORS: the CDN response must allow your site's origin or the browser silently renders nothing. Check the Network tab for the sprite request, confirm the access-control headers, and if cross-origin <use> is blocked, fall back to one <img> per icon, which has no CORS requirement.

Uploading fits any workflow: drag into the dashboard, or for a design-system build step run the three REST calls (POST /v1/files/{folderId} → PUT presigned URL → POST /v1/files/confirm-upload with {ids:[...]}) to publish a whole icon set at once. Optimize before upload — run SVGO to strip editor metadata, which often halves the file and speeds first paint; files.link serves whatever bytes you send, so optimization stays on your side at build time while the CDN caches and delivers the minified result globally.