App Icon
Examples
Anatomy
iOS and Android icons are the same, but they are build in different ways according to OS requirements.
Both incorporates an Awesome icon so that the App icon is customisable. See Icons for further details on how to swap icons.
iOS App Icon consists of is a single component.
Android App Icon is an Adaptive icons and consists of is 2 components: base and icon. See Adaptive icons to discover more about this technology.
How to use
The App Icon comes in two variations: Dark and Light. They can be equally used according to needs
When to use
- Use the
App Iconcomponent to represent the application on the device's home screen or app launcher. - Utilize it in navigation menus, header bars, or any UI element where the application's branding needs to be displayed prominently.
When not to use
-
App Iconit’s not the Product logo. -
Avoid using the APP ICON component excessively within the application's interface where it may clutter the design.
-
Do not resize or modify the APP ICON component in a way that distorts its original proportions, as it may compromise brand recognition.
Please get in Touch with the Design System team mailto:global.uikit@wfp.org and COM team to ensure the choice of the customisable icon is consistent with WFP design guidelines.
Exporting asset
Bridge offers also a specific component (exporter) that allows a bulk export of all App icon asset according to OS needs.