Configuring Tab Bar Icons in MemberPress App

Tab Bar icons provide primary navigation within mobile applications. Icon customization enhances visual consistency and brand alignment. This document explains how to customize Tab Bar icons, apply display styles, and preview icon changes within the app.

Understanding Tab Bar Icon Configuration

Tab Bar icons display at the bottom of mobile screens for quick navigation access. The icon pack provides multiple style options, including filled, outline, circular, and square variations. Legacy icons remain available for familiar appearance preferences. Icon customization affects both visual appearance and member navigation experience.

Understanding Tab Bar Structure

Tab Bar structure limits the number of directly accessible navigation items.

A maximum of four items can be displayed in the main Tab Bar. The fifth position is automatically reserved for the More Menu.

More Menu overflow contains additional navigation items beyond the four Tab Bar slots. Members tap the More icon to access overflow navigation.

Icon consistency improves navigation clarity. Use similar icon styles across all Tab Bar items for a cohesive appearance.

Accessing Tab Bar Settings

Tab Bar icon configuration occurs within the menu settings interface.

1. Naviguez jusqu'à Dashboard > MP App > Menus.
   
2. Localiser le Tab Bar Menu section.
   
3. Verify navigation items are added to the Tab Bar menu.

Customizing Tab Bar Menu Item Icons

Each Tab Bar menu item supports individual icon customization.

1. Naviguez jusqu'à Dashboard > MP App > Menus.
   
2. Locate the Tab Bar menu item requiring icon customization.
   
3. Click the dropdown arrow next to the menu item name.

4. Trouver le Item Icon section in the expanded settings.
   
5. Click the icon box to open the Icon Selection Panel.

6. Locate an icon representing the menu item function and select it.

Configuring Icon Display Styles

Display styles control icon appearance and visual emphasis.

Setting Icon Style

1. Localiser le Icon Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Filled for solid icon shapes;
   • Outline for line-based icon shapes.

3. Review the icon preview with the selected style.

Filled styles provide stronger visual weight for active states. Outline styles offer a lighter appearance for inactive states.

Setting Box Style

1. Localiser le Box Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Circular for round icon backgrounds;
   • Carré for rectangular icon backgrounds;
   • Aucun for icons without background shapes.

3. Review the icon preview with the selected box style.

Box styles add visual containers around icons. Background shapes improve tap target size and visual consistency.

Setting Icon Color

1. Localiser le Icon Color picker in the Icon Selection Panel.

2. Select whether to use the default or custom color style.

Icon colors should maintain sufficient contrast against Tab Bar backgrounds for visibility.

Using Legacy Icon Pack

Legacy icons provide a familiar appearance for apps using previous icon designs.

1. Naviguez jusqu'à Dashboard > MP App > Menus.
   
2. Open the menu item dropdown.

3. Cliquez sur le bouton L'héritage tabulation.

4. Select an icon from the classic icon set.
   
5. Cliquez sur le bouton Select Icon to confirm selection.
   
6. Cliquez sur le bouton Sauvegarder le menu pour appliquer les modifications.

Legacy and updated icons can be mixed within the same Tab Bar menu. Consistent style selection improves visual cohesion.