Icon MCP Server

CLI and MCP server for creating Apple .icon bundles with Liquid Glass effects (iOS 26+)

Local serverstdio

What is the Icon MCP server?

CLI and MCP server for creating Apple .icon bundles with Liquid Glass effects (iOS 26+). That is what the icon mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.

The short version

  • Create .icon bundles — programmatically from PNG or SVG glyphs
  • Full Liquid Glass — support: specular highlights, blur material, shadows, translucency
  • Dark mode + appearance variants — with per-appearance fill specializations
  • AI-agent ready — 12 MCP tools + 3 workflow prompts with built-in instructions

The tools it exposes

The server publishes 14 tools. What each one is for:

  • create — Create a new .icon bundle from a foreground image
  • add-layer — Add a layer to an existing bundle
  • remove — Remove a layer or group
  • inspect — Read and display bundle contents
  • glass — Configure Liquid Glass effects on a group
  • appearance — Set dark/tinted mode overrides
  • fill — Set background fill (solid, gradient, automatic, none)
  • position — Set layer/group scale and offset
  • preview — Export a preview PNG (Liquid Glass or flat)
  • render — Render pixel-perfect Liquid Glass via ictool
  • export-marketing — Export flat 1024x1024 PNG for App Store Connect (no alpha)
  • doctor — Check system setup and dependencies

Getting it running

Installation goes through your MCP client rather than a global install: point it at icon-composer-mcp on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

What it needs from you

  • Node.js 18+ - macOS with Icon Composer for Liquid Glass rendering - Flat previews, bundle creation/editing, and marketing export work on any platform without Icon Composer Run icon-composer doctor to check your setup.

How it compares

Plenty of developer tooling servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. Icon's toolset — create, add-layer, remove and 11 more — is a fair guide to whether it matches your workflow. It is maintained by ethbak; worth a glance at recent repository activity before you build anything load-bearing on it.

SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • With 14 tools registered it takes up a noticeable share of the context window; turn it off in projects that never touch Icon.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
createCreate a new .icon bundle from a foreground image
add-layerAdd a layer to an existing bundle
removeRemove a layer or group
inspectRead and display bundle contents
glassConfigure Liquid Glass effects on a group
appearanceSet dark/tinted mode overrides
fillSet background fill (solid, gradient, automatic, none)
positionSet layer/group scale and offset
previewExport a preview PNG (Liquid Glass or flat)
renderRender pixel-perfect Liquid Glass via ictool
export-marketingExport flat 1024x1024 PNG for App Store Connect (no alpha)
doctorCheck system setup and dependencies
create_iconCreate a .icon bundle from a foreground image and background color
add_layer_to_iconAdd a new layer to an existing bundle

How to install the Icon MCP server

{
  "mcpServers": {
    "icon-composer": {
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

  • Node.js 18+ - macOS with Icon Composer for Liquid Glass rendering - Flat previews, bundle creation/editing, and marketing export work on any platform without Icon Composer Run icon-composer doctor to check your setup.

Example prompts to try

  • Use Icon to create.
  • Use Icon to add-layer.
  • Use Icon to remove.

Frequently asked questions

It connects Icon to MCP-compatible AI assistants such as Claude and Cursor, exposing 14 tools (create, add-layer, remove, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Icon directly.