Demo

Related MCP server: XcodeBuildMCP

Características principales

Crea paquetes .icon mediante programación a partir de glifos PNG o SVG
Soporte completo para Liquid Glass: reflejos especulares, material de desenfoque, sombras, translucidez
Modo oscuro + variantes de apariencia con especializaciones de relleno por apariencia
Listo para agentes IA: 12 herramientas MCP + 3 prompts de flujo de trabajo con instrucciones integradas

Instalación

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

Añadir a ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Añadir a .cursor/mcp.json en la raíz de tu proyecto (o ~/.cursor/mcp.json para global):

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

El servidor aparecerá en Cursor Settings > MCP Servers. No requiere reinicio.

Añadir a .vscode/mcp.json en la raíz de tu proyecto (o abre Command Palette > MCP: Open User Configuration para global):

Nota: VS Code utiliza "servers" (no "mcpServers") y requiere un campo "type".

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

Verás botones de Iniciar/Detener/Reiniciar integrados en el editor. El primer lanzamiento solicitará una confirmación de confianza.

Primero, habilita MCP en Windsurf Settings > Cascade > Model Context Protocol (MCP).

Luego añade a ~/.codeium/windsurf/mcp_config.json:

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

Presiona el botón de refrescar en la configuración de Windsurf para cargar el servidor.

El servidor utiliza transporte stdio. La mayoría de los clientes MCP utilizan este formato de configuración:

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

O ejecuta el servidor directamente:

npx -y icon-composer-mcp

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

Cómo funciona

Proporciona un glifo — cualquier logotipo o imagen PNG o SVG
Crea un paquete .icon — establece el relleno de fondo, la escala de capa y los efectos de cristal
ictool de Apple renderiza Liquid Glass — reflejos especulares, sombras, profundidad y translucidez
Exportar — previsualiza PNGs, icono de marketing para App Store o el paquete .icon para Xcode

Requisitos

Node.js 18+
macOS con Icon Composer para renderizado Liquid Glass
```
brew install --cask icon-composer
```
Las previsualizaciones planas, la creación/edición de paquetes y la exportación de marketing funcionan en cualquier plataforma sin Icon Composer

Ejecuta icon-composer doctor para comprobar tu configuración.

Comandos CLI

Comando	Descripción
`create`	Crea un nuevo paquete `.icon` a partir de una imagen en primer plano
`add-layer`	Añade una capa a un paquete existente
`remove`	Elimina una capa o grupo
`inspect`	Lee y muestra el contenido del paquete
`glass`	Configura los efectos Liquid Glass en un grupo
`appearance`	Establece anulaciones para modo oscuro/tintado
`fill`	Establece el relleno de fondo (sólido, degradado, automático, ninguno)
`position`	Establece la escala y el desplazamiento de capa/grupo
`fx`	Activa/desactiva todos los efectos de cristal
`preview`	Exporta un PNG de previsualización (Liquid Glass o plano)
`render`	Renderiza Liquid Glass perfecto a nivel de píxel mediante `ictool`
`export-marketing`	Exporta un PNG plano de 1024x1024 para App Store Connect (sin alfa)
`doctor`	Comprueba la configuración del sistema y las dependencias

Detalles

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

Opción	Predeterminado	Descripción
`--bg-color <hex>`	requerido	Color de fondo (ej. `"#0A66C2"`)
`--bundle-name <name>`	`AppIcon`	Nombre del paquete (sin extensión `.icon`)
`--dark-bg-color <hex>`	—	Color de fondo para modo oscuro
`--glyph-scale <n>`	`1.0`	Escala del glifo (1.0 = estándar ~65% del área del icono)
`--specular / --no-specular`	`true`	Reflejo especular
`--shadow-kind <kind>`	`layer-color`	Tipo de sombra: `neutral`, `layer-color`, `none`
`--shadow-opacity <n>`	`0.5`	Opacidad de la sombra (0–1)
`--blur-material <n>`	—	Valor del material de desenfoque (0–1)
`--translucency-enabled`	`false`	Habilitar degradado de translucidez
`--translucency-value <n>`	`0.4`	Cantidad de translucidez (0–1)

Salida: Crea <output_dir>/<bundle_name>.icon/ conteniendo el manifiesto icon.json y el directorio Assets/.

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

Opción	Predeterminado	Descripción
`--name <name>`	requerido	Nombre de la capa
`--group-index <n>`	`0`	Índice del grupo objetivo
`--create-group`	`false`	Crea un nuevo grupo para esta capa
`--opacity <n>`	`1.0`	Opacidad de la capa (0–1)
`--scale <n>`	`1.0`	Escala de la capa
`--offset-x <n>`	`0`	Desplazamiento X en puntos
`--offset-y <n>`	`0`	Desplazamiento Y en puntos
`--blend-mode <mode>`	`normal`	Modo de fusión (ej. `multiply`, `screen`, `overlay`)
`--glass / --no-glass`	`true`	Participar en efectos Liquid Glass

Formatos soportados: .png, .jpg, .jpeg, .svg, .webp, .heic, .heif

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

icon-composer inspect <bundle_path>

Salida: Imprime el JSON completo del manifiesto y lista todos los activos con sus tamaños.

icon-composer glass <bundle_path> [options]

Opción	Descripción
`--group-index <n>`	Grupo objetivo (predeterminado: `0`)
`--specular / --no-specular`	Reflejo especular
`--blur-material <n>`	Cantidad de desenfoque (0–1)
`--shadow-kind <kind>`	`neutral`, `layer-color` o `none`
`--shadow-opacity <n>`	Opacidad de la sombra (0–1)
`--translucency-enabled / --no-translucency-enabled`	Alternar translucidez
`--translucency-value <n>`	Cantidad de translucidez (0–1)
`--opacity <n>`	Opacidad del grupo (0–1)
`--blend-mode <mode>`	Modo de fusión del grupo
`--lighting <type>`	`combined` o `individual`

icon-composer appearance <bundle_path> --target <fill|group> --appearance <dark|tinted> [options]

Opción	Descripción
`--target <type>`	`fill` (color de fondo) o `group` (efectos de cristal)
`--appearance <mode>`	`dark` o `tinted`
`--bg-color <hex>`	Color de fondo para esta apariencia
`--specular / --no-specular`	Especular para esta apariencia
`--shadow-kind <kind>`	Tipo de sombra para esta apariencia
`--shadow-opacity <n>`	Opacidad de la sombra para esta apariencia

icon-composer fill <bundle_path> --type <solid|gradient|automatic|none> [options]

Opción	Descripción
`--type <type>`	`solid`, `gradient`, `automatic` o `none`
`--color <hex>`	Color primario (para sólido o parte inferior del degradado)
`--color2 <hex>`	Color secundario (parte superior del degradado)
`--gradient-angle <n>`	Ángulo del degradado en grados (predeterminado: `0`)

icon-composer position <bundle_path> [options]

Opción	Predeterminado	Descripción
`--target <type>`	`layer`	`layer` o `group`
`--group-index <n>`	`0`	Índice del grupo
`--layer-index <n>`	—	Índice de la capa (requerido para `--target layer`)
`--scale <n>`	—	Factor de escala (0.05–3.0)
`--offset-x <n>`	—	Desplazamiento X en puntos
`--offset-y <n>`	—	Desplazamiento Y en puntos

icon-composer fx <bundle_path> --enable|--disable

Habilita o deshabilita el reflejo especular, la sombra, el desenfoque y la translucidez en todos los grupos a la vez.

icon-composer preview <bundle_path> <output_path> [options]

Opción	Predeterminado	Descripción
`--size <n>`	`1024`	Tamaño de salida en píxeles
`--appearance <mode>`	—	`dark` o `tinted`
`--flat`	`false`	Forzar renderizado plano (saltar Liquid Glass)
`--canvas-bg <preset>`	—	`light`, `dark`, `checkerboard`, `homescreen-light`, `homescreen-dark`
`--apple-preset <name>`	—	Fondo de pantalla de Apple: `sine-purple-orange`, `sine-gasflame`, `sine-magenta`, `sine-green-yellow`, `sine-purple-orange-black`, `sine-gray`
`--canvas-bg-color <hex>`	—	Color de fondo personalizado
`--canvas-bg-image <path>`	—	Imagen de fondo personalizada
`--zoom <n>`	`1.0`	Nivel

Icon Composer MCP

Demo

Características principales

Instalación

Cómo funciona

Requisitos

Comandos CLI

Detalles

Resources

Tools

Latest Blog Posts

MCP directory API