# How to add Search icon to Header

**URL:** <https://community.elfsight.com/t/how-to-add-search-icon-to-header/63753>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 31, 2024, 2:16am UTC](https://community.elfsight.com/t/how-to-add-search-icon-to-header/63753 "2024-07-31T02:16:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 31, 2024, 2:16am UTC](https://community.elfsight.com/t/how-to-add-search-icon-to-header/63753/1 "2024-07-31T02:16:42Z")

</div>

**#1.** Use this code to Code Injection \> Footer

```auto
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<a href="/search" class="header-search"><img src="https://assets.squarespace.com/universal/images-v6/icons/icon-searchqueries-20-dark.png"/></a>').appendTo('nav.header-nav-list');
});
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/c/ccedc4901b002143ab92037a885ac2885770bb49.jpeg)

**#2.** Use this code to Custom CSS box

```auto
nav.header-nav-list {
  align-items: center;
}
a.header-search {
  margin-left: 1.5vw;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/a/da0e7502d4011359be14944b2eaa437e95d2ea01.jpeg)

**#3.** Result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/0/f04a41f95c5d1ca1c1be2ab9b94eb64c0d1c1750.png)

**#4.** If you want to change it to white color, use this to Custom CSS box

```auto
a.header-search {
    filter: invert(1);
    -webkit-filter: invert(1);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/0/d0cbac26beb6a1c30b1cd8aa587813fc537b4637.png)