---
title: "Emojis"
description: "Use emojis in your OG Images."
canonical_url: "https://nuxtseo.com/docs/og-image/guides/emojis"
last_updated: "2026-05-10T13:37:26.824Z"
---

Nuxt OG Image supports emoji rendering across all renderers using [Iconify](https://iconify.design/) emoji sets. The module detects emoji characters and replaces them with inline SVGs at render time.

Supported families:
`twemoji`, `noto`, `fluent-emoji`, `fluent-emoji-flat`, `fluent-emoji-high-contrast`, `noto-v1`, `emojione`, `emojione-monotone`, `emojione-v1`, `streamline-emojis`, `openmoji`

The default emoji family is `noto`.

## How it works

A regex detects unicode emoji characters in your template and maps them to icon names.

For example, `😀` (U+1F600) maps to `grinning-face`, which resolves to the emoji SVG.

<note>

The module supports only ~100 common emojis by default. For additional emojis, use [Nuxt Icon](https://github.com/nuxt/icon) with the emoji icon set directly.

</note>

## Local Emoji Support

For faster rendering without network requests ([Performance](/docs/og-image/guides/performance#optimise-components)), install the iconify package for your emoji family:

```bash
pnpm add -D @iconify-json/noto
```

The module automatically uses local icons when available, otherwise fetches from the Iconify API at runtime.

In dev mode, you'll be prompted to install the package automatically.

## Configuring the emoji family

You can set the default emoji family within your module config.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    defaults: {
      emojis: 'twemoji'
    }
  }
})
```

## Per-page emoji family

You can also set the emoji family on a per-page basis.

```ts [pages/index.vue]
defineOgImage('NuxtSeo', { title: 'Hello' }, { emojis: 'twemoji' })
```

## Takumi: COLR Emoji Fonts

When using the [Takumi](/docs/og-image/renderers/takumi) renderer, you can use COLR emoji fonts (e.g., [Twemoji](https://github.com/mozilla/twemoji-colr)) directly as a font instead of SVG replacement. This is faster and produces higher quality emoji rendering.

Load the font via `@nuxt/fonts` and Takumi will render emojis natively without network requests or SVG conversion.

## Troubleshooting

### Missing Emojis (Tofu or Black Lines)

If you use an emoji that is not in the default "common" list (~100 emojis) and you haven't installed the full dataset, it may fail to render correctly. This often results in:

- A "tofu" character (empty box)
- A black line or garbled graphic (fallback font issue)

**Fix:** Install the full iconify dataset for your chosen family.

```bash
# Example for noto (default)
pnpm add -D @iconify-json/noto

# Example for twemoji
pnpm add -D @iconify-json/twemoji
```

Once installed, Nuxt OG Image will automatically detect and use the local data for all emojis in that set.