---
title: "Icons and Images · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images"
last_updated: "2026-08-16T10:00:30.927Z"
meta:
  description: "How to use icons and images in your templates."
  "og:description": "How to use icons and images in your templates."
  "og:title": "Icons and Images · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Core Concepts**

# **Icons and Images**

## Nuxt Icon & Nuxt UI

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

```vue
<template>
  <div>
    <Icon name="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 paths must be either relative to the `**public**` directory or absolute. It's not possible to bundle images as part of your template.

## Tips

### 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

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

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

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

**Was this page helpful?**

[**Emojis** Use emojis in your OG Images.](https://nuxtseo.com/docs/og-image/v5/guides/emojis) [**Styling** How to style your OG Images.](https://nuxtseo.com/docs/og-image/v5/guides/styling)