How do I add my own home screen icons?

Shoutem provides a couple of stock icon sets for you to use, but to fully customize your app's look we recommend purchasing or designing your own icons.

There are many services which provide icon sets for purchase, but we recommend the following:

iStockPhoto
IconShock

These services provide icon files in vector format. You'll need to convert them to the color you need (if they're monochromatic icons), and optimally these should be saved as 110x110px PNG files.
 

Adding icons to your app

To add your own custom icons navigate to Design -> Home section of the app builder. Click on the Home page button at the top of the menu, click on any item you wish to change the icon for.
 



After you click on the Home page section, the icon placeholder will show. If you'd like to use one of our Shoutem stock icons, you can select them from the first tab. Since we've opted for Monochrome icons (in the Icons & colors -> Icon set section) you will see a section called Monochrome.

In case you've opted for Flat or Color icons, this section would be named accordingly.
 
If you'd like to use one of our Shoutem stock icons, you can select them from the first tab, called Monochrome. In case you want to upload your own icon, click on the second tab called My Icons.

 


Under this dialogue, you'll see all the additional icons you've uploaded. You can click here to upload your own custom icon. After you upload your icons, select any of those icons to use it for the menu item that you are currently editing.

Immediately upon clicking on it, you will be able to see your new icon inside the application preview screen in the app builder.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us