Android Compose – Import multi-variant monochrome icons as ImageVector

This guide demonstrates how to import multiple variants of vector icons (different sizes/states) as ImageVector resources in Jetpack Compose. Unlike basic icon import, this solution handles:

• Multiple size variants (16dp, 24dp, 32dp)
• Custom variant naming rules

Project structure

.
├── app/
│   ├── src/main/kotlin/
│   │   └── com.example.myapp.ui.icons/
│   │       └── .fig.toml
│   └── build.gradle
├── .figtree.toml
├── settings.gradle
└── build.gradle

Important: The .fig.toml is placed in the target package directory where icons will be generated. This ensures:

• Automatic package detection for generated .kt files
• Seamless refactoring (paths remain valid if package changes)
• Clean separation of generated code

Workspace config

# .figtree.toml
[remotes.icons]
file_key = "..."
container_node_ids = ["..."]

[icons]
extends = "compose"
remote = "icons"
color_mappings = [
    # Change all colors to black
    { from = "*", to = "Color.Black" },
]
# {base} = icon base name (e.g. "Puzzle")
# {variant} = variant identifier (e.g. "24")
variant_naming.local_name = "{base}{variant}" # Output: Puzzle24.kt
variant_naming.figma_name = "{base} / {variant}" # Figma: "Puzzle / 24"
# Supported variants (must exist in Figma)
variants = ["32", "24", "16"]

Each module in your workspace can define its own .fig.toml to select specific assets and optionally override settings from the workspace-level .figtree.toml profile.

Fig-file configuration

# app/src/main/kotlin/com/example/myapp/ui/icons/.fig.toml
[icons]
# Case 1: Import all configured variants (32/24/16)
# In figma: "Icons / Puzzle / 32", "Icons / Puzzle / 24", "Icons / Puzzle / 16"
Puzzle = "Icons / Puzzle"
# Case 2: Import only specific variant
Star = { name = "Icons / Star", variants = ["16"] }

Run

figx import //...

Note: The //... pattern recursively imports all modules with .fig.toml configs found in the workspace.

Result

.
├── app/
│   ├── src/main/kotlin/
│   │   └── com.example.myapp.ui.icons/
│   │       ├── .fig.toml
│   │       ├── Puzzle32.kt   # Generated ImageVector
│   │       ├── Puzzle24.kt   # Generated ImageVector
│   │       ├── Puzzle316.kt  # Generated ImageVector
│   │       └── Star16.kt     # Generated ImageVector
│   └── build.gradle
├── .figtree.toml
├── settings.gradle
└── build.gradle