Claude Code + Figma Integration
appicon-cli is designed to work seamlessly with Claude Code and the Figma MCP (Model Context Protocol) server. This enables a workflow where you search for app icons in the terminal and place them directly into a Figma design file without leaving your editor.
Prerequisites
- Claude Code installed and configured
- Figma MCP server connected (via the
TalkToFigmaorplugin:figmaMCP) - appicon-cli installed globally
Workflow overview
Claude Code session
│
├─ 1. appicon search "Notion" ← find the app
├─ 2. appicon info 324684580 --json ← get icon URLs
├─ 3. Figma MCP: create_frame ← build layout in Figma
└─ 4. Figma MCP: place icon ← add the icon to the frameExample: search and place icons
In a Claude Code session, you can ask:
"Search for the Spotify app icon, download it at 512px, and add it to my Figma file."
Claude Code will:
- Run
appicon search "Spotify"to find matching apps. - Run
appicon download 324684580 --size 512 -o /tmpto save the icon locally. - Use the Figma MCP tools to create a frame or component and place the icon.
Example: batch competitive analysis
"Download icons for these 5 apps and create a competitive analysis grid in Figma: Notion, Slack, Figma, Linear, Arc."
Claude Code will:
- Create a
batch.jsonwith the identifiers. - Run
appicon batch batch.json --sizes 128,512 -o ./icons. - Use Figma MCP to create a frame grid with labels and icon images.
JSON output for automation
The --json flag on every command makes it easy for Claude Code to parse results programmatically:
bash
# Get structured data
appicon search "Figma" --json
# Extract the first icon URL
appicon info 324684580 --json | jq '.iconUrls[] | select(.size == 512) | .url'Claude Code can read the JSON output directly and use the URLs or file paths in subsequent Figma MCP calls.
Tips
- Use
--jsonwhenever Claude Code is driving the workflow -- it avoids parsing table output. - Pre-configure your custom server with
appicon config add-sourceso that company-internal icons are also searchable. - Combine with
appicon batchto process many icons in one step before laying them out in Figma. - The
infocommand is useful for getting multiple icon URL sizes without downloading -- Figma MCP can fetch images directly from URLs.
Related
- Figma MCP documentation
- Claude Code documentation
- config command reference -- for registering custom servers