# App icon

> An app icon is the image that stands for an app on the home screen, in search and in settings. Both platforms build it from a background and foreground layers, and the system applies the mask and the effects.

Page: https://www.appetiteui.com/glossary/app-icon. App icon design for iOS and Android: layers and safe zone. Also called Adaptive icon, Launcher icon, Layered icon.

## Why it matters

The icon is the one piece of design people see before they open the app, and the system crops, masks and lights it, so a design that ignores the safe zone is cut.

Layers let the system respond to the environment, so the design supplies shapes and not finished effects.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | App icon, layered with Liquid Glass attributes | Adaptive icon: foreground and background layers | Not drawn |
| Layers | A background layer and one or more foreground layers | Foreground and background, plus an optional monochrome layer | See below |
| Size and safe zone | The system scales the effects with the icon size | Layers 108 by 108 dp, safe zone 66 by 66 dp, logo at least 48 dp | See below |

## In Appetite UI

The kit does not draw an app icon. It holds the brand marks of Apple system dialogs, and the app icon is yours to design at the sizes of each platform.

## Example

An Android icon keeps the logo inside the inner 66 dp of a 108 dp layer, so a circular or squircle mask never cuts it, and adds a monochrome layer for themed icons.

## Common mistakes

- Baking a shadow or mask into the layers, which the system adds.
- A logo larger than the safe zone, which a mask clips.
- One flat image where layers would give depth.
- Text in the icon that is unreadable at small sizes.

## Questions

### What size is an Android adaptive icon?

Each layer is 108 by 108 dp. The inner 66 by 66 dp is never clipped by a mask, and Android Developers asks for a logo of at least 48 dp that does not exceed 66 dp.

### Do iOS icons use layers?

Yes. iOS and iPadOS icons include a background layer and one or more foreground layers, and the system gives them Liquid Glass attributes.

## Sources

1. [Apple Human Interface Guidelines: App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons)
2. [Android Developers: Adaptive icons](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive)

## Related

- Docs: [Assets](https://www.appetiteui.com/docs/assets)
- Glossary: [Liquid Glass](https://www.appetiteui.com/glossary/liquid-glass)
- Glossary: [Points and dp](https://www.appetiteui.com/glossary/points-and-dp)
- Glossary: [Launch screen](https://www.appetiteui.com/glossary/launch-screen)