{"id":10468,"date":"2025-09-22T20:09:36","date_gmt":"2025-09-23T00:09:36","guid":{"rendered":"https:\/\/learndash.com\/support\/?post_type=docs&p=10468"},"modified":"2025-09-23T10:29:20","modified_gmt":"2025-09-23T14:29:20","password":"","slug":"how-to-configure-the-tab-bar-icons","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/how-to-configure-the-tab-bar-icons\/","title":{"rendered":"How to Configure the Tab Bar Icons"},"content":{"rendered":"\n

Introduction<\/strong><\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

This guide walks you through customizing the Tab Bar icons, applying styles, and previewing changes in the app.<\/p>\n\n\n\n

Access the Tab Bar Settings<\/strong><\/h2>\n\n\n\n
    \n
  1. In your WordPress Dashboard, go to Learndash App > Menus<\/strong>.
    <\/li>\n\n\n\n
  2. Locate the Tab Bar Menu<\/strong> section.
    <\/li>\n<\/ol>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n

    Customize Tab Bar Menu Options<\/strong><\/h2>\n\n\n\n
      \n
    1. To configure an item, click the dropdown arrow beside it (e.g., Home<\/strong>).<\/li>\n<\/ol>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
        \n
      1. Under Item Icon<\/strong>, click the icon box to open the Icon Selection Panel<\/strong>.<\/li>\n<\/ol>\n\n\n\n
        \"\"\/<\/figure>\n\n\n\n

        Select and Update Icons<\/strong><\/h2>\n\n\n\n
          \n
        1. Choose an icon from the Learndash\/LegacyIcon Pack<\/strong>.
          <\/li>\n\n\n\n
        2. Customize the icon using these settings:
          \n
            \n
          • Icon Style<\/strong>: Filled or Outline<\/li>\n\n\n\n
          • Box Style<\/strong>: Circular or Square<\/li>\n\n\n\n
          • Icon Color<\/strong>: Choose your brand color<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
              \n
            1. Click Select Icon<\/strong> to confirm your selection.
              <\/li>\n<\/ol>\n\n\n\n

              Preview and Save Changes<\/strong><\/h2>\n\n\n\n
                \n
              1. View the live icon preview<\/strong> on the right-hand panel.
                <\/li>\n\n\n\n
              2. Once satisfied, click Save Menu<\/strong> to apply your changes.
                <\/li>\n\n\n\n
              3. The app will reflect updated icons the next time it’s launched.
                <\/li>\n<\/ol>\n\n\n\n

                Using the Legacy Icon Pack<\/strong><\/h2>\n\n\n\n
                  \n
                1. In Item Icon<\/strong> settings, switch to the Legacy<\/strong> tab.
                  <\/li>\n\n\n\n
                2. Choose your preferred icon from the classic set.<\/li>\n<\/ol>\n\n\n\n
                  \"\"\/<\/figure>\n\n\n\n
                    \n
                  1. Click Select Icon<\/strong>, then Save Menu<\/strong>.
                    <\/li>\n<\/ol>\n\n\n\n

                    Note: You can mix icons from both the Legacy<\/strong> and Updated Icon Packs<\/strong>.
                    <\/p>\n\n\n\n

                    Advantages of the Updated Icon Pack<\/strong><\/h2>\n\n\n\n
                      \n
                    • Bold Filled Style\u00a0 for Active Tabs<\/strong> \u2013 Makes navigation clearer and more intuitive.<\/li>\n\n\n\n
                    • Multiple Display Styles<\/strong> \u2013 Choose from outline, filled, circular, or square for a custom look.<\/li>\n\n\n\n
                    • Improved Performance<\/strong> \u2013 Faster load times and smoother rendering compared to legacy icons.
                      <\/li>\n<\/ul>\n\n\n\n

                      Troubleshooting and FAQs<\/strong><\/h2>\n\n\n\n

                      Q: My new icons aren\u2019t showing in the app.<\/strong>
                      <\/strong> A: Force-close and reopen the Learndash App to clear cached settings and load the latest changes.<\/p>\n\n\n\n

                      Q: I don\u2019t see the new Icon Pack in the panel.<\/strong>
                      <\/strong> A: Ensure your Learndash App plugin is up to date. The updated Icon Pack is available only in recent versions.<\/p>\n\n\n\n

                      Q: The preview doesn\u2019t update when I change the icon style or color.<\/strong>
                      <\/strong> A: Click Select Icon<\/strong> to confirm your choice, then reload the page or scroll to trigger a refresh in the preview panel.<\/p>\n","protected":false},"excerpt":{"rendered":"

                      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…<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[288],"doc_tag":[],"knowledge_base":[283],"class_list":["post-10468","docs","type-docs","status-publish","hentry","doc_category-managing-content-for-learndash-app","knowledge_base-learndash-app"],"year_month":"2026-04","word_count":367,"total_views":"392","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Managing Content for LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":288,"label":"Managing Content for LearnDash App"}],"knowledge_base":[{"value":283,"label":"LearnDash App"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/","term_slug":"learndash-app"}],"knowledge_base_slug":["learndash-app"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=10468"}],"version-history":[{"count":1,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10468\/revisions"}],"predecessor-version":[{"id":10469,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10468\/revisions\/10469"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=10468"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=10468"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=10468"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=10468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}