Skip to main content

App Store: Icon Spec

Drop — App Store Icon Specification

Last updated: 2026-02-21 Status: Design specification ready, icon creation pending

Platform Requirements

iOS App Store

Requirement Specification
Size 1024 × 1024 px
Format PNG (24-bit)
Transparency NOT allowed
Rounded corners NOT allowed (iOS system adds them automatically)
Color space sRGB or Display P3
Layers Flattened (no alpha channel)

Important: iOS automatically applies rounded corners and other effects. Design for a square canvas, but consider that ~10% of corner area will be masked.

Android / Google Play

Requirement Specification
Size 512 × 512 px
Format PNG (32-bit)
Transparency Allowed (but not required)
Rounded corners Manual (can include in design)
Color space sRGB
Adaptive icon Provide foreground + background layers for Android 8.0+

Adaptive Icon (Android 8.0+):

  • Foreground: 512 × 512 px (icon artwork)
  • Background: 512 × 512 px (solid color or simple pattern)
  • Safe area: Center 264 × 264 px (guaranteed visible on all shapes)

Drop Brand Identity

Color Palette

Color Hex Usage
Drop Green (Dark) #064E25 Primary gradient start, background
Drop Green (Light) #0B6E35 Primary gradient end, foreground
Drop Gold #D4A017 Accent, highlights, glow effect
White #FFFFFF Text, contrast elements

Logo Reference

Current Drop logo (web + mobile):

  • Shape: Rounded rectangle with green gradient (#0B6E35 → #064E25)
  • Typography: "Drop" wordmark in white, Fraunces font (serif, bold)
  • Icon element: Currency exchange "o" with circular arrows + "kr" inside
  • Accent: Gold dot top-right of the "p"

Location:

  • Web: src/drop-app/components/drop-logo.tsx
  • Mobile: components/DropLogo.js
  • Brand assets: brand/ directory

Icon Concept Options

Option 1: Drop "D" Lettermark (RECOMMENDED)

Design:

  • Large "D" letter in Fraunces serif font (700 weight)
  • Green gradient background (#0B6E35 → #064E25, 135° diagonal)
  • White "D" with subtle shadow for depth
  • Gold accent: small circle or dot positioned top-right or inside the "D" curve
  • Optional: Currency symbol "kr" subtly integrated into the "D" negative space

Rationale:

  • Simple, scalable, recognizable at all sizes
  • Strong brand association with "Drop" name
  • Serif "D" gives premium, trustworthy feel (important for finance)
  • Green + gold = Drop brand colors

Implementation:

  1. Create "D" lettermark in Figma (vector)
  2. Apply gradient background
  3. Add gold accent for visual interest
  4. Export at required sizes
  5. Test visibility at small sizes (48px, 72px, 96px)

Option 2: Currency Exchange Symbol

Design:

  • Circular icon with two curved arrows (↻ circular exchange motif)
  • "kr" currency symbol in center
  • Green gradient background
  • Gold glow or accent around arrows
  • Minimalist, flat design

Rationale:

  • Directly communicates core function (money exchange/transfer)
  • Familiar symbol (used in Drop logo "o")
  • Works well at small sizes
  • Less text-dependent than lettermark

Implementation:

  1. Design circular arrows in Figma (vector paths)
  2. Place "kr" in center (DM Sans or Fraunces font)
  3. Apply gradient and glow effects
  4. Export and test

Option 3: Drop + Currency Hybrid

Design:

  • "Drop" wordmark compressed to fit square canvas
  • Currency arrows integrated into the "o"
  • Green gradient background
  • Gold dot accent on "p"
  • Rounded rectangle container (similar to current logo)

Rationale:

  • Most direct translation of current logo
  • Full brand name visible
  • Recognizable for users who know the logo

Challenges:

  • Text may be hard to read at small sizes (48px icon on home screen)
  • Horizontal logo doesn't fit square canvas well
  • Risk of looking cluttered

Recommendation: Use this only if lettermark or symbol don't test well.

Design Principles

1. Simplicity

  • App icons must be recognizable at 48px × 48px (smallest size on device)
  • Avoid fine details, thin lines, or complex shapes
  • Limit to 2-3 colors max

2. Memorability

  • Unique shape or color combination
  • Avoid generic finance icons (e.g., dollar sign, piggy bank)
  • Drop brand = green gradient + gold accent — use this consistently

3. Scalability

  • Test at multiple sizes: 48px, 72px, 96px, 144px, 192px, 512px, 1024px
  • Icon should be clear and legible at all sizes
  • Avoid gradients that lose contrast when scaled down

4. Platform Fit

  • iOS: Modern, flat, colorful, rounded by system
  • Android: Material Design, adaptive, bold
  • Consider context: app icon sits among many others — must stand out

5. Trust & Professionalism

  • Finance app = users trust it with money
  • Avoid playful or cartoonish styles
  • Premium feel: clean typography, quality gradients, subtle shadows

Production Workflow

Step 1: Design in Figma

  1. Create new Figma file: "Drop App Icon"
  2. Set canvas to 1024 × 1024 px (iOS size)
  3. Design icon using Drop brand colors and fonts
  4. Consider safe area for Android adaptive icon (center 264 × 264 px)
  5. Export variations for review

Step 2: Review & Iterate

  1. Export 3-5 icon concepts
  2. Test at small sizes (48px, 72px, 96px)
  3. Review with Alem for approval
  4. Iterate based on feedback

Step 3: Finalize Assets

iOS:

  • Export 1024 × 1024 px PNG (no transparency, flattened)
  • Verify no rounded corners in design
  • Validate with App Store Connect's icon validator

Android:

  • Export 512 × 512 px PNG (standard icon)
  • Export adaptive icon layers:
    • Foreground: 512 × 512 px PNG (transparent background)
    • Background: 512 × 512 px PNG (solid color or pattern)
  • Test with Android Asset Studio preview tool

Step 4: Implement

  • iOS: Add to ios/Drop/Images.xcassets/AppIcon.appiconset/
  • Android: Add to android/app/src/main/res/mipmap-*/ic_launcher.png
  • Android adaptive: Add foreground/background to mipmap-anydpi-v26/

Testing Checklist

  • Icon is visible and clear at 48px × 48px
  • Icon stands out among other app icons (test on real device home screen)
  • Gradient doesn't wash out at small sizes
  • Text (if any) is legible at all sizes
  • Colors match Drop brand palette
  • No transparency issues on iOS (must have solid background)
  • Android adaptive icon safe area respected (center 264px circle)
  • Icon looks good on both light and dark backgrounds
  • No copyright issues (all elements original or licensed)
  • Final review by Alem

Technical Export Settings (Figma)

iOS Export (1024 × 1024 px)

Format: PNG
Scale: 1x (already at 1024px)
Suffix: @ios
Background: Opaque (white or brand color fill)
Color space: sRGB
Compression: None (lossless)

Android Export (512 × 512 px)

Format: PNG
Scale: 1x (already at 512px)
Suffix: @android
Background: Transparent (if using adaptive) or opaque (if standard)
Color space: sRGB
Compression: None (lossless)

Android Adaptive Layers

Foreground layer:
- 512 × 512 px PNG
- Transparent background
- Icon artwork centered in safe area (264px circle)

Background layer:
- 512 × 512 px PNG
- Solid color (#0B6E35 or gradient)
- No transparency

Brand Consistency Notes

Drop logo evolution:

  1. Original: Wordmark "Drop" with currency "o" (circular arrows + "kr")
  2. App icon: Should be simplified version — lettermark or symbol

Do:

  • Use official Drop green gradient (#0B6E35 → #064E25)
  • Include gold accent (#D4A017) for brand recognition
  • Use Fraunces (serif) for lettermarks or DM Sans (sans-serif) for symbols
  • Maintain premium, trustworthy feel

Don't:

  • Use system fonts (Arial, Helvetica) — breaks brand consistency
  • Use bright/neon greens — not Drop brand
  • Include too much text — icon must work at 48px
  • Copy competitor icons (Vipps, Wise, Revolut) — must be unique

Approval Process

  1. Design concepts: Create 3 variations in Figma
  2. Internal review: John reviews for brand consistency + technical requirements
  3. Alem approval: Final design decision (visual + brand fit)
  4. Asset generation: Export iOS + Android at required sizes
  5. Device testing: Preview on real iOS + Android devices
  6. Store submission: Upload to App Store Connect + Google Play Console

References

  • Apple HIG (App Icons): https://developer.apple.com/design/human-interface-guidelines/app-icons
  • Material Design (Icons): https://m3.material.io/styles/icons/overview
  • Android Asset Studio: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
  • Drop Brand Assets: /Users/makinja/ALAI/products/Drop/brand/

Next Steps

  1. Create icon concepts in Figma: 3-5 variations (lettermark, symbol, hybrid)
  2. Export preview at multiple sizes: Test legibility
  3. Present to Alem for approval: Visual review + brand fit
  4. Finalize assets: iOS 1024px + Android 512px + adaptive layers
  5. Integrate into mobile app: Add to iOS/Android projects
  6. Submit to stores: Upload with metadata for App Store + Google Play review

Designer Notes:

For best results, use the /frontend-design skill when creating the actual icon. The skill has access to Figma and can generate professional-quality assets that match Drop's brand identity. DO NOT attempt to create SVG icons manually or use generic design tools — this has historically produced poor results.

No comments to display

Back to top