How to Add Custom Tab Bar & More Screen Icons in the BuddyBoss App

Introduction

Personalize your app’s navigation by uploading your own icons for the Tab Bar and More Screen. Beyond the included BuddyBoss Icon Pack, custom uploads allow you to inject brand-specific visuals, while features like Color Fill ensure they blend seamlessly with existing icon styles.

Tutorial Video

Opening the Tab Bar Settings

1. In WordPress, go to BuddyBoss App > Branding > Tab Bar.
   
2. Confirm the Tab Bar preview appears on the right (toggle to More Screen as needed).
   

Uploading a Custom Icon

1. Click the dropdown arrow beside a Tab Bar menu item (e.g., Home).
   
2. Under Item Icon, select the Upload tab.
   
3. Click Upload Image, choose your PNG/SVG/JPEG file with a transparent background, and upload.
   

Cropping and Applying the Icon

1. In the crop dialog, adjust edges so your icon fills the square.
   
2. Click Done, then click Use This Icon.
   
3. If size feels off, delete and re-upload with adjusted cropping.
   
4. Click Update Menu to save.
   

Using Color Fill to Match Styles

1. Open the custom icon’s settings again.
   
2. Tick Color Fill to convert opaque areas white and the transparent layer to your chosen color.
   
3. Click the Icon Color swatch, pick a brand hue, then click Use This Icon.
   
4. Ensure Icon Style (Outline vs. Filled) and Box Style (Square vs. Circular) match your design, then Update Menu.
   

Repeating for More Screen Items

1. Switch to the More Screen Menu tab in BuddyBoss App > Branding > Tab Bar.
   
2. Repeat the upload, crop, and color-fill steps for each More Screen menu item.
   
3. Click Save Menu once all custom icons are applied.
   

Testing in the App

1. Force-close the BuddyBoss App on your device.
   
2. Reopen to see your custom icons in the Tab Bar and More Screen.
   
3. Verify consistent sizing, color matching, and responsive display on both iOS and Android.
   

Troubleshooting and FAQs

Q: My upload fails or the crop box is missing.
A: Confirm your file is in PNG, SVG, or JPEG format with a transparent background, then reload the Item Icon panel.

Q: Icon appears too small or large next to others.
A: Delete it and re-upload, adjusting the crop until it visually matches adjacent icons.

Q: Color Fill doesn’t work correctly.
A: Ensure the icon has exactly two layers: fully opaque shapes (to fill white) and transparent backgrounds (to fill your chosen color), then reapply Color Fill.

Q: New custom icons don’t show in the app.
A: Force-close and reopen the BuddyBoss App to clear its cache and fetch the latest icon settings.

Q: I prefer legacy icon styles.
A: In Item Icon settings, switch the Icon Pack dropdown to Legacy, then select and apply legacy icons as usual.