Semantic icon token system mapping stable tokens to interchangeable icon packs, supporting vector and glyph renditions, fallback chains, three-tier tokens, and variable-font Material Symbols for variants.
Semantic icon tokens for Compose Multiplatform. One API, any icon pack. Built with & for Jetpack Compose.
Part of the RikkaUI (dev.rikkaui) ecosystem — a shadcn/ui-inspired design system for Compose Multiplatform.
IconToken("heart") is your stable API. The active IconPack decides whether it renders as a font glyph, SVG vector, outline, filled, or rounded — your UI code never changes.
// build.gradle.kts
dependencies {
implementation("dev.rikkaui.icons:core:0.1.0")
implementation("dev.rikkaui.icons:tokens-core:0.1.0")
implementation("dev.rikkaui.icons:pack-lucide:0.1.0")
}
// Provide a pack at the root
ProvideIconPack(LucidePack) {
App()
}
// Use icons anywhere
@Composable
fun LikeButton() {
AppIcon(
token = RikkaIcons.Heart,
contentDescription = "Like",
)
}
// build.gradle.kts
dependencies {
// Core (required)
implementation("dev.rikkaui.icons:core:0.1.0")
implementation("dev.rikkaui.icons:tokens-core:0.1.0")
// Extended tokens (optional — 238 extra tokens with broad pack coverage)
implementation()
implementation()
implementation()
implementation()
implementation()
implementation()
implementation()
implementation()
implementation()
}
Works on Android, iOS, Desktop (JVM), JS, and WasmJs.
// Vector packs — just use the object directly
ProvideIconPack(LucidePack) { App() }
// Packs with style variants
ProvideIconPack(TablerPack.Outline) { ... }
ProvideIconPack(PhosphorPack.Regular) { ... }
ProvideIconPack(BootstrapPack.Filled) { ... }
// Material Symbols — composable factory (loads variable font)
ProvideIconPack(rememberMaterialSymbolsPack()) { ... }
ProvideIconPack(rememberMaterialSymbolsPack(MaterialSymbolsVariant.Rounded)) { ... }
// Reads the pack from LocalIconPack automatically
AppIcon(
token = RikkaIcons.Heart,
contentDescription = "Like",
)
// Override per-icon if needed
AppIcon(
token = RikkaIcons.Search,
contentDescription = "Search",
pack = LucidePack,
)
// Decorative (no accessibility semantics)
DecorativeAppIcon(token = RikkaIcons.Star)
If one pack is missing an icon, fall through to another:
val icons = TablerPack.Outline.withFallback(LucidePack)
ProvideIconPack(icons) {
// tries Tabler first, then Lucide
AppIcon(token = RikkaIcons.Heart, contentDescription = "Like")
}
// Core — universal, works everywhere
RikkaIcons.Heart
RikkaIcons.Search
RikkaIcons.ArrowLeft // autoMirror = true for RTL
// Extended — broad coverage across packs
RikkaIconsExtended.Palette
// Loose — pack-specific, dependency explicit at call site
RikkaIconsLoose.Lucide.WholeWord
RikkaIconsLoose.Tabler.Forklift
RikkaIconsLoose.Phosphor.Stethoscope
RikkaIconsLoose.Bootstrap.Bandaid
Gradle resolves the correct artifact automatically — just add the dependency.
A responsive web app for browsing and discovering the full icon catalog.
./gradlew :composeApp:wasmJsBrowserDevelopmentRun
# Run the showcase web app
./gradlew :composeApp:wasmJsBrowserDevelopmentRun
# Publish all modules to local Maven
./gradlew publishToMavenLocal --no-configuration-cache -PRELEASE_SIGNING_ENABLED=false
# Run all tests
./gradlew allTests
| Tier | Object | Tokens | Guarantee |
|---|
| Core | RikkaIcons | 229 | Resolves in all packs |
| Extended | RikkaIconsExtended | 238 | MS required + ≥3 of 4 vector pack families |
| Loose | RikkaIconsLoose | 341 | MS required + 1-2 vector packs, organized by pack |
| Pack | Icons | Styles | Type |
|---|
| Material Symbols | 810 mapped | Outlined, Filled | Font glyph |
| Material Symbols Rounded | 810 mapped | Rounded, Filled Rounded | Font glyph |
| Material Symbols Sharp | 810 mapped | Sharp, Filled Sharp | Font glyph |
| Lucide | 1,573 | Outline | ImageVector |
| Tabler | 5,039 + 1,053 | Outline, Filled | ImageVector |
| Phosphor | 1,512 × 3 | Regular, Bold, Fill | ImageVector |
| Bootstrap | 1,408 + 670 | Outline, Filled | ImageVector |
| Module | Description |
|---|
core | IconToken, IconPack, AppIcon, ProvideIconPack |
tokens-core | 229 common icon tokens |
tokens-extended | 238 extended tokens (MS + 3+ vector packs) |
tokens-loose | 341 pack-specific tokens |
pack-lucide | Lucide icon renditions |
pack-tabler | Tabler Icons renditions (Outline + Filled) |
pack-phosphor | Phosphor Icons renditions (Regular + Bold + Fill) |
pack-bootstrap | Bootstrap Icons renditions (Outline + Filled) |
pack-material-symbols | Material Symbols Outlined/Filled (variable font) |
pack-material-symbols-rounded | Material Symbols Rounded/Filled Rounded |
pack-material-symbols-sharp | Material Symbols Sharp/Filled Sharp |
| Platform | Status |
|---|
| Android (API 24+) | ✅ |
| Desktop (JVM) | ✅ |
| iOS arm64 | ✅ |
| iOS Simulator arm64 | ✅ |
| iOS x64 | ✅ |
| JavaScript (browser) | ✅ |
| WasmJs (browser) | ✅ |
Semantic tokens, not icon imports — UI code references RikkaIcons.Heart, never a specific vector or font glyph. Swapping the entire icon set is a one-line change at ProvideIconPack.
Two rendition types — Glyph (font-based, tiny bundle, variable axes) and Vector (ImageVector, pixel-perfect, no font loading).
Font glyph for Material Symbols — Variable font supports weight/grade/opticalSize/fill axes at runtime. A single ~800KB font replaces thousands of individual SVG vectors.
Fallback chains with style mismatch detection — pack.withFallback(other) enables graceful degradation. hasStyleMismatch warns when mixing Outline + Filled packs.
Zero Material3 dependency — Built on compose.foundation + compose.ui only.
Surfaced from shared tags and platforms — no rankings paid for.