Context
In this article, we want to give you an overview of Icons usage, as well as Home Screen images. Let's go one by one!
Before we start...
...please remember this: your Icons should be as simple and easy to interpret as possible. The User seeing an icon should quickly and fully understand what it means and what it does. Keep in mind that your Brand might serve Customers from all over the globe and different walks of life - which is why you should choose symbols that are universal and have the clearest meaning possible.
For example:
The icon on the left is the bad one. It has too many colors, it isn't the right size, it isn't properly cropped, and it's too detailed.
The icon on the right is the good one. It is simple, correctly sized and cropped. And, well, we've made it for you :)
Icons
Iconography is one of the most pivotal parts of the user interface. It's a visual language that represents commands, content and reveals the meaning behind functionality. The icons should always represent simple visual metaphors that Users can understand and recognize instantly.
You can choose from two sets of icons provided by us, or you can create your own by following our icon guidelines below.
Please note: you can always change icon colors in Customization Center so they match your Brand better.
Figma icon sets
Large icons
Large icons are used in several places in the app. You should design them according to the style of your Brand or you can use the ones provided in the set. If you want to replace only some of the icons in the set, make sure that new icons follow the visual style of other icons in the set.
Requirements
- Icon size: 48x48px
- Format: SVG
- Proper naming convention
Order type icons
Based on which order types your Brand's app has enabled, the proper icons should be provided.
Takeout selection
If your Brand's app has enabled Curbside as an Order Type, these icons should be provided.
Offer / Reward - Redemption channels
Based on which Redemption Channels your Brand's app has enabled, the proper icons should be provided.
Smart orders - Travel modes
If your Brand's app has enabled Smart Orders as a feature, these icons should be covered.
Medium icons
These are the most commonly used icons in the app. You should design them according to the style of your brand or you can use these ones provided in the set.
Requirements
- Icon size: 24x24px
- Format: SVG
- Proper naming convention
Thinner Icon Set Preview
Bolder Icon Set Preview
Small icons
Used in very few places in the app. You should design them according to the style of your brand or you can use the ones provided in the set.
Requirements
- Icon size: 16x16px
- Format: SVG
- Proper naming convention
Other icons
This group includes icons used on the map screen, as well as plus and minus icons used on the item screen. You should design them according to the style of your brand or you can use the ones provided in the set.
Requirements
- Icon size: Defined below each icon
- Format: SVG
- Proper naming convention
Please note: If your app will use languages like Arabic or Hebrew, you should provide some RTL (Right to Left) icons. You will find all necessary icons in the Figma file in RTL sections (for both bolder and thinner icon groups).
If you plan to create your own icon set, you should follow the naming that we already use. The names of the icons you will find in Figma in the layers sidebar.
Comments
0 comments
Please sign in to leave a comment.