SVG to Jetpack Compose ImageVector

Paste an SVG and get Kotlin ImageVector code for Jetpack Compose.

Try a sample:
Canvas Preview24 × 24
Compose ImageVector Code
package com.example.ui.icons

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.PathBuilder
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.unit.dp

private var _AndroidIcon: ImageVector? = null

val AndroidIcon: ImageVector
    get() {
        if (_AndroidIcon != null) {
            return _AndroidIcon!!
        }
        _AndroidIcon = ImageVector.Builder(
            name = "AndroidIcon",
            defaultWidth = 24.dp,
            defaultHeight = 24.dp,
            viewportWidth = 24f,
            viewportHeight = 24f
        ).apply {
            path(
                fill = SolidColor(Color.Black)
            ) {
                moveTo(6f, 18f)
                curveToRelative(0f, 0.55f, 0.45f, 1f, 1f, 1f)
                horizontalLineToRelative(1f)
                verticalLineToRelative(3.5f)
                curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
                reflectiveCurveToRelative(1.5f, -0.67f, 1.5f, -1.5f)
                verticalLineTo(19f)
                horizontalLineToRelative(2f)
                verticalLineToRelative(3.5f)
                curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
                reflectiveCurveToRelative(1.5f, -0.67f, 1.5f, -1.5f)
                verticalLineTo(19f)
                horizontalLineToRelative(1f)
                curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
                verticalLineTo(8f)
                horizontalLineTo(6f)
                verticalLineToRelative(10f)
                close()
                moveTo(3.5f, 8f)
                curveTo(2.67f, 8f, 2f, 8.67f, 2f, 9.5f)
                verticalLineToRelative(7f)
                curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
                reflectiveCurveTo(5f, 17.33f, 5f, 16.5f)
                verticalLineToRelative(-7f)
                curveTo(5f, 8.67f, 4.33f, 8f, 3.5f, 8f)
                close()
                moveToRelative(17f, 0f)
                curveToRelative(-0.83f, 0f, -1.5f, 0.67f, -1.5f, 1.5f)
                verticalLineToRelative(7f)
                curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
                reflectiveCurveToRelative(1.5f, -0.67f, 1.5f, -1.5f)
                verticalLineToRelative(-7f)
                curveToRelative(0f, -0.83f, -0.67f, -1.5f, -1.5f, -1.5f)
                close()
                moveToRelative(-4.97f, -4.84f)
                lineToRelative(1.3f, -1.3f)
                curveToRelative(0.2f, -0.2f, 0.2f, -0.51f, 0f, -0.71f)
                lineToRelative(-1.48f, 1.48f)
                curveTo(13.85f, 2.23f, 12.95f, 2f, 12f, 2f)
                curveToRelative(-0.96f, 0f, -1.86f, 0.23f, -2.66f, 0.63f)
                lineTo(7.85f, 0.99f)
                curveToRelative(-0.2f, -0.2f, -0.51f, -0.2f, -0.71f, 0f)
                lineToRelative(1.31f, 1.31f)
                curveTo(6.97f, 3.99f, 6f, 5.86f, 6f, 8f)
                horizontalLineToRelative(12f)
                curveToRelative(0f, -2.14f, -0.97f, -4.01f, -2.47f, -4.84f)
                close()
                moveTo(10f, 5f)
                horizontalLineTo(9f)
                verticalLineTo(4f)
                horizontalLineToRelative(1f)
                verticalLineToRelative(1f)
                close()
                moveToRelative(5f, 0f)
                horizontalLineToRelative(-1f)
                verticalLineTo(4f)
                horizontalLineToRelative(1f)
                verticalLineToRelative(1f)
                close()
            }
        }.build()
        return _AndroidIcon!!
    }

How to use it

  1. 1Paste SVG markup or upload an .svg file.
  2. 2Name the icon property.
  3. 3Copy the Kotlin and use it with Icon(imageVector = …) or Image().

FAQ

Does it work with Compose Multiplatform?

Yes. The output only uses androidx.compose.ui.graphics.vector APIs.

Why not just use a vector drawable XML?

ImageVector code keeps icons in Kotlin, works in Multiplatform and avoids resource lookups.

Are fills and strokes kept?

Fill colour and path data are kept. Complex gradients and filters are not.