Liquid Composer: Liquid Glass app icons for iOS 27
Liquid Composer
A CLI and MCP server that build iOS 27 Liquid Glass icons from a JSON recipe and output PNG, zip archives and .icon files
- 69 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Local rendering launches your installed Google Chrome and writes files to disk
- The remote MCP receives the icon recipe for validation, although the link carrying the recipe is not sent to the server
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/liquid-composerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Local rendering launches your installed Google Chrome and writes files to disk
- The remote MCP receives the icon recipe for validation, although the link carrying the recipe is not sent to the server
This is third-party code. Review the repository files before installing.
What it does
Liquid Composer recreates Apple Icon Composer in the browser with the iOS 27 Liquid Glass material. An icon is a JSON recipe: background, layers top to bottom, glass settings and a list of outputs. Agents drive the same engine as the editor, and rendering runs on WebGL2 in headless Chrome. The package offers three interfaces. The npx liquid-composer commands apply, render, import, validate and schema print JSON with file paths and document state. A local MCP server starts with npx -y liquid-composer mcp and exposes liquid_apply, liquid_update, liquid_render, liquid_export, liquid_import_icon, liquid_state and liquid_schema with preview images. The remote MCP at liquid-composer.vercel.app/mcp only validates a recipe and returns a link that opens the icon in the browser. The recipe sets refraction, blur, highlights, shadows, translucency and fills for the Default, Dark, Clear Light and Clear Dark appearances. Export goes to PNG, a ZIP with all appearances or an .icon that Icon Composer and Xcode open.
Who it is for. Designers and iOS developers who need Liquid Glass app icons without hand work in Icon Composer on every iteration.
Good fit when
- An agent assembles an icon from vector layers from a description and renders a preview right away
- You want to export an icon in all appearances as a single archive
- An existing .icon file needs importing and a 512-pixel render
- Before loading into Xcode you want to check the recipe with validate
- You need to make a series of icons for different apps from one recipe template
Not a fit when
- You need the Tinted variant of iOS 27: it is not implemented in the editor
- You need an exact copy of Apple output: the engine follows the formulas and values of Icon Composer 27, but a perfect match is not guaranteed
- You need rendering without Google Chrome installed: headless rendering uses it through playwright-core
Example request
Build an icon from logo.svg on a dark background with the Liquid Glass effect, render it at 512 pixels and export all appearances.MCP
- Transport
- stdio, http
- Authentication
- not required
Limitations
Command-line rendering needs Google Chrome installed and runs on software SwiftShader by default, and the --gpu flag switches to the graphics card. A document with refraction on, or with specular set to inside or outside, needs Xcode 27, because Icon Composer 2 writes such files the same way. The Tinted variants are not implemented. The remote MCP does not render and only validates a recipe and returns a link. The web app stores work in the browser and a privacy policy is available on the project site. The ?agent parameter in the address turns off analytics and autosave.
How to disable. Run claude mcp remove liquid-composer and remove the skill through your agent skill manager. The npx install leaves nothing in the project apart from the npm cache.
FAQ
Which export formats are supported?
PNG at 4096, 2048, 1024, 512 or 256 pixels, JPEG at 1024, a ZIP with all appearances and an .icon package for Icon Composer and Xcode. Sizes up to 1024 are supersampled.
How does the local MCP differ from the remote one?
The local one runs through npx, renders icons in headless Chrome and returns images. The remote one at liquid-composer.vercel.app/mcp only validates a recipe and gives a link, with the recipe in the URL fragment and not sent to the server.
Is there a separate skill?
Yes, npx skills add frontedu/liquid-composer teaches the agent the recipe format and the workflow.
What files can be imported?
The editor takes SVG, PNG and JPEG for layers, and the import command reads ready .icon documents and renders them at the size you pick.
Does the app work offline?
Yes, after the first visit the web version opens offline and installs as an app from Chrome or Edge. Work is autosaved in the browser.
Discussion
No questions or reviews yet.
Related
MCP serversSearch and drop in icons from 150+ Iconify collections as an MCP server, CLI and skill, writing SVG straight into the project
An MCP server that finds a coolicons icon by meaning and returns the SVG with the import line, so the agent never guesses names
MCP server and CDN of service icons: matches logos to docker-compose.yml and serves SVG, PNG and WEBP
An Apple-style web design skill: a light ground, one white panel instead of scattered cards, glass only where layers overlap.
An MCP server for Keyline Icons: the agent finds an icon by name and gets its SVG and a ready React import with no guessing
An MCP server and skill for a set of thousands of brand SVG icons: the agent searches and inserts icons with no key
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Liquid Composer: Liquid Glass app icons for iOS 27 (this card) | no | not required | 69 | |
| Better Icons | no | not required | 1,476 | search for ready-made icons, builds no icons of its own |
| Keyline Icons MCP | yes | not required | 205 | a set of line icons for projects, does not render a glass material |
README in short
The README explains what iOS 27 changes in Liquid Glass: light from above, edge highlights, specular placement options and inverse refraction. It lists editor features, agent commands, shortcuts and the WebGL2 engine layout.