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. Vaya a Dashboard > MP App > Menus.
   
2. Localice el Tab Bar Menu sección.
   
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. Vaya a 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. Encuentra el 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. Localice el 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. Localice el Box Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Circular for round icon backgrounds;
   • Cuadrado for rectangular icon backgrounds;
   • Ninguno 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. Localice el 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. Vaya a Dashboard > MP App > Menus.
   
2. Open the menu item dropdown.

3. Haga clic en el botón Legado ficha.

4. Select an icon from the classic icon set.
   
5. Haga clic en el botón Select Icon to confirm selection.
   
6. Haga clic en el botón Guardar menú para aplicar los cambios.

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