# Image logo in ion-toolbar or ion-navbar

**URL:** <https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856>\
**Category:** ionic-v3\
**Created:** [June 15, 2016, 1:47am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856 "2016-06-15T01:47:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![arsene123](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arsene123/32/102588_2.png) [@arsene123](https://forum.ionicframework.com/u/arsene123)\
**Post date:** [June 15, 2016, 1:47am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/1 "2016-06-15T01:47:20Z")

</div>

any way to do this with the version of ionic framework?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [June 16, 2016, 7:20pm UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/2 "2016-06-16T19:20:27Z")

</div>

You can add the image inside of the ion-title tag

---

<div class="post-metadata">

**Author:** ![kevmax](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kevmax](https://forum.ionicframework.com/u/kevmax)\
**Post date:** [June 17, 2016, 7:02am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/3 "2016-06-17T07:02:46Z")

</div>

try this:

```
<ion-navbar *navbar secondary>
  <img src="logo.jpg" width="40px" style="display:inline-block" height="40px"/>
  <ion-title class="titleicon" style="display:inline-block" >Home</ion-title>
</ion-navbar>

```

and add this css code inside the app.core.css  
.titleicon div{  
display:inline-block;  
margin-bottom:10px;  
}

---

<div class="post-metadata">

**Author:** ![arsene123](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arsene123/32/102588_2.png) [@arsene123](https://forum.ionicframework.com/u/arsene123)\
**Post date:** [June 18, 2016, 12:02am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/4 "2016-06-18T00:02:40Z")

</div>

okey thaks @kevmax and @mhartington. just time to try this

---

<div class="post-metadata">

**Author:** ![danielgroh](https://avatars.discourse-cdn.com/v4/letter/d/ed8c4c/32.png) [@danielgroh](https://forum.ionicframework.com/u/danielgroh)\
**Post date:** [June 18, 2016, 9:25pm UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/5 "2016-06-18T21:25:09Z")

</div>

Is it possible to do this with ion-avatar?

---

<div class="post-metadata">

**Author:** ![arsene123](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arsene123/32/102588_2.png) [@arsene123](https://forum.ionicframework.com/u/arsene123)\
**Post date:** [August 2, 2016, 2:22am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/6 "2016-08-02T02:22:48Z")

</div>

thanks, it works!!! but i’m looking to place it in the middle

---

<div class="post-metadata">

**Author:** ![mrar85](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@mrar85](https://forum.ionicframework.com/u/mrar85)\
**Post date:** [January 14, 2017, 3:32pm UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/7 "2017-01-14T15:32:50Z")

</div>

try

```
<div class="titleicon">
         <img src="logo.jpg" width="100px" />
    </div>

```

then

```
.titleicon {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align:center;
}
```

---

<div class="post-metadata">

**Author:** ![JovanyMezura](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jovanymezura/32/129415_2.png) [@JovanyMezura](https://forum.ionicframework.com/u/JovanyMezura)\
**Post date:** [November 22, 2019, 8:25pm UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/9 "2019-11-22T20:25:38Z")

</div>

this work for me cheers !

---

<div class="post-metadata">

**Author:** ![Harikag](https://avatars.discourse-cdn.com/v4/letter/h/5e9695/32.png) [@Harikag](https://forum.ionicframework.com/u/Harikag)\
**Post date:** [December 30, 2019, 8:52am UTC](https://forum.ionicframework.com/t/image-logo-in-ion-toolbar-or-ion-navbar/54856/10 "2019-12-30T08:52:41Z")

</div>

Hi,  
I want to show image in ion-header but it is not showing image in ionic header  
below is the path of the image

```auto
  <ion-header style="height:60px;">
        <div class="toolbar-background-md">
                      
              <img src="assets/icon/tetra_single.png" style="width: 30px;height: 15px;margin-left: 5px;" /> 
              <ion-title >
                   Tetra
                   </ion-title> 
</div>
        </ion-header>

```

So please help me