# SVG to Compose Converter

> Free tool that converts SVG files into Compose ImageVector Kotlin code for Jetpack Compose and Compose Multiplatform.

Open https://composables.com/svg-to-compose in a browser, select or drop an SVG file, and the page downloads a `.kt` file declaring an `ImageVector` property named after the file in PascalCase. Conversion runs entirely in the browser; files are not uploaded.

## How to convert SVG to Compose

1. **Select your SVG**: Click **Select SVG** or drag and drop a file anywhere on this page to start converting.
2. **Convert to ImageVector**: Your SVG is converted into Kotlin ImageVector code that works for Jetpack Compose and Compose Multiplatform.
3. **Download .kt file**: We automatically download the generated Kotlin file so you can add it directly to your project.

## Convert without a browser

The page runs the converter module at `https://composables.com/svg-to-compose-assets/assets/svg-to-compose-converter.js`. It is a standalone ES module exporting `svgToComposeImageVector(svg, variableName, imageVectorName, packageName)`, which returns the Kotlin source as a string. The `<svg>` element needs `width` and `height` attributes without a `px` unit. The generated file declares `package com.composables`; change it to your package.

```sh
curl -sO https://composables.com/svg-to-compose-assets/assets/svg-to-compose-converter.js
cat > convert.mjs <<'JS'
import { readFileSync, writeFileSync } from 'node:fs';
import { svgToComposeImageVector } from './svg-to-compose-converter.js';
const [input, name] = process.argv.slice(2);
writeFileSync(`${name}.kt`, svgToComposeImageVector(readFileSync(input, 'utf8'), name, name, 'com.composables'));
JS
bun convert.mjs my-icon.svg MyIcon
```

For ready-made icons, every icon in the [icon libraries](https://composables.com/icons.md) already has its Compose ImageVector code.

## Frequently Asked Questions

### How to use vectors in Jetpack Compose and Compose Multiplatform?

Once you have converted your SVG files to Compose Image Vectors, you can use them with the [`Image`](https://composables.com/jetpack-compose/androidx.compose.foundation/foundation/composable-functions/Image/api.md) composable. Better yet, use the [`Icon`](https://composables.com/jetpack-compose/androidx.compose.material3/material3/components/Icon/api.md) composable from [Compose Unstyled](https://composeunstyled.com/) which provides utilities such as tinting your icons.

### What is the difference between the Image and the Icon composable?

The [`Image`](https://composables.com/jetpack-compose/androidx.compose.foundation/foundation/composable-functions/Image/api.md) composable is used to display images in your apps and comes with customization to content scale. [`Icon`](https://composables.com/jetpack-compose/androidx.compose.material3/material3/components/Icon/api.md) is focused on rendering icons and comes with customization around tinting.

### How to use SVG in Jetpack Compose and Compose Multiplatform?

Use the SVG to Compose tool in this page to convert your SVG to an ImageVector. You can then use your vector in the Image or Icon composable.

### Can I use ready-to-use icons instead of converting SVG files?

Yes. Browse our [icon libraries](https://composables.com/icons.md) to download ready-to-use icons as SVG, Android XML, or Compose Kotlin.

### An SVG does not get converted. What should I do?

[Send me a message on X](https://x.com/alexstyl) so that I can have a look.