Without a dedicated emoji primitive, apps force users into string concatenation or external emoji libraries that bundle thousands of unused codepoints and drag in Unicode data. Raw emoji strings lack semantic meaning, confound accessibility (missing aria-labels), and make it impossible for agents to read or manipulate emoji choices programmatically—an agent trying to set a sentiment icon or swap skin tones has nowhere to hook in.

Emoji is a stateless span component that accepts an emoji name (resolved from an internal registry) or a raw emoji character, optional skin-tone modifiers ("light" | "medium-light" | "medium" | "medium-dark" | "dark"), and four size options ("sm" | "md" | "lg" | "xl"). It renders with a stable data-react-fancy-emoji attribute and semantic role="img" for accessibility, making it agent-readable.

Import Emoji from @particle-academy/react-fancy and pass either a name (e.g., "thumbs-up") or raw emoji prop; apply tone to person/hand emojis that support skin variants. Example: <Emoji name="wave" tone="medium-dark" size="lg" />. Agents can read the presence and tone via the stable data-react-fancy-emoji handle and mutate tone/size by re-rendering with new props.