Emojis

Nuxt OG Image supports emoji rendering across all renderers using Iconify 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.

Local Emoji Support

For faster rendering without network requests (Performance), install the iconify package for your emoji family:

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.

export default defineNuxtConfig({
  ogImage: {
    defaults: {
      emojis: 'twemoji'
    }
  }
})

Per-page emoji family

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

defineOgImage('NuxtSeo.takumi', { title: 'Hello' }, { emojis: 'twemoji' })

Takumi: COLR Emoji Fonts

When using the Takumi renderer, you can use COLR emoji fonts (e.g., Twemoji) 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

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.

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