How do I add the new icons to a electron app?
Asked on 06/11/2025
1 search
To add the new icons to an Electron app, you can use Apple's Icon Composer tool to create and export your app icons. Here's a general approach based on the sessions from WWDC:
-
Design Your Icon: Start by designing your icon using your preferred design tool. You can use templates available for Figma, Sketch, Photoshop, and Illustrator, which are aligned with Apple's new design system. These templates can be found on the Apple Design resources page on developer.apple.com.
-
Use Icon Composer: Import your design into Icon Composer. This tool allows you to organize and annotate layers, add blurring, adjust translucency, test specular highlighting, and preview icons in various tinting modes. Icon Composer helps you create a single source artifact that can be used across different Apple platforms.
-
Export Your Icon: Once you're satisfied with your design, export the icon from Icon Composer. The tool can generate high-resolution versions of the icon for marketing and communication needs.
-
Integrate with Electron: After exporting, you can integrate the icon into your Electron app. Typically, this involves specifying the icon in your Electron app's configuration, such as in the
BrowserWindow
options.
For more detailed guidance on using Icon Composer, you might want to check out the session Create icons with Icon Composer (00:00:00) and Say hello to the new look of app icons (00:00:00) from WWDC 2025. These sessions provide insights into the new design language and how to effectively use Icon Composer.

Create icons with Icon Composer
Learn how to use Icon Composer to make updated app icons for iOS, iPadOS, macOS, and watchOS. Find out how to export assets from your design tool of choice, add them to Icon Composer, apply real-time glass properties and other effects, and preview and adjust for different platforms and appearance modes.

Say hello to the new look of app icons
Get an overview of the new app icon appearances for iOS, iPadOS, and macOS, including light and dark tints, and clear options. Learn how to use frostiness and translucency to make your app icon more vibrant, dynamic, and expressive, and find out how to ensure your icon works well with specular highlights.

What’s new in watchOS 26
Discover the new features in watchOS 26 and learn how to integrate them into your watchOS and iOS apps. Explore the ARM64 architecture, and dive into the new design system. We’ll also share updates for widgets and insights on how to bring controls to Apple Watch.