Is Icon Composer required for every operation?

No. Bundle creation, editing, flat previews, and marketing export work without Icon Composer. Apple's Icon Composer is required for Liquid Glass rendering.

What platform is required for Liquid Glass rendering?

Liquid Glass rendering requires macOS with Icon Composer installed.

Which MCP clients are documented as compatible?

The README provides configurations for Claude Desktop, Cursor, Windsurf, and Claude Code.

How is the MCP server installed?

Run it through npx with `npx -y icon-composer-mcp`.

Icon Composer MCP

iconsappleliquid-glassdesign-tools

Create and edit Apple .icon bundles with Liquid Glass effects, appearance variants, previews, and App Store exports.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

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

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

Icon Composer MCP provides stdio MCP tools and CLI commands for creating and editing .icon bundles from PNG or SVG images. It supports Liquid Glass settings, dark and tinted appearance variants, preview rendering, and flat marketing exports. Use it for programmatic icon workflows on macOS or for bundle creation and editing on other platforms.

Use cases

Create .icon bundles from PNG or SVG glyphs

Tune Liquid Glass highlights, blur, shadows, and translucency

Configure dark and tinted appearance variants

Render preview PNGs and Liquid Glass output

Export opaque marketing icons for App Store Connect

Key features

Create and modify .icon bundles

Add or remove icon layers and groups

Configure Liquid Glass effects

Set fills, positions, and appearance overrides

Inspect manifests and assets

Export previews and marketing PNGs

Capabilities & Tool Schemas (12)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Icon Composer MCP.

create_icon

Create a `.icon` bundle from a foreground image and background color

add_layer_to_icon

Add a new layer to an existing bundle

remove_layer

Remove a layer or group, optionally clean up assets

read_icon

Inspect bundle manifest and assets

set_glass_effects

Configure specular, blur, shadow, translucency

set_appearances

Set dark/tinted mode overrides

Documentation Overview

Icon Composer MCP

CLI and MCP server for creating images, icons, and logos with Liquid Glass effects (iOS 26+). Not affiliated with Apple .

Demo

Key Features

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

Installation

Claude Code

Terminal

claude mcp add icon-composer -- npx -y icon-composer-mcp

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

config.json

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

Cursor

Add to .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global):

config.json

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

The server will appear in Cursor Settings > MCP Servers. No restart required.

VS Code

Add to .vscode/mcp.json in your project root (or open Command Palette > MCP: Open User Configuration for global):

Note: VS Code uses "servers" (not "mcpServers") and requires a "type" field.

config.json

{
  "servers": {
    "icon-composer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

You'll see Start/Stop/Restart buttons inline in the editor. First launch will prompt a trust confirmation.

Windsurf

First, enable MCP in Windsurf Settings > Cascade > Model Context Protocol (MCP).

Then add to ~/.codeium/windsurf/mcp_config.json:

config.json

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

Press the refresh button in Windsurf settings to load the server.

Other MCP clients

The server uses stdio transport. Most MCP clients use this config format:

config.json

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

Or run the server directly:

Terminal

npx -y icon-composer-mcp

CLI only (no MCP)

Terminal

npm install -g icon-composer-mcp
icon-composer --help

How It Works

Provide a glyph — any PNG or SVG logo/image
Create a .icon bundle — sets background fill, layer scale, and glass effects
Apple's ictool renders Liquid Glass — specular highlights, shadows, depth, and translucency
Export — preview PNGs, App Store marketing icon, or the .icon bundle for Xcode

Requirements

Node.js 18+
macOS with Icon Composer for Liquid Glass rendering
bash
```
brew install --cask icon-composer
```
Flat previews, bundle creation/editing, and marketing export work on any platform without Icon Composer

Run icon-composer doctor to check your setup.

CLI Commands

Command	Description
`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
`fx`	Toggle all glass effects on/off
`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

Details

create — Create a new .icon bundle

bash

icon-composer create <foreground_path> <output_dir> --bg-color <hex> [options]

Option	Default	Description
`--bg-color <hex>`	required	Background color (e.g. `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	Bundle name (without `.icon` extension)
`--dark-bg-color <hex>`	—	Dark mode background color
`--glyph-scale <n>`	`1.0`	Glyph scale (1.0 = standard ~65% of icon area)
`--specular / --no-specular`	`true`	Specular highlight
`--shadow-kind <kind>`	`layer-color`	Shadow type: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	Shadow opacity (0–1)
`--blur-material <n>`	—	Blur material value (0–1)
`--translucency-enabled`	`false`	Enable translucency gradient
`--translucency-value <n>`	`0.4`	Translucency amount (0–1)

Output: Creates <output_dir>/<bundle_name>.icon/ containing icon.json manifest and Assets/ directory.

add-layer — Add a layer to an existing bundle

bash

icon-composer add-layer <bundle_path> <image_path> --name <name> [options]

Option	Default	Description
`--name <name>`	required	Layer name
`--group-index <n>`	`0`	Target group index
`--create-group`	`false`	Create a new group for this layer
`--opacity <n>`	`1.0`	Layer opacity (0–1)
`--scale <n>`	`1.0`	Layer scale
`--offset-x <n>`	`0`	X offset in points
`--offset-y <n>`	`0`	Y offset in points
`--blend-mode <mode>`	`normal`	Blend mode (e.g. `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	Participate in Liquid Glass effects

Supported formats: .png, .jpg, .jpeg, .svg, .webp, .heic, .heif

remove — Remove a layer or group

bash

icon-composer remove <bundle_path> --target <layer|group> --group-index <n> [--layer-index <n>]

inspect — Read and display bundle contents

bash

icon-composer inspect <bundle_path>

Output: Prints the full manifest JSON and lists all assets with sizes.

glass — Configure Liquid Glass effects

bash

icon-composer glass <bundle_path> [options]

Option	Description
`--group-index <n>`	Target group (default: `0`)
`--specular / --no-specular`	Specular highlight
`--blur-material <n>`	Blur amount (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color`, or `none`
`--shadow-opacity <n>`	Shadow opacity (0–1)
`--translucency-enabled / --no-translucency-enabled`	Translucency toggle
`--translucency-value <n>`	Translucency amount (0–1)
`--opacity <n>`	Group opacity (0–1)
`--blend-mode <mode>`	Group blend mode
`--lighting <type>`	`combined` or `individual`

appearance — Set dark/tinted mode overrides

Read the full README →View source on GitHub →

Related MCP Servers

View all in Architecture & Design View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

741

Package downloads in the last 30 days.

Last commit

5mo ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Icon Composer MCP

It can create .icon bundles from PNG or SVG glyphs.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/ethbak-icon-composer-mcp?style=directory)](https://allmcps.com/mcp/ethbak-icon-composer-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/ethbak-icon-composer-mcp"><img src="https://allmcps.com/api/badge/ethbak-icon-composer-mcp?style=directory" alt="Icon Composer MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryArchitecture & Design

PricingFree

11/11 checks healthy over the last 33d

60Quality signal: Good · 60/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools28/30

Adoption & activity7/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 27d ago via OSV.dev · icon-composer-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📐 Architecture & Design →Alternatives to Icon Composer MCP →Install in Claude Desktop Install in Cursor Install in VS Code

Icon Composer MCP

iconsappleliquid-glassdesign-tools

Create and edit Apple .icon bundles with Liquid Glass effects, appearance variants, previews, and App Store exports.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

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

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

Use cases

Create .icon bundles from PNG or SVG glyphs

Tune Liquid Glass highlights, blur, shadows, and translucency

Configure dark and tinted appearance variants

Render preview PNGs and Liquid Glass output

Export opaque marketing icons for App Store Connect

Key features

Create and modify .icon bundles

Add or remove icon layers and groups

Configure Liquid Glass effects

Set fills, positions, and appearance overrides

Inspect manifests and assets

Export previews and marketing PNGs

Capabilities & Tool Schemas (12)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Icon Composer MCP.

create_icon

Create a `.icon` bundle from a foreground image and background color

add_layer_to_icon

Add a new layer to an existing bundle

remove_layer

Remove a layer or group, optionally clean up assets

read_icon

Inspect bundle manifest and assets

set_glass_effects

Configure specular, blur, shadow, translucency

set_appearances

Set dark/tinted mode overrides

Documentation Overview

Icon Composer MCP

CLI and MCP server for creating images, icons, and logos with Liquid Glass effects (iOS 26+). Not affiliated with Apple .

Demo

Key Features

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

Installation

Claude Code

Terminal

claude mcp add icon-composer -- npx -y icon-composer-mcp

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

config.json

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

Cursor

Add to .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global):

config.json

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

The server will appear in Cursor Settings > MCP Servers. No restart required.

VS Code

Add to .vscode/mcp.json in your project root (or open Command Palette > MCP: Open User Configuration for global):

Note: VS Code uses "servers" (not "mcpServers") and requires a "type" field.

config.json

{
  "servers": {
    "icon-composer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "icon-composer-mcp"]
    }
  }
}

You'll see Start/Stop/Restart buttons inline in the editor. First launch will prompt a trust confirmation.

Windsurf

First, enable MCP in Windsurf Settings > Cascade > Model Context Protocol (MCP).

Then add to ~/.codeium/windsurf/mcp_config.json:

config.json

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

Press the refresh button in Windsurf settings to load the server.

Other MCP clients

The server uses stdio transport. Most MCP clients use this config format:

config.json

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

Or run the server directly:

Terminal

npx -y icon-composer-mcp

CLI only (no MCP)

Terminal

npm install -g icon-composer-mcp
icon-composer --help

How It Works

Provide a glyph — any PNG or SVG logo/image
Create a .icon bundle — sets background fill, layer scale, and glass effects
Apple's ictool renders Liquid Glass — specular highlights, shadows, depth, and translucency
Export — preview PNGs, App Store marketing icon, or the .icon bundle for Xcode

Requirements

Node.js 18+
macOS with Icon Composer for Liquid Glass rendering
bash
```
brew install --cask icon-composer
```
Flat previews, bundle creation/editing, and marketing export work on any platform without Icon Composer

Run icon-composer doctor to check your setup.

CLI Commands

Command	Description
`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
`fx`	Toggle all glass effects on/off
`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

Details

create — Create a new .icon bundle

bash

icon-composer create <foreground_path> <output_dir> --bg-color <hex> [options]

Option	Default	Description
`--bg-color <hex>`	required	Background color (e.g. `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	Bundle name (without `.icon` extension)
`--dark-bg-color <hex>`	—	Dark mode background color
`--glyph-scale <n>`	`1.0`	Glyph scale (1.0 = standard ~65% of icon area)
`--specular / --no-specular`	`true`	Specular highlight
`--shadow-kind <kind>`	`layer-color`	Shadow type: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	Shadow opacity (0–1)
`--blur-material <n>`	—	Blur material value (0–1)
`--translucency-enabled`	`false`	Enable translucency gradient
`--translucency-value <n>`	`0.4`	Translucency amount (0–1)

Output: Creates <output_dir>/<bundle_name>.icon/ containing icon.json manifest and Assets/ directory.

add-layer — Add a layer to an existing bundle

bash

icon-composer add-layer <bundle_path> <image_path> --name <name> [options]

Option	Default	Description
`--name <name>`	required	Layer name
`--group-index <n>`	`0`	Target group index
`--create-group`	`false`	Create a new group for this layer
`--opacity <n>`	`1.0`	Layer opacity (0–1)
`--scale <n>`	`1.0`	Layer scale
`--offset-x <n>`	`0`	X offset in points
`--offset-y <n>`	`0`	Y offset in points
`--blend-mode <mode>`	`normal`	Blend mode (e.g. `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	Participate in Liquid Glass effects

Supported formats: .png, .jpg, .jpeg, .svg, .webp, .heic, .heif

remove — Remove a layer or group

bash

icon-composer remove <bundle_path> --target <layer|group> --group-index <n> [--layer-index <n>]

inspect — Read and display bundle contents

bash

icon-composer inspect <bundle_path>

Output: Prints the full manifest JSON and lists all assets with sizes.

glass — Configure Liquid Glass effects

bash

icon-composer glass <bundle_path> [options]

Option	Description
`--group-index <n>`	Target group (default: `0`)
`--specular / --no-specular`	Specular highlight
`--blur-material <n>`	Blur amount (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color`, or `none`
`--shadow-opacity <n>`	Shadow opacity (0–1)
`--translucency-enabled / --no-translucency-enabled`	Translucency toggle
`--translucency-value <n>`	Translucency amount (0–1)
`--opacity <n>`	Group opacity (0–1)
`--blend-mode <mode>`	Group blend mode
`--lighting <type>`	`combined` or `individual`

appearance — Set dark/tinted mode overrides

Read the full README →View source on GitHub →

Related MCP Servers

View all in Architecture & Design View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

741

Package downloads in the last 30 days.

Last commit

5mo ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Icon Composer MCP

It can create .icon bundles from PNG or SVG glyphs.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/ethbak-icon-composer-mcp?style=directory)](https://allmcps.com/mcp/ethbak-icon-composer-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/ethbak-icon-composer-mcp"><img src="https://allmcps.com/api/badge/ethbak-icon-composer-mcp?style=directory" alt="Icon Composer MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryArchitecture & Design

PricingFree

11/11 checks healthy over the last 33d

60Quality signal: Good · 60/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools28/30

Adoption & activity7/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 27d ago via OSV.dev · icon-composer-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📐 Architecture & Design →Alternatives to Icon Composer MCP →Install in Claude Desktop Install in Cursor Install in VS Code