Coil 3 Image Loading in Kotlin Multiplatform (KMM) – A Complete Guide

Author: Suraj Sharma – kmpwithsuraj.com

Introduction

Loading images efficiently in a Kotlin Multiplatform Mobile (KMM) project can be challenging. You need a solution that works across Android, iOS, Desktop, and Web. Coil 3 v3.3.0 is a lightweight, Kotlin-first image loading library designed for Compose Multiplatform. It works perfectly with Ktor v3.3.0 for network requests. Whether you are building profile screens, product catalogs, or news feeds, Coil 3 makes image loading simple with support for placeholders, error handling, caching, and animations.

Coil 3 v3.3.0 and Ktor v3.3.0 Dependencies

Add these entries in your libs.versions.toml:

# ==============================
# Coil 3 Image Loading Setup
# ==============================
coil3 = "3.3.0"
coil3-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil3" }
coil3-compose       = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3" }

# ==============================
# Ktor HTTP Clients
# ==============================
ktor = "3.3.0"
ktor-client-okhttp  = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }   # Android
ktor-client-darwin  = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }   # iOS
ktor-client-cio     = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }      # Desktop (JVM)
ktor-client-js      = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }      # Web
        

Build Script Setup

Add Coil 3 v3.3.0 and Ktor v3.3.0 dependencies in your build.gradle.kts:

androidMain.dependencies {
    implementation(compose.preview)
    implementation(libs.androidx.activity.compose)
    implementation(libs.ktor.client.okhttp)
}

commonMain.dependencies {
    implementation(compose.runtime)
    implementation(compose.foundation)
    implementation(compose.material3)
    implementation(compose.ui)
    implementation(compose.components.resources)
    implementation(compose.components.uiToolingPreview)
    implementation(libs.androidx.lifecycle.viewmodelCompose)
    implementation(libs.androidx.lifecycle.runtimeCompose)
    implementation(libs.coil3.network.ktor)
    implementation(libs.coil3.compose)
}

jvmMain.dependencies {
    implementation(compose.desktop.currentOs)
    implementation(libs.kotlinx.coroutinesSwing)
    implementation(libs.ktor.client.cio)
}

iosMain.dependencies {
    implementation(libs.ktor.client.darwin)
}

wasmJsMain.dependencies {
    implementation(libs.ktor.client.js)
}
        

Tip: Coil 3 works best if your project already uses Ktor for API calls. This ensures smooth network image fetching across platforms.

Using AsyncImage in Compose Multiplatform

Example: Loading a news banner image with Coil 3 v3.3.0:

AsyncImage(
    model = url, 
    contentDescription = "News Banner",
    placeholder = painterResource(Res.drawable.placeholder),
    error = painterResource(Res.drawable.image_error),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .fillMaxWidth()
        .height(180.dp)
        .clip(RoundedCornerShape(16.dp))
)
        

Explanation:

• model – Image URL, with automatic caching.
• placeholder – Temporary image while loading.
• error – Displayed if loading fails.
• contentScale – Adjusts how the image fits the space.
• clip – Rounded corners for better UI.

Why Coil 3 is Ideal for KMM Developers

• Cross-platform ready: Works on Android, iOS, Desktop, and Web.
• Network integration: Perfect with Ktor v3.3.0.
• Lightweight & Kotlin-first: Minimal boilerplate.
• AsyncImage support: Placeholders and error handling improve UX.
• Customizable: Rounded corners, circle crop, borders, crossfade animations.

Example Project

Check a working Coil 3 v3.3.0 + KMM example project here: GitHub Repo

Conclusion

Using Coil 3 v3.3.0 in KMM projects is a clean and efficient solution for image loading on multiple platforms. It simplifies network image fetching, caching, and UI rendering in Compose, saving time for KMM and Compose Multiplatform developers.

For more tutorials, tips, and Kotlin Multiplatform insights, visit KMP with Suraj.