Image Asset Guidelines
General Setup Images
These are static assets that will be used inside the app's code. They must be provided by the client and will be implemented in the app by a developer.
| Asset | Description | File Type(s) | Dimensions | Ratio/Notes |
|---|---|---|---|---|
| Client logo square (SVG) | Brand/app icon for the app overview and header icon | SVG | - | 1:1 |
| Client logo square (PNG) | Brand/app icon for the app overview and header icon | PNG | 1024×1024px | 1:1 |
| Client logo horizontal (PNG) | Brand icon shown on the member card | PNG | Width 520px, max height 120px (horizontally rectangular) | - |
| Onboarding images | 4 images for the landing screen for non-logged-in users, with rounded corners | PNG | 900×1575px (vertically rectangular) | 4:7 |
| Splash screen images* | Icon for the initial loading screen | PNG | 960×960px (with centered 512×512px logo)* | - |
| Store logo icon(s) | Icon for a store on the map or in the store list view. At least 1 (could be the same as "Client logo square" image) | SVG | - | 1:1 |
*Splash screen image:
Use a "Clean" SVG
To ensure mobile compatibility, use SVGs that include only essential elements (paths, shapes, and direct attributes). Avoid using CSS classes, style tags, fonts, images, embedded data, filters, masks, or unnecessary groups. Use direct fill/stroke attributes instead of CSS classes for better mobile compatibility. Note that the preview in the browser might differ from how the stamp looks in the mobile app.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6H20M4 12H20M4 18H20" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
For campaign content image guidelines (images added through the CMS), see the Campaign Content Image Guidelines.