How to Import SVG Files in TypeScript and TSX

By the end of this page, you will understand why TypeScript rejects SVG imports, why JavaScript often allows them, and how to fix the problem using module declarations. You will also see common SVG import patterns used in React and TypeScript projects.

TypeScript checks types at compile time. When you write:

import logo from './logo.svg';

TypeScript tries to answer a question before your app runs: what type does ./logo.svg export?

For JavaScript files, many bundlers such as Webpack, Vite, or Parcel already know how to handle image and SVG imports during the build. JavaScript does not care about static types, so the import can work at runtime.

TypeScript is stricter. It does not automatically know what a .svg file exports unless you tell it. As far as TypeScript is concerned, .svg is not a built-in module type like .ts or .js.

That is why you often need a module declaration such as:

declare module '*.svg' {
  const src: string;
  export default src;
}

This tells TypeScript:

• any import ending in .svg is a valid module
• the default export is a string

Think of TypeScript as a security guard checking badges at a building entrance.

• A .ts file has a badge TypeScript recognizes.
• A .js file often gets through because runtime tooling handles it later.
• A .svg file shows up with no badge TypeScript understands.

So TypeScript stops it and says: "I don't know what this module is."

A declaration file is like giving all .svg files an approved badge. Once you add that badge, TypeScript allows them in.

The most common fix is to add a declaration file.

1. Importing SVG as a file path string

Create a file such as src/types/images.d.ts or src/custom.d.ts:

declare module '*.svg' {
  const src: string;
  export default src;
}

Then this works:

import logo from './logo.svg';

export default function Header() {
  return <img src={logo} alt="Site logo" />;
}

Why this works

The declaration tells TypeScript that logo is a string, usually a URL produced by your bundler.

2. Importing SVG as a React component

Some toolchains support syntax like this:

Consider this example:

// src/custom.d.ts
declare module '*.svg' {
  const src: string;
  export default src;
}

// src/App.tsx
import logo from './logo.svg';

export default function App() {
  return <img src={logo} alt="Logo" />;
}

Here is what happens step by step:

1. TypeScript reads App.tsx.

2. It sees import logo from './logo.svg'.

3. Without help, it does not know what .svg means as a module.

4. It scans declaration files included in the project.

5. It finds:

SVG imports are common in real applications.

Brand assets

import companyLogo from './assets/company-logo.svg';

<img src={companyLogo} alt="Company logo" />

Used in:

• headers
• authentication pages
• dashboards

Icon systems

import searchIcon from './icons/search.svg';

<button>
  <img src={searchIcon} alt="Search" />
</button>

Used in:

• buttons
• menus
• action bars

Inline SVG as components

import { ReactComponent as WarningIcon } from './warning.svg';

In real projects, developers usually combine SVG declarations with a few practical patterns.

Centralized asset declarations

Instead of defining only .svg, teams often declare multiple asset types in one place:

declare module '*.svg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

This avoids repeated import errors for static assets.

Choosing one import style

Teams usually standardize on one of these:

• SVG as URL string for simple images
• SVG as React component for icons and styled graphics

That keeps code consistent.

Guarding against bundler mismatch

A declaration only satisfies TypeScript. Your build tool must also support the import style.

1. Adding the declaration file outside TypeScript's included paths

Broken setup:

{
  "include": ["src"]
}

If your declaration file is outside src, TypeScript may never see it.

How to avoid it:

• place the .d.ts file inside an included folder
• or update tsconfig.json

2. Writing the wrong module shape

Broken declaration:

declare module '*.svg' {
  export default React.Component;
}

This is not a valid way to describe the module.

Use a proper declaration instead:

declare module '*.svg' {
  const src: string;
  export  src;
}

Import SVG as a string

declare module '*.svg' {
  const src: string;
  export default src;
}

import logo from './logo.svg';
<img src={logo} alt="Logo" />

Import SVG as a React component

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >;

  const src: string;
  export default src;
}

Why does SVG import work in JavaScript but not TypeScript?

JavaScript does not do static type checking. TypeScript does, so it needs a declaration telling it what a .svg module exports.

Where should I put the *.d.ts file?

Place it inside a folder included by tsconfig.json, commonly inside src.

Should an imported SVG be typed as string or as a React component?

It depends on your setup. Use string when the SVG is imported as a file path. Use a React component type when your toolchain supports component-style SVG imports.

Is a module declaration enough to make SVG imports work?

Not always. It fixes TypeScript type errors, but your bundler must also know how to load SVG files.

Do I need to change tsconfig.json?

Only if TypeScript is not picking up your declaration file. Usually making sure the file is inside an included path is enough.

Can I declare multiple asset types the same way?

Yes. Many projects add declarations for .png, .jpg, .svg, and similar asset files.

Why is the error still visible after adding the declaration?

Your editor may need a TypeScript server restart, or the declaration file may be outside the included project paths.

• TypeScript declaration files (.d.ts) — These define types for modules and libraries that TypeScript does not understand automatically.
• Static asset imports — SVG, PNG, and other file imports follow the same general pattern in frontend projects.
• React JSX and TSX — SVG imports are commonly used inside React components written in TSX.
• Module resolution — TypeScript uses module resolution rules to locate files and declarations.
• Bundlers like Webpack or Vite — They process imported asset files at build time.
• Default exports and named exports — SVG imports may use either style depending on the toolchain.
• TypeScript tsconfig.json — Project configuration affects whether declaration files are discovered.