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 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 32px artboard for each app icon. The App_Icon_Builder.ai file on the app icons repo provides proper specs and grid lines.
• 32px app icons should have 2px 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.

   Play

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 32px 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 everything within one of the artboards. Then select File > Export selection... from the top navigation.

5. In the Formats section, select the SVG format.

6. Click Export Asset. Your file will export to SVG.

7. Repeat steps 4–6 for each artboard.

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:

   Platform	Container shape	Artboard
   iOS, Google Play, Slack	Square	01
   MacOS	Circle	02
   Circular social avatars	Circle (unmasked)	03
   Windows	None	04
   Android	Custom	05, 06, 07

   Use monochromatic dark theme (gray 10) app icons for unplated Windows assets

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:

   Scale	Suffix	Format
   4x	xxxhdpi	PNG

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:

   Scale	Suffix	Format
   1x	-web	PNG

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