Introduction

svgin-react fetches an SVG from a URL, or takes raw markup directly, and renders it as a real, styleable React element instead of an <img>. It sanitizes the SVG with DOMPurify by default, so it is safe to use with SVGs from a source you do not fully control, and it works both as a client component and in React Server Components.

Client component

Renders on the browser. Manages its own loading/error state.

import { SvgIn } from 'svgin-react/client';

<SvgIn src="/icons/alert.svg" width={24} height={24} className="text-red-500" />;

import { SvgIn } from 'svgin-react/client';

<SvgIn src="/icons/alert.svg" width={24} height={24} className="text-red-500" />;

Server component

Fetches and sanitizes entirely on the server. No client JS ships for it.

import { SvgIn } from 'svgin-react/server';

export default async function Icon() {
  return <SvgIn src="https://example.com/icon.svg" width={24} height={24} />;
}

import { SvgIn } from 'svgin-react/server';

export default async function Icon() {
  return <SvgIn src="https://example.com/icon.svg" width={24} height={24} />;
}

Continue to Installation or jump straight to the API reference.