SVG in React Server Components
Server Components change nothing about SVG's fundamentals, but understanding the client boundary rules avoids common mistakes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
What Renders Fine in Server Components
Static SVG markup — logos, decorative icons, illustrations with no interactivity — renders perfectly in Server Components, streaming as part of the initial HTML with zero JavaScript shipped for that icon. This is the ideal default for the majority of icons in any application.
- Static icons render as pure HTML from Server Components
- Zero JavaScript ships for non-interactive SVG content
- This should be the default for most icons in an RSC application
Crossing the Client Boundary
An icon needing onClick handlers, hover state, or any browser API must live in (or be passed as a child to) a Client Component marked `"use client"` — a common mistake is marking an entire icon library 'use client' when only a handful of interactive icons actually need it, unnecessarily bloating the client bundle.
- Interactive icons require a Client Component boundary
- Avoid marking entire icon libraries as client — scope it narrowly
- Pass static icons as children into Client Components when needed
Frequently Asked Questions
Can a Server Component pass an SVG icon as a prop to a Client Component?
Yes — passing rendered JSX (including static SVG) as children or props from a Server Component into a Client Component works fine and keeps the icon's rendering cost on the server.
What's the most common RSC mistake with icon libraries?
Adding "use client" to an entire shared icon component file because one icon in it needs an onClick handler — this forces every icon in that file into the client bundle unnecessarily.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG