Iconify Compose

Icons from the Iconify catalog for Compose Multiplatform. Targets: Android, iOS, desktop JVM, JS and Wasm.

Not affiliated with the Iconify project.

// settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        mavenCentral()
    }
}

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.kraveyard:iconify-compose:1.0.0")
        }
    }
}

IconifyIcon("tabler:home", contentDescription = "Home")
IconifyIcon("tabler:arrow-right", contentDescription = null, flip = IconifyFlip.Horizontal)
IconifyIcon("tabler:arrow-right", contentDescription = null, rotate = 90)
IconifyIcon("flagpack:us", contentDescription = "United States", tint = Color.Unspecified)

Icon(...) is an alias of IconifyIcon(...).

Get a Painter instead:

val painter = rememberIconifyPainter("tabler:home")

Load icons ahead of time:

PreloadIconifyIcons(listOf("mdi:home", "mdi:alert"))

Wrap your app once:

ProvideIconifyConfig(
    baseUrl = "https://api.iconify.design",
    tint = MaterialTheme.colorScheme.onSurface,
    batching = true,
    cache = IconifyCacheConfig(maxSizeBytes = 64L * 1024 * 1024, maxAge = 30.days),
) {
    App()
}

Off by default. When on, it copies the request batching of the Iconify JS SDK:

• Icons requested within about 50 ms are grouped by icon set.
• Each group is one request to /{prefix}.json?icons=a,b,c.
• URLs stay under 500 characters. Longer lists are split.
• Icons are fetched once and kept in memory and on disk.
• An HTTP 429 response is retried once after Retry-After.

Both modes cache icons on disk. Entries expire after maxAge. The least recently used entries are removed when the cache is full. IconifyCacheConfig(enabled = false) turns it off.

The Gradle plugin downloads icons at build time and generates Kotlin code for them. It adds the runtime dependency itself. The project must use Kotlin Multiplatform.

// build.gradle.kts
plugins {
    id("io.github.kraveyard.iconify.compose.offline") version "1.0.0"
}

iconifyOffline {
    icons("mdi:home", "tabler:cat")
    sets("codicon")
    lazy = false
}

import io.github.kraveyard.iconify.compose.offline.IconifyIcon
import io.github.kraveyard.iconify.compose.offline.generated.TablerIcons
import io.github.kraveyard.iconify.compose.offline.generated.tablericons.Cat

IconifyIcon(TablerIcons.Cat, contentDescription = null)

• icons(...) bakes single icons. sets(...) bakes a whole icon set.
• Each set gets AllIcons and AllIconsNamed.
• lazy = true keeps IDE sync offline and fetches before compiling.
• Downloads are cached in $GRADLE_USER_HOME/caches/iconify-offline.

val api = IconifyApiClient()
val results = api.search(query = "home")
val home = api.iconData(prefix = "mdi", icons = listOf("home")).icons["home"]

Covers /search, /collections, /collection, /keywords, /last-modified and /{prefix}.json.

sample/ is an Android app that browses and searches the whole catalog and shows baked icons.

./gradlew :sample:android:installDebug

• The public Iconify API rate limits heavy use with HTTP 429. Turn on batching for screens with many icons.
• An icon that fails to load draws nothing. There is no placeholder or error slot.
• Web targets have no disk cache.
• A custom imageLoader uses its own disk cache, not IconifyCacheConfig.
• Batched icons are tinted by replacing currentColor in the SVG.
• Generated offline code copies the compose-icons pattern and is not thread safe. An icon can be built twice under contention.
• Baked icons are static. SVG animations are frozen at their end state.
• sets(...) on a large icon set makes the build fetch and compile a lot of code.
• Only Android has been run so far. iOS, desktop and web compile but are untested.

Apache 2.0