Convert Figma logo to code with AI

twitter logotwemoji

Emoji for everyone. https://twemoji.twitter.com/

16,781
1,849
16,781
108
View on GitHubView on NPM

Top Related Projects

iamcal's avatar

emoji-data

2,552

Easy to parse data and spritesheets for emoji

microsoft's avatar

fluentui-emoji

9,006

A collection of familiar, friendly, and modern emoji from Microsoft

googlefonts's avatar

noto-emoji

3,733

Noto Emoji fonts

joypixels's avatar

emojione

4,458

[Archived] The world's largest independent emoji font. Maintained at https://github.com/joypixels/emoji-toolkit.

Quick Overview

Twemoji is Twitter's open-source emoji library, providing a comprehensive set of emoji designs in SVG and PNG formats. It aims to offer a consistent emoji experience across different platforms and devices, ensuring that emojis appear the same regardless of the user's operating system or device.

Pros

  • Extensive emoji coverage, including the latest Unicode standards
  • High-quality, scalable SVG versions of all emojis
  • Cross-platform compatibility and consistent appearance
  • Open-source and freely available for use in various projects

Cons

  • May require additional implementation effort compared to native emoji support
  • Regular updates needed to stay current with new emoji releases
  • Some users may prefer platform-specific emoji designs
  • Potential performance impact when loading external emoji assets

Code Examples

  1. Basic usage with Twemoji library:
// Convert emoji to Twemoji image
var text = "I ❤️ Twemoji! 🎉";
var converted = twemoji.parse(text);
console.log(converted);
  1. Customizing image size:
// Set custom size for Twemoji images
twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg',
    size: '72x72'
});
  1. Using Twemoji with React:
import twemoji from 'twemoji';

function EmojiText({ children }) {
  return (
    <span dangerouslySetInnerHTML={{
      __html: twemoji.parse(children)
    }} />
  );
}

// Usage
<EmojiText>Hello! 👋</EmojiText>

Getting Started

To use Twemoji in your project, follow these steps:

  1. Include the Twemoji library in your HTML:
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
  1. Parse your content with Twemoji:
document.body.innerHTML = twemoji.parse(document.body.innerHTML);
  1. Optionally, customize the parsing options:
twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg'
});

For more advanced usage and configuration options, refer to the official Twemoji documentation on GitHub.

Competitor Comparisons

iamcal logo

emoji-data

2,552

Easy to parse data and spritesheets for emoji

Pros of emoji-data

  • Provides more comprehensive emoji data, including detailed attributes and properties
  • Offers multiple image formats (PNG, SVG) and sizes for each emoji
  • Includes historical emoji data and versioning information

Cons of emoji-data

  • Less frequent updates compared to Twemoji
  • Smaller community and fewer contributors
  • Limited to data and images, without additional utilities or tools

Code Comparison

emoji-data:

{
  "name": "GRINNING FACE",
  "unified": "1F600",
  "non_qualified": null,
  "docomo": null,
  "au": "E471",
  "softbank": "E057",
  "google": "FE332",
  "image": "1f600.png",
  "sheet_x": 30,
  "sheet_y": 24,
  "short_name": "grinning",
  "short_names": ["grinning"],
  "text": null,
  "apple_img": true,
  "hangouts_img": true,
  "twitter_img": true
}

Twemoji:

twemoji.parse('I \u2764\uFE0F emoji!');

Summary

emoji-data focuses on providing comprehensive emoji data and multiple image formats, while Twemoji offers a more streamlined emoji set with additional utilities for parsing and rendering emojis in web applications. emoji-data is ideal for developers needing detailed emoji information, while Twemoji is better suited for quick implementation of emoji support in web projects.

microsoft logo

fluentui-emoji

9,006

A collection of familiar, friendly, and modern emoji from Microsoft

Pros of Fluent UI Emoji

  • More diverse and inclusive emoji set with various skin tones and gender options
  • Higher quality vector graphics, allowing for better scalability
  • Consistent design language aligned with Microsoft's Fluent Design System

Cons of Fluent UI Emoji

  • Smaller emoji set compared to Twemoji
  • Less widespread adoption and recognition compared to Twemoji
  • May require more system resources due to higher quality graphics

Code Comparison

Twemoji (JavaScript):

twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg'
});

Fluent UI Emoji (React):

import { Emoji } from '@fluentui/react-emoji';

function MyComponent() {
  return <Emoji symbol="😊" />;
}

Summary

Twemoji offers a larger, more widely recognized emoji set with simpler implementation, while Fluent UI Emoji provides higher quality graphics and better inclusivity. Twemoji is more suitable for projects requiring broad compatibility and simpler integration, whereas Fluent UI Emoji is ideal for applications aligned with Microsoft's design language and those prioritizing scalability and diversity in emoji representation.

googlefonts logo

noto-emoji

3,733

Noto Emoji fonts

Pros of noto-emoji

  • More comprehensive coverage of Unicode emoji standards
  • Designed for better cross-platform consistency
  • Open-source and freely available for commercial use

Cons of noto-emoji

  • Less stylized and playful design compared to Twemoji
  • Slower update cycle for new emoji additions
  • Larger file sizes for individual emoji images

Code Comparison

noto-emoji:

def get_emoji_data(emoji_filename):
    emoji_data = {}
    with open(emoji_filename, "r") as f:
        for line in f:
            if line.startswith("#") or line.strip() == "":
                continue
            fields = line.split(";")
            if len(fields) < 2:
                continue
            emoji_data[fields[0].strip()] = fields[1].strip()
    return emoji_data

Twemoji:

function parse(text, options) {
  var entityPattern = /(&#\d+;)/g;
  var entities = text.match(entityPattern);
  if (entities) {
    for (var i = 0; i < entities.length; i++) {
      text = text.replace(entities[i], toCodePoint(entities[i]));
    }
  }
  return text;
}

Both repositories provide emoji sets, but their implementations differ. noto-emoji focuses on parsing emoji data from files, while Twemoji includes functions for parsing and converting emoji entities in text.

joypixels logo

emojione

4,458

[Archived] The world's largest independent emoji font. Maintained at https://github.com/joypixels/emoji-toolkit.

Pros of EmojiOne

  • More extensive emoji set, including some less common and regional emojis
  • Offers both PNG and SVG formats for all emojis
  • Provides a wider range of customization options and tools

Cons of EmojiOne

  • Requires attribution in the free version, which may not be suitable for all projects
  • Less frequent updates compared to Twemoji
  • Some users report inconsistencies in emoji designs across platforms

Code Comparison

EmojiOne:

import { emojione } from 'emojione';

const text = "Hello! 👋";
const converted = emojione.toImage(text);

Twemoji:

import twemoji from 'twemoji';

const text = "Hello! 👋";
const converted = twemoji.parse(text);

Both libraries offer similar functionality for converting emoji Unicode to images, but EmojiOne uses the toImage method, while Twemoji uses parse. The resulting output is similar, with the main difference being the specific emoji designs and image paths.

EmojiOne provides more options for customization in its API, allowing developers to fine-tune the conversion process and output. However, Twemoji's simpler API may be preferable for projects that don't require extensive customization.

Overall, the choice between EmojiOne and Twemoji depends on specific project requirements, such as the need for a wider emoji set, customization options, and licensing considerations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Twitter Emoji (Twemoji) Build Status

A simple library that provides standard Unicode emoji support across all platforms.

Twemoji v14.0 adheres to the Unicode 14.0 spec and supports the Emoji 14.0 spec. We do not support custom emoji.

The Twemoji library offers support for all Unicode-defined emoji which are recommended for general interchange (RGI).

Usage

CDN Support

The folks over at MaxCDN have graciously provided CDN support.

MaxCDN is shut down right now, so in the meanwhile use a different CDN or download the assets. (See Maxcdn has shut down, cdn not working anymore. · Issue #580 · twitter/twemoji).

Use the following in the <head> tag of your HTML document(s):

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

This guarantees that you will always use the latest version of the library.

If, instead, you'd like to include the latest version explicitly, you can add the following tag:

<script src="https://unpkg.com/twemoji@14.0.2/dist/twemoji.min.js" integrity="sha384-ICOlZarapRIX6UjKPcWKEpubjg7lGADN7Y9fYP4DU9zm0aPFhgnP5ef+XFaPyKv+" crossorigin="anonymous"></script>

Download

If instead you want to download a specific version, please look at the gh-pages branch, where you will find the built assets for both our latest and older versions.

API

Following are all the methods exposed in the twemoji namespace.

twemoji.parse( ... ) V1

This is the main parsing utility and has 3 overloads per parsing type.

Although there are two kinds of parsing supported by this utility, we recommend you use DOM parsing, explained below. Each type of parsing accepts a callback to generate an image source or an options object with parsing info.

The second kind of parsing is string parsing, explained in the legacy documentation here. This is unrecommended because this method does not sanitize the string or otherwise prevent malicious code from being executed; such sanitization is out of scope.

DOM parsing

If the first argument to twemoji.parse is an HTMLElement, generated image tags will replace emoji that are inside #text nodes only without compromising surrounding nodes or listeners, and completely avoiding the usage of innerHTML.

If security is a major concern, this parsing can be considered the safest option but with a slight performance penalty due to DOM operations that are inevitably costly.

var div = document.createElement('div');
div.textContent = 'I \u2764\uFE0F emoji!';
document.body.appendChild(div);

twemoji.parse(document.body);

var img = div.querySelector('img');

// note the div is preserved
img.parentNode === div; // true

img.src;        // https://twemoji.maxcdn.com/v/latest/72x72/2764.png
img.alt;        // \u2764\uFE0F
img.className;  // emoji
img.draggable;  // false

All other overloads described for string are available in exactly the same way for DOM parsing.

Object as parameter

Here's the list of properties accepted by the optional object that can be passed to the parse function.

  {
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "72x72"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
  }

callback

The function to invoke in order to generate image src(s).

By default it is a function like the following one:

function imageSourceGenerator(icon, options) {
  return ''.concat(
    options.base, // by default Twitter Inc. CDN
    options.size, // by default "72x72" string
    '/',
    icon,         // the found emoji as code point
    options.ext   // by default ".png"
  );
}

base

The default url is the same as twemoji.base, so if you modify the former, it will reflect as default for all parsed strings or nodes.

ext

The default image extension is the same as twemoji.ext which is ".png".

If you modify the former, it will reflect as default for all parsed strings or nodes.

className

The default class for each generated image is emoji. It is possible to specify a different one through this property.

size

The default asset size is the same as twemoji.size which is "72x72".

If you modify the former, it will reflect as default for all parsed strings or nodes.

folder

In case you don't want to specify a size for the image. It is possible to choose a folder, as in the case of SVG emoji.

twemoji.parse(genericNode, {
  folder: 'svg',
  ext: '.svg'
});

This will generate urls such https://twemoji.maxcdn.com/svg/2764.svg instead of using a specific size based image.

Utilities

Basic utilities / helpers to convert code points to JavaScript surrogates and vice versa.

twemoji.convert.fromCodePoint()

For a given HEX codepoint, returns UTF-16 surrogate pairs.

twemoji.convert.fromCodePoint('1f1e8');
 // "\ud83c\udde8"

twemoji.convert.toCodePoint()

For given UTF-16 surrogate pairs, returns the equivalent HEX codepoint.

 twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
 // "1f1e8-1f1f3"

 twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
 // "1f1e8~1f1f3"

Tips

Inline Styles

If you'd like to size the emoji according to the surrounding text, you can add the following CSS to your stylesheet:

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

This will make sure emoji derive their width and height from the font-size of the text they're shown with. It also adds just a little bit of space before and after each emoji, and pulls them upwards a little bit for better optical alignment.

UTF-8 Character Set

To properly support emoji, the document character set must be set to UTF-8. This can be done by including the following meta tag in the document <head>

<meta charset="utf-8">

Exclude Characters (V1)

To exclude certain characters from being replaced by twemoji.js, call twemoji.parse() with a callback, returning false for the specific unicode icon. For example:

twemoji.parse(document.body, {
    callback: function(icon, options, variant) {
        switch ( icon ) {
            case 'a9':      // © copyright
            case 'ae':      // ® registered trademark
            case '2122':    // ™ trademark
                return false;
        }
        return ''.concat(options.base, options.size, '/', icon, options.ext);
    }
});

Legacy API (V1)

If you're still using our V1 API, you can read our legacy documentation here.

Contributing

The contributing documentation can be found here.

Attribution Requirements

As an open source project, attribution is critical from a legal, practical and motivational perspective in our opinion. The graphics are licensed under the CC-BY 4.0 which has a pretty good guide on best practices for attribution.

However, we consider the guide a bit onerous and as a project, will accept a mention in a project README or an 'About' section or footer on a website. In mobile applications, a common place would be in the Settings/About section (for example, see the mobile Twitter application Settings->About->Legal section). We would consider a mention in the HTML/JS source sufficient also.

Community Projects

Committers and Contributors

  • Justine De Caires (Twitter)
  • Jason Sofonia (Twitter)
  • Bryan Haggerty (ex-Twitter)
  • Nathan Downs (ex-Twitter)
  • Tom Wuttke (ex-Twitter)
  • Andrea Giammarchi (ex-Twitter)
  • Joen Asmussen (WordPress)
  • Marcus Kazmierczak (WordPress)

The goal of this project is to simply provide emoji for everyone. We definitely welcome improvements and fixes, but we may not merge every pull request suggested by the community due to the simple nature of the project.

The rules for contributing are available in the CONTRIBUTING.md file.

Thank you to all of our contributors.

License

Copyright 2019 Twitter, Inc and other contributors

Code licensed under the MIT License: http://opensource.org/licenses/MIT

Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

NPM DownloadsLast 30 Days