> For the complete documentation index, see [llms.txt](https://support.emarketeer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.emarketeer.com/references/developer-advanced/app-navigation-icons.md).

# Changing the mobile app navigation icons

How to change the icons in a mobile app component's navigation menu by editing the app's HTML in Developer Mode.

This guide explains how to change the icons used in a mobile app component's navigation menu.

The navigation menu uses icons from [Elusive Icons](https://elusiveicons.com/icons/). You can swap them for any of the 300+ available icons by editing the app's HTML. You need Developer permissions on your user account to make these changes.

{% stepper %}
{% step %}

### Choose which icons to use

Browse the icon list at [elusiveicons.com](https://elusiveicons.com/icons/) and pick the icons you want.

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-922f897e5caeb5ad5d99295fdd51d504788535d6%2Fapp-elusiveicons-list.png?alt=media" alt="Elusive Icons icon list page"></div>

The Elusive Icons list page
{% endstep %}

{% step %}

### Look up the icon tag

Click the icon you want to use. Look for its el-tag — the icon name starting with "el-". For example, the calendar icon has the tag `el-calendar`. Note the tag — you will paste it into the HTML in a later step.

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-21565631f121da4e154e5e15200ffb8a5d740f26%2Fapp-elusiveicons-iconcode.png?alt=media" alt="Elusive Icons page for the Calendar icon"></div>

Elusive Icons page for the calendar icon
{% endstep %}

{% step %}

### Check which navigation menu style is in use

In eMarketeer, check which navigation menu style your app uses. The setting is called **Navigation Menu** and lives at the top of the Content tab for the Content block.

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-9169c2d1e9bd9aa64b88a4c4cf571e7350b47b76%2Fapp-4-1-navigation-menu-style-setting.png?alt=media" alt="Navigation Menu setting location on the Content tab"></div>

There are three navigation menu styles: Icons, Icon List, and List. Note which one you use — you only need to change icons for that style.

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-c9d7240bd25033ba18d6fc3210d4864e7b388f64%2Fapp-4-5-navigation-menu-style-combined.png?alt=media" alt="The 3 navigation menu style options"></div>
{% endstep %}

{% step %}

### Open the HTML tab

On the mobile app component's editing page, click **Enable Developer Mode** in the left-side Tools menu. Select the Content block (for example in **Tree View**, click **container1 (Content)**), click **Edit Selected**, and switch to the **HTML** tab in the right-side menu.

If you do not see the Developer Mode link, ask an account administrator to grant Developer permissions to your user account.

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-6323ad41bea6804d098193e79fd3142cfc0c1b21%2Fapp-html-tab.png?alt=media" alt="Navigating to the HTML tab in Developer Mode"></div>

Navigating to the HTML tab in Developer Mode
{% endstep %}

{% step %}

### Find the icon in the HTML

The HTML tab has two places where icons are defined. One controls the **Icon List** navigation style, the other controls the **Icons** style.

The top-level part of the HTML labels each section as `iconlist` or `icons`. Each navigation icon has its own sub-section. Inside, look for the el-tag of the icon currently in use, such as `el-time` or `el-bookmark`.

#### Iconlist HTML

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-4113c2e4c030c3e9fd96e3b5fc698b89d20ebe20%2Fapp-iconlist.png?alt=media" alt="Location of the iconlist icon code in the HTML"></div>

Location of the iconlist icon code in the HTML (usually close to line 113)

#### Icons HTML

<div align="left" data-with-frame="true"><img src="https://2894606528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0ywqCs3au1x0DqPhEJTR%2Fuploads%2Fgit-blob-940dddb8d5685b038a2805479a8f69e927a8a732%2Fapp-icons.png?alt=media" alt="Location of the icons icon code in the HTML"></div>

Location of the icons icon code in the HTML (usually close to line 237)
{% endstep %}

{% step %}

### Replace the icon tag and save

Change the current el-tag to the new one for your chosen icon, then save the HTML. For example, to change "Company News" from a bookmark icon to a calendar icon, replace `el-bookmark` with `el-calendar`. Leave the surrounding tags alone — `el`, `el-inverse`, and `el-fw` are the same for all icons in the app component.
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://support.emarketeer.com/references/developer-advanced/app-navigation-icons.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.