The app icon helps to find the app on the store and also on the home screen after installation.
An app icon is not a logo, it is a visual expression of products, services, and tools provided by Airbus.
Application icons are defined as shown here. A gradient, pictogram of your choice and logo. We carefully brought simplicity to ensure coherence.
Elements and backgrounds embrace both primary and secondary blue palettes. The pictogram inserted on top of the background always appears in white or blue.
Background coulours
App icons comes with 3 background gradient colours: Primary blue, Secondary blue and Light grey.
- Primary blue 50 to 60 (#255FCC to #063B9E)
- Secondary blue 40 to 50 (#2E9FE0 to #0B78B8)
- White to Secondary blue 10 (#FFFFFF to #E6EFF5)
Grid
Because an app icon can have multiple shapes and sizes depending on the platform device we define a safe area based on a grid.
The green area represents the safe area where to put your pictogram. It should be less than 236px per 236px.
Shapes
Your artwork shall always be based on a square shape. After exporting and uploading your file to both Android and iOS store, they will automatically apply a mask to it.
And shapes can vary between platforms.
Export
If you are using Sketch to create your app icon, please follow these steps:
- First, choose one of the 3 gradients.
- Then, insert your icon on the safe area. To display the safe area, simply show the layer called “Grid & safe area”. Your icon should be 236px per 236px size maximum.
- (See image below) Once you are ready to export, select the layer called “App-Icon_Export/icon”, all export sizes are configured on your right panel. Just press the “Export Selected…” button. You are now ready to give the files to your dev team.
If you work on Illustrator or Photoshop, please go to the links below for export specifications.
Submit your design
Please submit your design to the Airbus Design System team: design-system@airbus.com
