Hosted emoji sets

Every operating system draws emoji in its own style, and older systems cannot draw new emoji at all. A hosted emoji set makes every device show the same art. Emojisense serves the images from the edge, for every emoji in the data packs and their skin tones.

Sets

Each set is pinned to one upstream commit, so the art does not change under you. Fluent has no country flags, families, couples or Emoji 16 and 17. When a set has no image for an emoji, the pickers show the native emoji instead.

Use a set in a picker

Set the picker’s emojiSet option and give it the API endpoint, which hosts the images:

import { useEmojisense } from "@emojisense/react";
import { EmojisensePicker } from "@emojisense/react/frimousse";

const sense = useEmojisense({
  packBaseUrl: "https://api.emojisense.com/v1/pack/0.1.0",
  endpoint: "https://api.emojisense.com", // hosts the images
  emojiSet: "twemoji",
});

<EmojisensePicker emojisense={sense} onEmojiSelect={({ emoji }) => insert(emoji)} />;

<emojisense-picker
  pack-url="https://api.emojisense.com/v1/pack/0.1.0"
  endpoint="https://api.emojisense.com"
  emoji-set="twemoji"
></emojisense-picker>

The pickers draw <img src="…/v1/sets/<set>/<hexcode>.svg" alt="<emoji>" loading="lazy">, so screen readers still get the emoji. What people insert is always the Unicode emoji.

In your own UI

import { EmojiGlyph } from "@emojisense/react";

// A 1em image of the set, or the text when the set has no image for this emoji.
<EmojiGlyph emoji="👍🏽" emojiSet={sense.emojiSet} endpoint={sense.endpoint} />;

import { emojiImageUrl, hexcodeOf } from "emojisense";

hexcodeOf("👍🏽"); // "1F44D-1F3FD"

emojiImageUrl("👍🏽", { endpoint: "https://api.emojisense.com", emojiSet: "twemoji" });
// "https://api.emojisense.com/v1/sets/twemoji/1F44D-1F3FD.svg"

emojiImageUrl("👍🏽", { endpoint: "https://api.emojisense.com", emojiSet: "native" });
// undefined: draw the text

import Emojisense

let endpoint = URL(string: "https://api.emojisense.com")!
let url = EmojiSet.twemoji.imageURL(for: "👍🏽", endpoint: endpoint)
// https://api.emojisense.com/v1/sets/twemoji/1F44D-1F3FD.svg

The app setting

Each app also stores its set in the dashboard, native by default: PATCH /api/apps/:id with { "emojiSet": "twemoji" }. A set other than native needs the Solo plan or higher, otherwise the answer is 402 with plan_required.

Image URLs

GET https://api.emojisense.com/v1/sets/:set/:hexcode.svg

• hexcode is the Emojibase hexcode of a pack emoji or of one of its single-tone variants, for example 1F44D or 1F44D-1F3FD. hexcodeOf(emoji) makes it.
• No key, not metered and not rate limited, because a picker loads hundreds of images and an <img> cannot carry a key.
• Answers are image/svg+xml, cached for a year (immutable), with CORS for every origin.
• Errors: 400 invalid_hexcode, 404 unknown_set, 404 unknown_emoji, 404 not_in_set and 502 upstream_unavailable.

Attribution