> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/principle-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/principle-user-documentation/other-settings/add-icons-in-navigation-bar.md).

# Add Icons in Navigation bar

The navigation bar includes an option to add **icons** to the navigation item

<figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2FNu4iyd3jltvqYq1Pnz1E%2Fheader-nav.jpg?alt=media&amp;token=db64791c-0d8f-4b10-8978-42647e4a13d5" alt=""><figcaption><p>Navigation bar</p></figcaption></figure>

### **To customize:** <a href="#to-customize" id="to-customize"></a>

* Go to **Settings > Code injection** from the admin menu
* Choose **Site footer**

  <figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2FZmPHtJkvcQqP3Wnwz7vm%2Fcode.JPG?alt=media&amp;token=2c3499f5-1e75-46ab-8880-12c12d1b68e1" alt=""><figcaption><p>Code injection</p></figcaption></figure>
* Below is the code needed to add a specific icon:

**Copy**

```javascript
<script>
  const blogLinks = document.querySelectorAll(".nav-item__ADD_THIS_NAME_OF_NAVIGATION_ITEM");
  
  const blogSvgIcon = `CHANGE_THIS_TO_YOUR_SVG_CODE`

  if(blogLinks.length){
  blogLinks.forEach(link => {
    link.insertAdjacentHTML('afterbegin', blogSvgIcon);
    })
  }
</script>
```

{% hint style="info" %}
The selector class is based on the navigation item's name. For example, an item named **"Blog"** would have the selector **".nav-item\_\_blog"**.

To view the code of an SVG icon, open the file (\*.svg) in any text editor.&#x20;
{% endhint %}

* Copy this code and paste it inside **Site footer** input area
* Replace **`"CHANGE_THIS_TO_YOUR_SVG_CODE"`** with your SVG code and **`".nav-item__ADD_THIS_NAME_OF_NAVIGATION_ITEM"`** with the name of the navigation, like this:

<figure><img src="https://3747166499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNEUq8JgkqyvfvcerS2FD%2Fuploads%2FgHACw6bEV2POuNfbRHrt%2Fcode_inj.JPG?alt=media&amp;token=243600e3-5abd-4dcb-a0a6-078a82709488" alt=""><figcaption></figcaption></figure>

* Click **Save** to save your work!