Your app icon is the first thing users see. It's on their home screen, in the App Store, and in every notification. For Bluesky client developers, a distinctive icon helps your app stand out in a growing market of ATProtocol apps.

Apple's new Icon Composer tool makes creating professional iOS app icons easier than ever. We used it to create the Skyscraper icon, and in this guide, we'll share everything you need to know about this powerful design tool.

What is Apple Icon Composer?

Icon Composer is Apple's official tool for creating layered app icons with Liquid Glass material. Released alongside iOS 26 and macOS Sequoia, it represents Apple's new approach to icon design.

Key capabilities:

  • Liquid Glass material with dynamic lighting response
  • Multi-platform design from a single file (iPhone, iPad, Mac, Apple Watch)
  • Dark mode and tinted variations in one layered structure
  • Real-time previewing on different backgrounds
  • Direct Xcode integration for seamless workflow

System Requirements

Icon Composer requires macOS Sequoia 15.3 or later. It's a free download from Apple's developer resources.

Understanding Liquid Glass

Liquid Glass is Apple's new expressive material that gives app icons depth, dimension, and dynamic behavior. Unlike flat icons, Liquid Glass icons respond to their environment:

  • Specular highlights that shift with device movement
  • Blur effects that show through translucent areas
  • Translucency that adapts to the wallpaper beneath
  • Dynamic shadows that respond to lighting conditions

This creates icons that feel alive and integrated with the iOS experience, rather than stickers placed on the home screen.

Creating Your Bluesky App Icon: Step by Step

Step 1: Plan Your Icon Concept

Before opening Icon Composer, sketch your concept. For a Bluesky client, consider:

  • Brand identity: What makes your client unique?
  • Bluesky association: Should it reference the sky, clouds, or the Bluesky butterfly?
  • Simplicity: Icons are viewed at small sizes - complex details get lost
  • Distinctiveness: How will users find your app among others?

For Skyscraper, we wanted to convey height, aspiration, and a connection to the sky - matching both our name and the Bluesky platform.

Step 2: Prepare Your Artwork Layers

Icon Composer works with layered artwork. Prepare your design in layers that can be combined with Liquid Glass effects:

  • Background layer: Base color or gradient
  • Main graphic layer: Your primary icon imagery
  • Detail layers: Additional elements that add depth
  • Foreground layer: Elements that should appear "in front" of glass effects

Export layers as PNG files with transparency at high resolution (1024x1024 or higher).

Step 3: Import Into Icon Composer

Launch Icon Composer and create a new icon project:

  1. Click File → New to start a fresh icon
  2. Drag your artwork layers into the layer panel
  3. Arrange layers in the correct stacking order
  4. Position elements using the canvas guides

Icon Composer's grid system uses rounder enclosure shapes compared to previous iOS icon guides. Pay attention to the safe areas to ensure your content isn't clipped.

Step 4: Apply Liquid Glass Properties

This is where Icon Composer shines. Select layers and adjust Liquid Glass properties:

  • Specular intensity: Controls highlight brightness
  • Blur amount: Adjusts background blur through translucent areas
  • Translucency level: Sets how much the wallpaper shows through
  • Shadow depth: Controls the perceived depth of elements

The real-time preview shows how your icon responds to dynamic lighting. Rotate the lighting direction to see how highlights shift.

Step 5: Configure Rendering Modes

Icon Composer lets you control your icon's appearance across three modes from a single file:

  • Default mode: Standard light appearance
  • Dark mode: Optimized for dark backgrounds
  • Mono (monochrome) mode: Single-color tinted appearance

For each mode, you can adjust which layers are visible and how they appear. This is crucial for Bluesky apps - your icon should look great whether users prefer light or dark mode.

Step 6: Preview on Multiple Platforms

Icon Composer's preview panel lets you see your icon:

  • On different wallpapers (light, dark, colorful)
  • At various sizes (home screen, Settings, Spotlight)
  • On different devices (iPhone, iPad, Mac, Apple Watch)

Spend time previewing. An icon that looks great on a white background might disappear on a light wallpaper. Test extensively.

Step 7: Export to Xcode

Icon Composer integrates directly with Xcode:

  1. Click File → Export to Xcode Project
  2. Select your Xcode project's asset catalog
  3. The icon appears in your project automatically

Any changes you make in Icon Composer can be synced back to Xcode without manual re-exporting.

Step 8: Export Flattened Versions for Marketing

For App Store screenshots, press materials, and your website, you'll need flattened PNG exports:

  1. Click File → Export Flattened
  2. Choose your target sizes (1024x1024 for App Store)
  3. Select rendering mode (default, dark, or mono)

These static images capture the Liquid Glass appearance for use outside of iOS.

Icon Design Tips for Bluesky Clients

Stand Out in the Crowd

The official Bluesky app uses a blue butterfly. If your icon is too similar, users might confuse them. Differentiate while maintaining brand recognition.

Consider the Blue Palette

Blue is obviously associated with Bluesky, but don't feel limited. Complementary colors (orange, gold) or contrasting colors (purple, teal) can make your icon pop while still feeling appropriate.

Test at Small Sizes

Your icon will often be viewed at 60x60 points or smaller. Ensure your design is recognizable at these sizes. Fine details and thin lines disappear.

Leverage Liquid Glass Thoughtfully

Liquid Glass effects are beautiful but can be overused. Subtle translucency often works better than heavy glass effects. The goal is integration with iOS, not showing off the technology.

Consider Accessibility

Ensure sufficient contrast between icon elements. Users with visual impairments should be able to identify your icon. Test in grayscale to verify distinctiveness without color.

Common Mistakes to Avoid

  • Too much detail: Simplify for small sizes
  • Poor dark mode support: Test on both light and dark wallpapers
  • Ignoring the safe area: Content too close to edges gets clipped
  • Inconsistent platform appearance: Check all device sizes
  • Forgetting mono mode: Some users enable tinted icons

Resources for Learning More

Apple provides excellent resources for icon design:

Our Experience Creating the Skyscraper Icon

When we designed the Skyscraper icon, we went through several iterations:

  1. Initial concept: A literal skyscraper silhouette - too complex at small sizes
  2. Second attempt: Abstract tower shape - lacked personality
  3. Final design: Translucent cloud with "Sky" text on a blue gradient - friendly, recognizable, and perfectly suited for Liquid Glass

The final Skyscraper icon features a blue gradient background that transitions from lighter blue at the top to a deeper blue at the bottom, evoking an open sky. A stylized translucent cloud sits at the top of the icon, rendered with Liquid Glass properties that give it a soft, glassy appearance. Below the cloud, the word "Sky" is displayed in rounded, translucent typography that complements the cloud's glassy aesthetic.

Icon Composer's real-time preview was invaluable. We could immediately see how the cloud's translucency interacted with different wallpapers, and how the "Sky" text maintained legibility across light and dark modes.

The Liquid Glass material gave our icon depth without overwhelming the design. The cloud's subtle translucency creates a connection to the wallpaper beneath, reinforcing the "sky" theme while the rounded typography feels approachable and modern.

Conclusion: Your Icon Matters

For Bluesky developers building clients, your app icon is part of your brand. It's what users tap dozens of times a day. It's what represents you in the App Store.

Apple's Icon Composer makes professional icon design accessible to indie developers. You don't need expensive design software or a design team - just a Mac running Sequoia and a clear vision for your app.

Take the time to create an icon that represents your Bluesky client well. Users notice quality, and a polished icon signals a polished app.

Try Skyscraper

See our icon in action - download Skyscraper for iOS and experience our Bluesky client with trending hashtags, keyword alerts, and tools to help you grow your Bluesky following.

Questions about iOS development or icon design for Bluesky apps? Reach out at contact@getskyscraper.com.