With Emoji - Vercel OG Image template

Create a new API endpoint:

// pages/api/og/with-emoji.jsx

import React from "react";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);

    // dynamic params
    const title = searchParams.has("title")
      ? searchParams.get("title")?.slice(0, 100)
      : "My default title";

    const emoji = searchParams.get("emoji") || "mywebsite.com";

    return new ImageResponse(
        <div tw="h-full w-full flex items-start justify-start bg-sky-50">
          <div tw="flex items-start justify-start h-full">
            <div tw="flex flex-col justify-center items-center px-20 w-full h-full text-center">
              <p tw="text-[120px] mx-auto text-center font-bold mb-0">
              <h1 tw="text-[60px] font-bold">{title}</h1>
        width: 1200,
        height: 627,
        // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
        emoji: "twemoji",
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,

You can then create new dynamic images by passing the following parameters to the API endpoint:

const title = "We just raised $100m to build the next-gen todo app!";
const emoji = "🚀";

return <img src={`/api/og/with-emoji?title=${title}&emoji=${emoji}`} />;

// or

return (
If you want to use your own custom fonts for this template, follow this example.
More Vercel OG templates

Receive an email when we publish a new template

Max 1-2x times per month.