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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.