Skip to main contentIBM Design Language

App icons

Follow the design and production guidelines found here when making a new app icon. Secure required approvals from the Design Language team so that your new app icon can be added into the icon library.

Resources

Design and production guidelines

Don’t see a useful, available app icon in the master? Make your own! Follow these guidelines to ensure visual consistency and proper formatting.

  • 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

Stroke app icons feature both color and alpha channel gradients. This technique can be achieved in Adobe Illustrator using masking. Follow these guidelines to create proper gradient masks.

  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%.
Stroke app icon masking: step 1
  1. Place the artwork to be in color above the color square. Make sure the color is set to #FFFFFF white.
  2. 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.
Stroke app icon masking: step 3
  1. Open the transparency panel Window → Transparency.
  2. Group all gradients with the white icon Object → Group.
  3. Select both the new group and the color square, then click Make Mask in the transparency panel.
Play

Exporting SVGs for product and web

To be considered production-ready for product and web, confirm the following:

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

App icons for product and web are created for all background types. This ensures your icon will be accessible in any UI context. Note that these SVGs will work in product and web, but may not render correctly in Sketch. For designing in sketch, export as PNG.

  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.
Exporting for product and web: step 2
  1. Make sure your background layer is turned off.
  2. Select File → Export for Screens... from the top navigation.
  3. In the Formats section, click the gear icon to open Advanced settings for exported file types. Select SVG and enter the following settings:
Exporting for product and web: step 5
  1. In the Formats section, select the SVG format.
  2. Click Export Artboard. Your file will export to SVG.

Exporting for native OS

The app icon template makes it easy to export native app icons for any environment at every size you need. Refer to the read-me file in the template to automate your export process, or follow the guidance here to export manually.

  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.
Foreground and background layers for native OS
  1. Create your icon background in the App_Icon_Background_Color.ai file and save.
  2. Open the App_Icon_Export.ai file. The artboards should have updated to include your icon.
  3. Select File → Export → Export for Screens from the top navigation.
  4. Select the artboards you need to export:
PlatformContainer shapeArtboard
iOS, Google Play StoreSquare01
MacOSCircle02
Circular social avatarsCircle (unmasked)03
Windows UWPNone04
AndroidCustom05, 06, 07
  1. In the Formats section, click the Scale dropdown and choose Width.
Export dialog for native OS
  1. 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:

Android app icons

Android icons are primarily created in the Image Asset Studio within Android Studio, but the source images should be exported from the app icon template. Refer to the read-me file in the template to automate your export process, or follow the guidance here to export manually. For more information on the Visual Asset Studio, visit the Android app icon documentation.

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:
ScaleSuffixFormat
4xxxxhdpiPNG
  1. Click Export Artboard.
  2. Select File → Export → Export for Screens from the top navigation.
  3. Select artboard 1.
  4. In the Formats section, configure your settings to match the table below:
ScaleSuffixFormat
1x-webPNG

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.
Image Asset Studio settings for Laucher icons
  1. Choose Next to confirm the icon path and select Finish.
  2. Next, add the notification icon. In Android Studio, select File → New → Image Asset.
  3. In the Icon Type dropdown, choose Notification Icons.
  4. Import your notification asset ic_stat_xxxhdpi.png. Do not trim or add padding to the artwork. The icon name is optional.
Image Asset Studio settings for notification icons
  1. Choose Next to confirm the icon path and select Finish.
  2. Finally, place the 512 px Google Play Store image within your project folder at /app/src/main.

Approval process

App icons must go through a design review process to ensure consistency and proper representation of the IBM brand across all environments.

The process begins when you create a GitHub issue. Design review and approval typically take 14–21 days from issue creation, depending on the number of icons contributed.

If your submission is accepted, the team will assign someone to your issue. If changes are needed, the team will note them in the issue and may return your submission with recommendations or suggest reworking the icon based on feedback from the Design System and Brand teams.

Once the submission is approved it will then go through our process to be included into the IBM app icon gallery. Please submit app icons for approval by creating an issue.

Submission requirements

You must include the following files in your submission (if applicable). App store image templates are provided within the App_Icon_Template.zip file from the app icons repo.

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