README

Little icons. All the feelings.

Original 3D emoji, a React picker & message composer, and a PHP catalog.
Made with feeling by Cursor Style.

Live collection · Try the composer · npm · Packagist · Usage guide · Downloads

A whole world of expression	Every shade, every little detail	From tiny to extra expressive
3,963 artworks	5 skin tones + original	8 PNG sizes
1,923 base emoji · Unicode Emoji 18.0	2,040 exact tone sequences	16 · 24 · 32 · 64 · 128 · 256 · 512 · 1024 px

Pick your mood

A searchable picker with categories, real tone variants, lazy image loading, and a friendly keyboard shortcut. Drop the composer into a chat, comment box, or editor: the chosen emoji lands at the text cursor.

One setup. An emoji tag anywhere.

Use the artwork directly with an image URL, or connect the package once and use readable emoji tags.

HTML - no framework or build step:

<script type="module"
  src="https://cursor.style/emoji/assets/emoji-element-v1-1-0.js"></script>

<cs-emoji name="waving-hand" size="32" tone="medium"></cs-emoji>

For an npm app, install emoji-composer and import emoji-composer/element once instead of adding the script tag. This entry works without React. The element reacts to changes in name, size, and tone; you can also set label and base-url.

React:

import { Emoji } from "emoji-composer";

<Emoji name="waving-hand" size={32} skinTone="medium" />;

PHP:

$emoji = new \CursorStyle\Emoji\EmojiCatalog();
echo $emoji->imageTag('👋', 32, 'medium');

The React component and HTML element accept names such as waving-hand, glyphs such as 👋, and exact Unicode IDs. Use an ID for an ambiguous readable name. All eight image sizes and exact mixed-tone sequences are supported. The PHP helper accepts glyphs and IDs, and generates an escaped <img> without JavaScript.

React, meet a little personality

Requires React 18+ and React DOM 18+.

npm install emoji-composer

import { useState } from "react";
import { EmojiComposer } from "emoji-composer";
import "emoji-composer/styles.css";

export function MessageBox() {
  const [message, setMessage] = useState("");

  return (
    <EmojiComposer
      value={message}
      onChange={setMessage}
      placeholder="Say it with a little feeling…"
    />
  );
}

Just need the picker?

import { EmojiPicker } from "emoji-composer";
import "emoji-composer/styles.css";

<EmojiPicker onSelect={({ text, assetUrl }) => console.log(text, assetUrl)} />;

The composer supports controlled and uncontrolled values. Its popover follows the viewport, closes on Escape or outside interaction, and restores the text cursor after selection. The standalone picker also supports Ctrl/⌘ K search.

PHP feels included

Requires PHP 8.1+ and ext-json. Works with Laravel, Symfony, or plain PHP.

composer require cursor-style/emoji

require __DIR__ . '/vendor/autoload.php';

use CursorStyle\Emoji\EmojiCatalog;

$emoji = new EmojiCatalog();

$url = $emoji->imageUrl('👋', 128, 'medium');
$matches = $emoji->find('waving');

Both packages share the same catalog, exact Unicode tone mapping, and artwork URLs.

Every shade is its own artwork

Each supported tone is a separately generated transparent PNG. Original masters are preserved. Mixed-tone Unicode sequences are available by their full sequence ID.

One URL. Ready anywhere.

Artwork is delivered through Cloudflare on the main cursor.style domain. Versioned PNGs are immutable, support cross-origin use, and have transparent backgrounds.

<img
  src="https://cursor.style/emoji/v2.0.0/png/128/1f44b.png"
  width="64"
  height="64"
  alt="Waving hand"
/>

Use the helper for tones and exact variants:

import { getEmojiAssetUrl, getEmojiVariantById } from "emoji-composer";

getEmojiAssetUrl("👋", { size: 256, skinTone: "medium" });
getEmojiVariantById("1faf1-1f3fb-200d-1faf2-1f3fc");

The packages contain code and searchable metadata; PNGs load on demand from the CDN. To use your own asset host, set assetBaseUrl on the React components, baseUrl in the URL helper, or pass the base URL to PHP's EmojiCatalog constructor.

Make it yours

Usage guide - picker props, data helpers, theme variables, focus behavior, tones, and local development.
Deployment guide - static origin, versioned paths, Cloudflare caching, and GitOps.
Catalog manifest - the published artwork inventory.
Releases - tagged source, package archives, and checksums.

The picker includes an “Emoji by Cursor Style” link by default. You can hide it with showBranding={false}; attribution is appreciated and optional under the MIT License.

Free to use. Full of feeling.
MIT licensed code and original AI-generated catalog artwork.
Created for this collection; no platform's exact emoji artwork is reproduced.

A little more personality, by Cursor Style ↗

cursor-style / emoji

Package info

Security

Statistics