Skip to main content
MotiSig
Get Started

Notification icons reference

"What size should my notification icon be, and what do iOS, Android, and Web actually require?" Use your app icon on iOS (there's no separate notification icon), ship a monochrome status bar icon on Android (plus an optional full-color large icon), and provide image/icon/badge URLs for Web Push with sizes that vary by platform. That's the practical baseline.

From there, your job is to make the icon readable at tiny sizes, recognizable in a crowded lock screen, and consistent with each platform's rules. A notification icon isn't a brand billboard; it's a fast visual cue. If you're using MotiSig (an autonomous AI Retention Agent) or any messaging stack, the icon is still the first impression-so treat it like a UI component with constraints, not a logo placement.

Below is a reference you can hand to designers and engineers: requirements by platform, what "notification icon size" really means in practice, and best practices that keep your status bar icon from getting ignored.

Ready to join?

Get Started For Free

iOS notification icon requirements

On iOS, you don't design a separate "notification icon." iOS uses your app icon as the visual identifier in notifications and on the lock screen. That means your notification appearance is mostly governed by your app icon asset quality, plus any notification content you send (title, subtitle, body, attachments).

Key implications:

  • App icon is the notification icon. Make sure your primary app icon reads well at small sizes and in different contexts (light/dark wallpapers, Focus modes, etc.).
  • No "status bar icon" asset. Unlike Android, you aren't providing a monochrome silhouette for the status bar.
  • Badges are separate. The red badge count is controlled by the system and your app's badge number; it's not an icon you design for notifications.

Live Activities icon (Dynamic Island / Lock Screen): If you support Live Activities, you can provide assets that appear alongside Live Activity content. Apple's Human Interface Guidelines emphasize clarity at small sizes and avoiding intricate detail. Treat Live Activity visuals like compact UI: bold shapes, minimal internal lines, high contrast.

Practical design guidance for iOS:

  • Avoid thin strokes and low-contrast gradients in the app icon-they'll blur in notification contexts.
  • Don't rely on text in the app icon. A single letter may look fine on the Home Screen, but it often becomes unreadable in notification rows.
  • Test your icon against real lock screen photos (busy backgrounds) and in both Light and Dark appearances.

If you're seeing "inconsistent" icon rendering on iOS, it's almost always an app icon asset issue (wrong sizes in the asset catalog, overly detailed artwork), not a notification-specific icon setting.

Android notification icon requirements

Android is the platform where "notification icon" usually means two different things: the small icon shown in the status bar/notification header, and the optional large icon shown inside the expanded notification content.

1) Small icon (status bar icon): monochrome silhouette

Your status bar icon (the small notification icon) should be a simple, solid, monochrome silhouette. On many Android versions/skins, the system tints this icon (often white), which is why detailed or multicolor artwork fails.

  • Use a single-color glyph with transparent background.
  • Avoid gradients, multiple colors, and fine detail.
  • Keep the shape recognizable at a glance.

Data point to ground decisions: Android's status bar icons are effectively tiny-often rendering around 24dp in UI terms-so details smaller than a couple pixels simply won't survive.

2) Large icon: full color (optional)

The large icon can be full color and appears in the notification content area (e.g., a user avatar, product image, or brand mark). Not every notification style uses it, and some OEM skins downplay it-so don't depend on it for core recognition.

Material 3 guidance (what to follow)

Material guidance pushes you toward:

  • Clear, geometric forms
  • Consistent visual weight
  • High contrast and strong silhouettes

Concrete example: If your brand mark is a complex "M" with inner cuts and gradients, your Android small icon should be a simplified "M" silhouette (no inner strokes), while the large icon can use the full-color mark.

Engineering note: On Android, the small icon is typically set via setSmallIcon() and should point to an appropriate drawable (often a white-only asset). The large icon is set via setLargeIcon().

Web push notification icons

Web Push notifications typically let you specify multiple image fields, and different browsers/platforms choose how to display them. In practice, you'll encounter three common URLs:

  • icon: the primary image shown with the notification (often your brand/app icon).
  • image: a larger hero image displayed in some layouts (supported variably).
  • badge: a small monochrome mark used in certain Android contexts (not consistently shown everywhere).

Platform sizing differences (what matters):

  • Browsers don't render at one universal "notification icon size." They downscale/upscale to fit their UI.
  • Desktop Chrome, Android Chrome, and Safari have different presentation rules. Your job is to provide assets that look good when resized.

Practical sizing guidance (safe defaults):

  • Provide a square icon that still reads at small sizes (think "app icon discipline").
  • Provide a higher-resolution file than you think you need so downscaling stays crisp (but keep file size reasonable).
  • If you use a badge, make it a bold, simple silhouette (similar philosophy to Android's small icon).

Concrete example: For a cart-abandonment push, your icon can be your store mark, while your image can be the product photo. The badge can be a simplified mark that remains legible when the OS reduces it to a tiny overlay.

Operational tip: Host these assets on HTTPS, keep URLs stable, and avoid frequent changes-some clients cache aggressively. If you're using an automation tool like MotiSig to orchestrate campaigns, treat icon URLs as part of your message template QA: verify how they render on Android Chrome vs. desktop.

Designing icons that don't get ignored

A notification icon succeeds when it's recognized in under a second. That's less about "branding" and more about visual signal under constraints: tiny sizes, low attention, and noisy backgrounds.

1) Simple silhouettes win at small sizes

Your best-performing notification icon is usually the simplest version of your brand mark. Aim for:

  • One dominant shape
  • Minimal internal cutouts
  • No thin strokes
  • High figure/ground contrast

If your icon depends on negative space details, it will collapse into an ambiguous blob in the status bar.

2) Avoid text in icons

Text is almost always a mistake for notification icons:

  • It becomes illegible when scaled down.
  • It competes with the notification title (which already contains text).
  • It's harder to localize (and looks odd across scripts).

If you must include a letter, treat it as a bold geometric glyph, not typography.

3) Test against busy lock screens (realistic conditions)

Design tools lie. Real lock screens include:

  • Photos with high frequency detail
  • Multiple notifications stacked
  • Different brightness levels and color themes

Actionable checklist (use this before you ship):

  • Does the icon still read at ~24dp (Android small icon scenario)?
  • Does it work in both light and dark backgrounds without relying on color?
  • Is the silhouette recognizable without internal detail?
  • Does it look distinct next to common apps (Messages, Gmail, Slack)?
  • Have you reviewed it on at least one real Android device and one iPhone lock screen screenshot?
  • For Web Push: have you tested Chrome on Android and a desktop browser?

Treat your notification icon like a UI affordance: if it's not instantly identifiable, it's not doing its job-no matter how "on brand" it is.

Notification Icon FAQ

What size should a notification icon be? It depends on platform and context. iOS uses your app icon (so you follow Apple's app icon asset requirements). Android's small notification/status bar icon renders very small (often around 24dp), so design a simple monochrome silhouette that survives heavy downscaling. For Web Push, provide a square icon at a reasonably high resolution so browsers can scale it cleanly; don't assume a single fixed pixel size will be used everywhere.

Why is my Android notification icon white? Because Android often tints the small notification icon to match the system UI (commonly white). If you provide a full-color icon for the small icon slot, Android may flatten/tint it, causing it to appear white or lose detail. Use a proper monochrome silhouette asset for the status bar icon and reserve full color for the large icon or notification content images.

What are app notification symbols on Android? "App notification symbols" on Android typically refer to the small notification icon shown in the status bar and notification header-your app's simplified glyph that indicates which app sent the notification. It's distinct from the launcher icon and should be designed as a clean, monochrome mark for maximum legibility.

Can I customize notification icons in Web Push? Yes-most Web Push payloads allow you to set an icon URL, and sometimes badge and image URLs depending on browser support. The exact rendering varies by platform/browser, so you can customize what you send, but you can't fully control how each client displays it. Your best bet is to provide clean, high-contrast assets that still work when resized or cropped.