Icons

Convey meaning through symbols.

Our icons are heavily inspired by the platforms our apps live on, and they feel right at home. When appropriate icons are not available, we make our own versions for every single platform based on their own system’s metrics and principles.

Android

Material Design

We source the majority of our Android UI icons from Google’s Material Design. This helps us move quickly and maintain visual consistency.

Guidelines

Material Design

  • Always use the “filled” theme
  • Use SVGs instead of raster images

iOS

We source our icons from the system and SF Symbols. SF Symbols can be used in apps running on iOS 13 and later. To browse the full set of symbols, download the SF Symbols app.

Guidelines

  • For custom icons, create @1x, @2x and @3x versions so they look pixel-perfect
  • Use raster images instead of vector data

Web

For web apps, we prefer existing icons designed for iOS.

Creating custom icons

Create recognizable, highly-simplified designs

Too many details or striving for metaphor that is too far fetched can be confusing. Icons should be universally recognizable.

Make sure icons are legible

In general, solid icons tend to be clearer than outlined icons. If an icon must include lines, coordinate the weight with other icons and your user interface typography.

Avoid including text in an icon

If you need text, display a label beneath the icon and adjust its placement accordingly.

Provide accessibility labels

Icons must be accessible to users that rely on screen readers (such as VoiceOver) to navigate user interfaces.

Platform Icons

These icons represent common sections, tasks, or actions across our products.

Colored icons for rows

Notifications Cornershop UI Represents user notification settings.
Payments Yellow Represents the current payment method, or a list of payment methods.
Delivery Cornershop UI Where to deliver an order. A list of addresses.
Profile Purple User profile settings such as name and avatar.
Coupons Green Redeem a promotion code, or see available credits.
Orders Dark Gray A history of placed orders.
Phone Green Set a phone number.
Promote Cornershop UI Indicates a way for users to promote our brand, like a referral program.
Message Green Used to indicate a field to leave a message.
Support Pink Contact customer service or look up support documents.
Bug Report Purple Report a bug.
Dubious Dark Gray Describes an action or element that has a level of uncertainty.
Warning Dark Gray Displayed alongside a warning.
Blocked Dark Gray An action that has been prohibited.
Subscription Cornershop UI User's subscription settings for Cornershop Pop.
Discontinued Dark Gray Displayed on products that were discontinued.
Seasonally Unavailable Dark Gray A product that's not available during some seasons of the year.
Money Green Represents a task that rewards the user with credits.
Products Cornershop UI Represents a list of products in an order.
Privacy Gray Privacy settings or a link to a privacy page.
About N/A Displays the about screen of an app.
Store Orange Represents the concept of a store, or signing up for Cornershop Stores.

Indicators and badges

Delivery Badge Cornershop UI Describes the next available delivery schedule for a store.
Pricing Badge Black Describes information related to pricing, such as policies.
Subscription Badge Cornershop UI Special pricing or discounts for an active Cornershop Pop subscription.
Surge Indicator Green 2 Surge pricing because of difficult circumstances.
Bike Black Transport by bike.
Vespa Black Transport by motorcycle.
Walking Black Transport by foot.
Car Black Transport by car.