Custom Icons

📘

Custom navigation icons can be added using Fontello. On the "Custom" tab click "Add Custom Icons" or “Manage Icons” to launch Fontello, and add new icons by clicking the gear icon and then clicking “Import”. We recommend uploading monochrome SVG files between 16x16px and 32x32px in size. Ensure that the CSS prefix is set to "icon-" and "add after icon name" is unchecked. When complete select and highlight the icons you wish to load to your app and then click “Export font” to return to your app. You can then use your custom icons for all native navigation components.

1. Open Median App Studio and open the app you'd like to edit.

2. Click "Edit App"

3. Click on Native Navigation in the Configuration Menu

4. Choose Bottom Tab Bar

5. Scroll to the bottom of the page, to the Bottom Tab Bar Visual Editor section. If there is no existing Bottom Tab Bar, click Add Bottom Tab Bar.

6. Click on the icon to be changed to a custom icon.

7. Within the pop-up window, click on the icon.

8. Within that pop-up window, at the top, choose "Custom" and "Add Custom Icons".

9. A Fontello page will open in the right-hand panel. Click on the wrench icon, then Import, and import the .svg file that you would like to upload.

10. Ensure that the "CSS prefix:" is set to "icon-" and "add after icon name" is NOT checked. The font name beside the wrench icon must always be set to "custom-icons".

11. When done, select and highlight the icons you wish to load to your app and then click “Export font” to return to your app. You can then use your custom icons for all native navigation components.