eCommerce
Restaurant
Grocery
Pickup & Delivery
Online Courses
Employee Communication
Content Creators
Bookings
Newspaper
Radio
Schools
Events
Travel guide
Faith
Organizations
Custom apps
PRODUCT RESOURCES
TOPICS
TECHNOLOGY
MOBILE APPS RESELLERS
DISCOVER
[Video Tutorial] How to Change the Icons of Your App's Menu
Written by GoodBarber Team on
When you design your app, you may choose between a variety of different navigation modes.
Some of those navigation modes include icons for each individual section.
In this video tutorial, we’re going to show you how to:
- Add sample sections to your app to visualize the structure of the menu
- Set the icons of your app after you’ve chosen your navigation mode
- Upload your own personal icons
Some of those navigation modes include icons for each individual section.
In this video tutorial, we’re going to show you how to:
- Add sample sections to your app to visualize the structure of the menu
- Set the icons of your app after you’ve chosen your navigation mode
- Upload your own personal icons
You can choose and configure the icons of the menu of your app from the Design menu of your backend.
On the right-hand side, you’ll see the five-step process to help guide you through the customization of your app.
The settings of the menu icons are changed in the first step, menu.
You will see all of the navigation templates that you can choose from; however, they don’t all include icons. Only the templates TabBar, Little Swipe, Grid and Classic TabBar use icons.
If you are creating the design of your app for the first time, we suggest you do this process after you’ve chosen the sections of your menu.
On the right-hand side, you’ll see the five-step process to help guide you through the customization of your app.
The settings of the menu icons are changed in the first step, menu.
You will see all of the navigation templates that you can choose from; however, they don’t all include icons. Only the templates TabBar, Little Swipe, Grid and Classic TabBar use icons.
If you are creating the design of your app for the first time, we suggest you do this process after you’ve chosen the sections of your menu.
Add sample sections to your app to visualize the structure of the menu
To obtain a quick preview of what your menu will look like, you can add sample sections from the Sections menu. Click on “Add sample”, and choose from one of the different types of sample sections that you can add, such as articles, photos, videos, etc.
Sample sections will help you create the structure of your menu by focusing your attention only on the design.
If on the other hand, you want to first know exactly how many and what kind of sections of your app will have, you should leave the icon modification until the end.
Sample sections will help you create the structure of your menu by focusing your attention only on the design.
If on the other hand, you want to first know exactly how many and what kind of sections of your app will have, you should leave the icon modification until the end.
Set the icons of your app after you’ve chosen your navigation mode
Now, by going back to the navigation mode menu and choosing a navigation mode that uses icons, you will be able to configure the settings of that navigation mode, where you’ll also be able to choose and modify the icons.
By clicking on an icon, the library is opened, and you can choose an icon just by clicking on it.
Every time you change the icon, you can immediately see the result in the preview.
Upload your own personal icons
If you don’t want to use standard icons, and you want to upload your personal icons, you will have to open the icon library again, choose the “Personal icons” label and upload your files. Pay attention to respect all the requirements. It must be a white image with a transparent background, in the portable network graphics, or .png. format, and it must measure exactly 260 * 260 pixels.
If you want to change the icons after having already chosen a navigation mode, click on the “Edit” button under the preview of your selected navigation mode template.
To apply the new icons to the app, you’ll need to go to the “Publish” menu, then to the changelog, and click on “Update now”. You’ll see a list of all of the modifications you’ve made, and click on “Update”.
As soon as the update is completed, the new icons will be applied to your app’s menu.
If you want to change the icons after having already chosen a navigation mode, click on the “Edit” button under the preview of your selected navigation mode template.
To apply the new icons to the app, you’ll need to go to the “Publish” menu, then to the changelog, and click on “Update now”. You’ll see a list of all of the modifications you’ve made, and click on “Update”.
As soon as the update is completed, the new icons will be applied to your app’s menu.