remotion-dev/remotion · error · Error

Emoji ${emoji} not found. Available emojis: ${emojis.map((e)

Error message

Emoji ${emoji} not found. Available emojis: ${emojis.map((e) => e.name).join(', ')}

What it means

Thrown by the <AnimatedEmoji> component when the `emoji` prop does not match any name in the built-in emoji registry. The component looks the emoji up by exact kebab-case name in the `emojis` array (see get-available-emoji.ts) and aborts the render if no entry matches, printing every valid name in the message so you can correct the value.

Source

Thrown at packages/animated-emoji/src/AnimatedEmoji.tsx:29

	'src' | 'muted'
> & {
	readonly emoji: EmojiName;
	readonly scale?: Scale;
	readonly calculateSrc?: CalculateEmojiSrc;
} & LayoutAndStyle;

export const AnimatedEmoji = ({
	emoji,
	scale = '1',
	calculateSrc = defaultCalculateEmojiSrc,
	playbackRate = 1,
	...props
}: AnimatedEmojiProps) => {
	const {fps} = useVideoConfig();

	const emojiData = emojis.find((e) => e.name === emoji);
	if (!emojiData) {
		throw new Error(
			`Emoji ${emoji} not found. Available emojis: ${emojis.map((e) => e.name).join(', ')}`,
		);
	}

	return (
		<Loop
			layout="none"
			durationInFrames={Math.floor(
				(emojiData.durationInSeconds * fps) / playbackRate,
			)}
		>
			<OffthreadVideo
				{...props}
				muted
				transparent
				playbackRate={playbackRate}
				src={calculateSrc({emoji, scale, format: isWebkit() ? 'hevc' : 'webm'})}
			/>

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Read the error message — it lists every valid name; copy one exactly in kebab-case (e.g. 'heart-eyes').
Import EmojiName and type your variable with it so the compiler rejects invalid names at build time.
Call getAvailableEmojis() at runtime to enumerate valid names when the value comes from dynamic data.

Example fix

// before
<AnimatedEmoji emoji="😀" />  // Unicode glyph, not a registry name

// after
import {getAvailableEmojis} from '@remotion/animated-emoji/get-available-emoji';
// valid names: getAvailableEmojis().map((e) => e.name)
<AnimatedEmoji emoji="heart-eyes" />

Defensive patterns

Strategy: type-guard

Validate before calling

import {getAvailableEmojis} from '@remotion/animated-emoji/get-available-emoji';

const VALID = new Set(getAvailableEmojis().map((e) => e.name));
function assertEmoji(name: string) {
  if (!VALID.has(name)) {
    throw new Error(`Invalid emoji "${name}". Valid: ${[...VALID].join(', ')}`);
  }
}

Type guard

import {getAvailableEmojis} from '@remotion/animated-emoji/get-available-emoji';
import type {EmojiName} from '@remotion/animated-emoji/get-available-emoji';

const NAMES = new Set<string>(getAvailableEmojis().map((e) => e.name));
const isValidEmojiName = (n: string): n is EmojiName => NAMES.has(n);

Prevention

Type every emoji variable as EmojiName so the compiler rejects typos at build time.
When the name comes from dynamic data, validate it with getAvailableEmojis() before rendering.
Treat the message's printed list as the source of truth after any package upgrade.

When it happens

Trigger: Passing a string to `<AnimatedEmoji emoji="...">` that is not one of the literal names in the EmojiName union: a Unicode glyph like '😀', a typo like 'smilling', wrong casing like 'Heart-Eyes', or a name from a different emoji set.

Common situations: Copying an emoji name from Slack/Unicode instead of the Remotion registry; a name that was renamed or removed after a package upgrade; passing a dynamically computed name from user input or config without validation; @ts-ignore or `as any` bypassing the EmojiName type.

Related errors

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/0edda5fd3743a515. Report an issue: GitHub.