App icons

• Design and production guidelines
• Making an app icon
• Exporting SVGs for product and web
• Exporting for native OS
• Approval process

Resources

App Icon Master (.ai)

App Icon Builder (.ai)

App Icon Template (.zip)

Design and production guidelines

• All app icons should be unique and not redundant with any existing app icon in the system. Look through the icons in the App_Icon_Master.ai file from the app icons repo to ensure that your proposed new icon won’t be confused with other app icons.
• All app icons should adhere to the IBM Design Language visual style.
• All app icons should comply with IBM accessibility standards.
• All app icons should be usable across all supported platforms and devices.
• All app icons should be understandable by a global audience of users, regardless of nationality or language.

Making an app icon

• Create a 32 x 32 px artboard for each app icon. The App_Icon_Builder.ai file on the app icons repo provides proper specs and grid lines.
• 32 px app icons should have 2 px padding.
• Set your workspace up from the start to snap to pixels.
• Be aware of automatic alignments which can place vectors on uneven or half pixels.

Stroke app icon masking

1. Draw a 32 x 32 px square and apply a color gradient. Set the angle to 45° and place the gradient slider locations at 10% and 90%.

2. Place the artwork to be in color above the color square. Make sure the color is set to #FFFFFF white.
3. Place black gradients on the parts of the icon to be masked. Set both gradient sliders to #000000 black, and set one slider to 0% opacity. Any part of the artwork in black will be transparent after masking.

4. Open the transparency panel Window → Transparency.
5. Group all gradients with the white icon Object → Group.
6. Select both the new group and the color square, then click Make Mask in the transparency panel.

Exporting SVGs for product and web

• All artwork and artboards must be aligned to the pixel grid.
• All strokes must be expanded Object → Expand.
• All possible shapes and paths should be combined.
• Use only linear gradients. Do not use conical gradients, radial gradients, or gradients along stroke.
• For stroke app icons, use the masking method described in the previous section. Do not use clipping masks.
• If your icon is not a stroke app icon, then you will need to place a 32 x 32 px transparent square background on each artboard. This square should have no fill or stroke to ensure that the icons maintains a squared size.

1. Download the App_Icon_Builder.ai file from the app icons repo.
2. Following app icon guidance, create the following 4 versions of your icon: dark theme, light theme, monochromatic dark theme, monochromatic light theme.

3. Make sure your background layer is turned off.
4. Select File → Export for Screens... from the top navigation.
5. In the Formats section, click the gear icon to open Advanced settings for exported file types. Select SVG and enter the following settings:

6. In the Formats section, select the SVG format.
7. Click Export Artboard. Your file will export to SVG.

Exporting for native OS

1. Download App_Icon_Template.zip from the app icons repo.
2. Place the 32 x 32 px app icon in the Place_Icon_Here.ai file. Separate foreground icon elements from background elements and place on the respective artboards.

3. Create your icon background in the App_Icon_Background_Color.ai file and save.
4. Open the App_Icon_Export.ai file. The artboards should have updated to include your icon.
5. Select File → Export → Export for Screens from the top navigation.
6. Select the artboards you need to export:

7. In the Formats section, click the Scale dropdown and choose Width.

8. Enter the final output size for the icon, and add as many scales as needed. Refer to your target platform’s documentation for sizing and naming specs. Here are some common ones:

Apple MacOS app icons

Apple iOS app icons

Windows UWP app icons

Android app icons

Exporting images

1. With your App_Icon_Export.ai file ready from the previous steps, select File → Export → Export for Screens from the top navigation.
2. Select artboards 5, 6, and 7.
3. In the Formats section, configure your settings to match the table below:

4. Click Export Artboard.
5. Select File → Export → Export for Screens from the top navigation.
6. Select artboard 1.
7. In the Formats section, configure your settings to match the table below:

Importing images to the Image Asset Studio

1. In Android Studio, select File → New → Image Asset.
2. In the Icon Type dropdown, choose Launcher Icons (Adaptive and Legacy).
3. Import your foreground asset ic_launcher_foreground_xxxhdpi.png and background asset ic_launcher_background_xxxhdpi.png. Do not trim or resize the artwork. The icon name is optional.
4. Within the Legacy tab under Google Play Store Icon, select No.

5. Choose Next to confirm the icon path and select Finish.
6. Next, add the notification icon. In Android Studio, select File → New → Image Asset.
7. In the Icon Type dropdown, choose Notification Icons.
8. Import your notification asset ic_stat_xxxhdpi.png. Do not trim or add padding to the artwork. The icon name is optional.

9. Choose Next to confirm the icon path and select Finish.
10. Finally, place the 512 px Google Play Store image within your project folder at /app/src/main.

Approval process

Submission requirements

Android

• Completed App_Icon_Builder.ai file
• 512 px Google Play Store image
• 1024 x 500 px Google Play Store Feature graphic (you may submit your own or choose an existing one)

iOS

• Completed App_Icon_Builder.ai file
• 1024 px Apple App Store image

Product and web

• Completed App_Icon_Builder.ai file
• SVGs for all versions of your icon: dark theme, light theme, monochromatic dark theme, monochromatic light theme

MacOS, WatchOS

• Completed App_Icon_Builder.ai file
• 1024 px Apple App Store image

Windows UWP

• Completed App_Icon_Builder.ai file
• 16:9 super hero art
• 3:2 poster art
• 1:1 box art