Android Compose – Import monochrome icons as ImageVector

This recipe demonstrates how to import vector icons directly as ImageVector resources in a Jetpack Compose project, with auto-generated Kotlin files containing the icon implementations.

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" },
]

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]
Puzzle = "Icons / Puzzle"
Star = "Icons / Star"

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
│   │       ├── Puzzle.kt  # Generated ImageVector
│   │       └── Star.kt    # Generated ImageVector
│   └── build.gradle
├── .figtree.toml
├── settings.gradle
└── build.gradle