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. Navegue até Dashboard > MP App > Menus.
   
2. Localize o Tab Bar Menu seção.
   
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. Navegue até 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. Encontre o 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. Localize o 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. Localize o Box Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Circular for round icon backgrounds;
   • Quadrado for rectangular icon backgrounds;
   • Nenhum 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. Localize o 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. Navegue até Dashboard > MP App > Menus.
   
2. Open the menu item dropdown.

3. Clique no botão Legado guia.

4. Select an icon from the classic icon set.
   
5. Clique no botão Select Icon to confirm selection.
   
6. Clique no botão Salvar menu para aplicar as alterações.

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