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
- 1Paste SVG markup or upload an .svg file.
- 2Name the icon property.
- 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.