KeyTips started with a plain Command symbol in the menu bar. I wanted a proper icon that followed Apple’s current design language, Liquid Glass.
Start with the idea
The app does one thing: tap Option, then press the next key. So the icon shows exactly that. A frosted glass Option key sits in front, with a smaller glass key behind it for the next press.
That’s the same approach I’d use for a chart title: say the one thing it’s there to say, and remove the rest.
A fake version comes first
The first attempt was a picture that looked like glass. It was convincing as an image, but real Liquid Glass icons respond to the system’s light, dark and tinted styles, and a flat picture can’t.
The real thing needed Xcode, because it includes Icon Composer, Apple’s tool for these icons. So I installed Xcode, and we rebuilt the icon in layers:
| Layer | What it is |
|---|---|
| ⌥ symbol | White, on its own layer so it stays readable when small |
| Front key | Clear frosted glass |
| Back key | A smaller glass key, for the next press |
| Background | A gradient from sky blue to deep navy |
macOS then adds the lit edges, highlights, blur and shadows. You describe the layers, and the system draws the glass.
Check it where it’s used
An icon has to work small, so we checked it at 64 and 32 pixels as well as full size.
The menu bar gets its own version: the same Option key, simplified to a single colour. Apple recommends this because a colourful icon is hard to read at that size, and macOS can then adapt it to light and dark menu bars.
What I learned
- Ask whether it’s the real thing. The first icon looked right, but only the rebuilt one responds to the system’s styles.
- Follow the platform. Apple’s guidance settled the shape, the layers and the menu bar version.
- Check the output, not the source. We judged the icon as macOS drew it, not as it looked in the design file.