← Back to Guides

Using emoji in your OG image

Learn how to use emojis to generate an OG image.

You can use the following code sample to explore using parameters and different content types with next/og. To learn more about OG Image Generation, see Open Graph Image Generation.

Create an api route with route.tsx in /app/api/og/ and paste the following code:

import { ImageResponse } from 'next/og';
// App router includes @vercel/og.
// No need to install it.
export async function GET() {
  return new ImageResponse(
          fontSize: 100,
          color: 'black',
          background: 'white',
          width: '100%',
          height: '100%',
          padding: '50px 200px',
          textAlign: 'center',
          justifyContent: 'center',
          alignItems: 'center',
        πŸ‘‹, 🌎
      width: 1200,
      height: 630,
      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
      // Default to 'twemoji'
      emoji: 'twemoji',

If you're not using a framework, you must either add "type": "module" to your package.json or change your JavaScript Functions' file extensions from .js to .mjs

Preview the OG route locally by running the following command:

pnpm dev

Then, browse to http://localhost:3000/api/og. You will see the following image:

Image generated using emojis πŸ‘‹, 🌎
Last updated on May 18, 2024