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
We source the majority of our Android UI icons from Google’s Material Design. This helps us move quickly and maintain visual consistency.
Guidelines
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
NotificationsCornershop UIRepresents user notification settings.
PaymentsYellowRepresents the current payment method, or a list of payment methods.
DeliveryCornershop UIWhere to deliver an order. A list of addresses.
ProfilePurpleUser profile settings such as name and avatar.
CouponsGreenRedeem a promotion code, or see available credits.
OrdersDark GrayA history of placed orders.
PhoneGreenSet a phone number.
PromoteCornershop UIIndicates a way for users to promote our brand, like a referral program.
MessageGreenUsed to indicate a field to leave a message.
SupportPinkContact customer service or look up support documents.
Bug ReportPurpleReport a bug.
DubiousDark GrayDescribes an action or element that has a level of uncertainty.
WarningDark GrayDisplayed alongside a warning.
BlockedDark GrayAn action that has been prohibited.
SubscriptionCornershop UIUser's subscription settings for Cornershop Pop.
DiscontinuedDark GrayDisplayed on products that were discontinued.
Seasonally UnavailableDark GrayA product that's not available during some seasons of the year.
MoneyGreenRepresents a task that rewards the user with credits.
ProductsCornershop UIRepresents a list of products in an order.
PrivacyGrayPrivacy settings or a link to a privacy page.
AboutN/ADisplays the about screen of an app.
StoreOrangeRepresents the concept of a store, or signing up for Cornershop Stores.
Indicators and badges
Delivery BadgeCornershop UIDescribes the next available delivery schedule for a store.
Pricing BadgeBlackDescribes information related to pricing, such as policies.
Subscription BadgeCornershop UISpecial pricing or discounts for an active Cornershop Pop subscription.
Surge IndicatorGreen 2Surge pricing because of difficult circumstances.