---
title: "Adding Custom Icons to Navigation Section"
slug: "adding-custom-icons-to-navigation-section"
updated: 2024-02-02T14:58:36Z
published: 2024-02-02T14:58:36Z
canonical: "docs.viewlift.com/adding-custom-icons-to-navigation-section"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.viewlift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding Custom Icons to Navigation Section

*Learn how to change the icons on the bottom tray of mobile apps.* ![](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/image-1706884553493.png)

**Procedure**

1. Log into your TOOLS account.
2. Choose **CONTENT** from the top horizontal menu.
3. From the secondary menu, click on the **IMAGES >** **+ADD IMAGE** key on top.
4. Browse or drag your image file.  
Image size and preferred format:Icon size -23 pixels x 28 pixels  
Image format - PNG  
You are required to provide the new icon.
5. Click on the south-facing chevron on the right rail to expand your editing options for the individual image:  
  
![image.png](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/image%28111%29.png)
6. Editorialize the **File Name** field to reflect the name of the icon:  
  
![image.png](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/image%28112%29.png)
7. Click on the **COPY IMAGE URL** key in the lower right.
8. Before you paste this URL anywhere, remove the resize policy after the file extension. For example, "**https://snagfilms-a.akamaihd.net/9eb962cf-e8b3-49a5-a598-8c0422023f35/images/94/71/0bc37a42411e937eebe95a54f6fb/1587589478542_32x9images-tab.png?impolicy=resize&w=4752&h=1337"** should be appended to "**https://snagfilms-a.akamaihd.net/9eb962cf-e8b3-49a5-a598-8c0422023f35/images/94/71/0bc37a42411e937eebe95a54f6fb/1587589478542_32x9images-tab.png"**
9. Next, go to the Template Builder > Global Settings navigation module.
10. Choose the navigation menu that you wish to create new / edit. These include **HEADER NAVIGATION** and **OTHER NAVIGATION**.
11. Left-click on the navigation section you wish to modify. Choose the navigation piece you wish to add a custom icon to. Inside the Icon drop-down, x-out any existing icon or placeholder, to clear the field:  
![image.png](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/image%28113%29.png)  
  
Paste in the complete absolute URL of your image icon, and hit the return key:  
![image.png](https://cdn.document360.io/15e0c142-c823-4c77-a8e8-9d32ca937982/Images/Documentation/image%28114%29.png)
12. Once you are finished with your changes to the Template Builder, click **PUBLISH ALL** in the upper-right to commit your changes to be published to web / apps / OTT. However, as changing icons is not a critical issue on the site/apps, these changes will be implemented in the apps in the next live release.