Adding Custom Tab Bar and More Screen Icons in MemberPress App

You can personalize your MemberPress App's navigation by uploading your own custom icons for the Tab Bar and More Screen. This gives your app a branded, polished look that aligns with your visual identity. This guide walks you through uploading custom icons, applying the Color Fill feature, and testing them on both iOS and Android devices.

Understanding Custom Icon Feature

Custom icon feature requirements define configurations for personalized navigation branding through uploaded icon assets and color customization.

Icon upload capability enables custom image replacement for default navigation icons throughout the app interface. Custom icons strengthen brand identity and visual consistency across navigation elements.

Color fill functionality converts white icon areas to transparent and overlays brand colors for cohesive styling. Color application ensures icons match the overall app theme and color scheme.

Cropping adjustment allows icon boundary modification, ensuring proper fit within navigation constraints. Proper cropping prevents distortion and maintains icon clarity across devices.

Style customization provides filled or outline icon variations with square or circular container options. Style flexibility accommodates different design preferences and brand guidelines.

Cross-platform consistency ensures custom icons display correctly on both iOS and Android devices. Uniform appearance maintains brand recognition regardless of user platform.

Opening Tab Bar Settings

Tab Bar settings access enables custom icon upload and configuration for navigation menu items.

1. In your WordPress Dashboard, go to Dashboard > MP App > Menu > Tab Bar.

2. The live Tab Bar preview will appear on the right.
   
3. Toggle the preview to More Screen si nécessaire.

Uploading Custom Icon

Custom icon upload replaces default navigation icons with branded image assets for personalized appearance.

1. Click the dropdown arrow beside a Tab Bar menu item (e.g., Home).

2. Cliquez sur Item Icon.

3. Aller à the Custom tabulation.
4. Cliquez sur le bouton Upload Icon, then select a PNG, SVG, or JPEG file with a transparent background.

Cropping and Applying Icon

Icon cropping adjusts uploaded image boundaries, ensuring proper fit and display within the navigation interface.

1. In the crop dialog, adjust the icon edges to fit within the square.

2. Cliquez sur Terminé, then click Use This Icon.
   
3. If the sizing feels off, delete the icon and re-upload with better cropping.
   
4. Cliquez sur Update Menu pour enregistrer les modifications.

Using Color Fill to Match Styles

Color fill application converts white icon areas to transparent and overlays brand colors for cohesive styling.

1. Open the icon settings for your custom icon.
   
2. Activer le Color Fill case à cocher.

3. Cliquez sur le bouton Icon Color swatch and pick your brand hue.
   
4. Choisir Icon Style (Filled or Outline) and Box Style (Square or Circular).
   
5. Cliquez sur Use This Iconalors Update Menu to save.

Remarque : Color fill converts white areas into transparent and overlays your chosen color.

Repeating for More Screen Menu

More Screen menu configuration applies custom icons to secondary navigation items, maintaining consistent branding.

1. Switch to the More Screen Menu onglet sous Dashboard > MP App > Menu > Tab Bar.

2. Repeat the upload, crop, and color fill steps for each More Screen menu item.|
   
3. Cliquez sur le bouton Sauvegarder le menu when all icons are in place.

Testing in App

App testing verifies custom icon display correctness across platforms, ensuring proper implementation and appearance.

1. Force-close the MemberPress App on your device.
   
2. Reopen the app to load the latest icon settings.
   
3. Confirm that custom icons display correctly on the Tab Bar and More Screen across iOS and Android.