You can add a [`v-img`][1] component like this:



<pre><code>&lt;v-app-bar color="light-blue lighten-3" app&gt;
  
  <b>&lt;v-img
    class="mx-2"
    src="https://i.imgur.com/qgGY4tB.png"
    max-height="40"
    max-width="40"
    contain
  &gt;&lt;/v-img&gt;</b>
  
  &lt;v-toolbar-title class="ml-2"&gt;
    Page title
  &lt;/v-toolbar-title&gt;

&lt;/v-app-bar&gt;
</code></pre>

It's important to set a `max-height` and `max-width`, otherwise the image will overflow the nav vertically and push over the title horizontally. And also set `contain` to preserve the aspect ratio

### [Demo in CodePen][2]

<img src="https://i.stack.imgur.com/7WGCm.png" width="446" />

>**Note**: If you're using Nuxt/Webpack, etc, you might need to build the image path with something like this: `:src="require('~/assets/logo.png')"`

  [1]: https://vuetifyjs.com/en/components/images#images
  [2]: https://codepen.io/KyleMit/pen/jgmRjV?editors=1000

I have a `v-app-bar` control, and I'm trying to add a logo/image to it.

Is there a standard approach in Veutify for adding a logo to the AppBar?

How to add logo to AppBar in Vuetify?

Answer

Demo in CodePen