Icons and Images · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Core Concepts

# Icons and Images

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images.md)

## [Nuxt Icon & Nuxt UI](#nuxt-icon-nuxt-ui)

Nuxt OG Image supports both Nuxt Icon `Icon`'s component and Nuxt UI's `UIcon` component.

Nuxt Icon

Nuxt UI

```
<template>
  <div>
    <Icon name="carbon:bot" mode="svg" />
  </div>
</template>
```

```
<template>
  <div>
    <UIcon name="i-carbon-bot" mode="svg" />
  </div>
</template>
```

It's important that the `mode` is set to `svg` to ensure the icon is rendered correctly.

## [Image Resolution](#image-resolution)

Image paths must be either relative to the `public` directory or absolute. It's not possible to bundle images as part of your template.

## [Tips](#tips)

### [Provide Width / Height](#provide-width-height)

When no dimensions are set, the package `image-size` is used to determine the best dimensions for your image.

However, this can be slow and provide incorrect results.

Therefore it's always recommended to provide a width and height when using images.

Likewise when using a background image, make sure the container has set dimensions.

### [Base64 images Are Quickest](#base64-images-are-quickest)

If you're having issues with performance and images, it's recommended to use base64 images.

This will save render time as it won't need to fetch the image.

### [Avoid Inlining SVGs](#avoid-inlining-svgs)

Prefer rendering SVGs instead of inlining them within `img` tags

```
<!-- ❌ -->
<img src="data:image/svg+xml;base64,..." />
<!-- ✅ -->
<svg>
  <rect width="24" height="24" />
</svg>
```

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/3.guides/6.icons-and-images.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images.md)

Did this page help you?

On this page

- [Nuxt Icon & Nuxt UI](#nuxt-icon-nuxt-ui)
- [Image Resolution](#image-resolution)
- [Tips](#tips)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)