---
title: "How to Configure the Tab Bar Icons"
source: "https://docs.nexcess.com/software/learndash/configure-tab-bar-icons/"
description: "Introduction The Tab Bar and More Menu in the Learndash App provide key navigation for your mobile users. With the updated Icon Pack, you can enhance visual con…"
vertical: "Software"
area: "LearnDash"
date: "2025-09-23"
last_modified: "2026-07-02"
---

# How to Configure the Tab Bar Icons

## **Introduction**

The Tab Bar and More Menu in the Learndash App provide key navigation for your mobile users. With the updated Icon Pack, you can enhance visual consistency, choose from modern display styles, or revert to legacy icons for a familiar look.

This guide walks you through customizing the Tab Bar icons, applying styles, and previewing changes in the app.

## **Access the Tab Bar Settings**

1. In your WordPress Dashboard, go to **Learndash App > Menus**.
2. Locate the **Tab Bar Menu** section.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXfHzYUMaOEtvnor0ouyeZws9RntylykjZedWNpBSzs0o6QDXjdrkOTPmgwcZ_x41nW7_q_eOHMa7tdxwbwbC-7gf7Aksyp5wQstSBqI-WO-Zgjjy4YTjqFyf5Wdsch38kJjOngD2Q.png)## **Customize Tab Bar Menu Options**

1. To configure an item, click the dropdown arrow beside it (e.g., **Home**).

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXcJbiN0nX-_WLD2TgvnhSiTmECnQSjXcTjh9NRRP3cbhbVVBtjmpHFoTdXhZHcw_OLQKlTn_xQGksFeQkGqeSObW3wXwc1BL2QarLJk_BjnJuFjflE_yl5B9NVc4_F7IBKg0CVAIg.png)2. Under **Item Icon**, click the icon box to open the **Icon Selection Panel**.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXcvscykys3kqOm_LGmDLsNHZlXyBlDeUNC-tY9bxMtXjSNrAzm_gcD_M4W_AaKsQyDIiG4cklhK6iGt5qtOlKXSnMEVYMcl2qe8W3a8f00PQZZPBeWz97nToqzKard85EEQKHqx6w.png)## **Select and Update Icons**

1. Choose an icon from the **Learndash/LegacyIcon Pack**.
2. Customize the icon using these settings:  
    
    - **Icon Style**: Filled or Outline
    - **Box Style**: Circular or Square
    - **Icon Color**: Choose your brand color

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXd405QMLe-_1S3Sms2qj-S8lbW182v7DOi-FvsYWUBGJtJIESaBFDFAhrJZcaZEuf2FTxrtuCS_7oDof50QKuNJxItKmvpwoX27m1gjGUQr2jsaUrqRWMHjR6-_wfHadzgm74T.png)3. Click **Select Icon** to confirm your selection.

## **Preview and Save Changes**

1. View the live **icon preview** on the right-hand panel.
2. Once satisfied, click **Save Menu** to apply your changes.
3. The app will reflect updated icons the next time it’s launched.

## **Using the Legacy Icon Pack**

1. In **Item Icon** settings, switch to the **Legacy** tab.
2. Choose your preferred icon from the classic set.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXdVd4657gJF_NVuHMg9hNEIN2LgqGbtY-o9q8lnnJcGM1Vxd8FlSmJ9fzLDJ_Qn61F80hPQbpqs7axRK043ZZqKh-uWFqsbUOtK9u7riI14stBGcq-CDdpw7LGJsLIrNgCBcgdk.png)3. Click **Select Icon**, then **Save Menu**.

Note: You can mix icons from both the **Legacy** and **Updated Icon Packs**.

## **Advantages of the Updated Icon Pack**

- **Bold Filled Style for Active Tabs** – Makes navigation clearer and more intuitive.
- **Multiple Display Styles** – Choose from outline, filled, circular, or square for a custom look.
- **Improved Performance** – Faster load times and smoother rendering compared to legacy icons.

## **Troubleshooting and FAQs**

**Q: My new icons aren’t showing in the app.  
 A: Force-close and reopen the Learndash App to clear cached settings and load the latest changes.

**Q: I don’t see the new Icon Pack in the panel.  
 A: Ensure your Learndash App plugin is up to date. The updated Icon Pack is available only in recent versions.

**Q: The preview doesn’t update when I change the icon style or color.  
 A: Click **Select Icon** to confirm your choice, then reload the page or scroll to trigger a refresh in the preview panel.