SVG Emojis

Choose your flavor of consistent cross-platform SVG emojis from Twemoji, FxEmoji, and OpenMoji.

• /twemoji
• /fxemoji
• /openmoji/color
• /openmoji/black

Demo

https://svg-emojis.netlify.app

Install

npm i svg-emojis

Usage

You can use babel-plugin-inline-react-svg or @svgr/webpack to import them as a React component:

import ThumbsUp from "svg-emojis/twemoji/1f44d.svg";

function App() {
  return (
    <div>
      <ThumbsUp />
    </div>
  );
}

Create React App

👉 Adding Images, Fonts, and Files

Import as URL:

import React from "react";
import thumbsUp from "svg-emojis/twemoji/1f44d.svg";

function Header() {
  return <img src={thumbsUp} alt="" />;
}

export default Header;

Import as a ReactComponent:

import { ReactComponent as ThumbsUp } from "svg-emojis/twemoji/1f44d.svg";

function App() {
  return (
    <div>
      <ThumbsUp />
    </div>
  );
}

Nextjs

👉 SVG components example using babel-plugin-inline-react-svg.

CDN

Files can be delivered through jsdelivr (or unpkg):

• https://cdn.jsdelivr.net/npm/svg-emojis/twemoji/1f389.svg
• https://cdn.jsdelivr.net/npm/svg-emojis/fxemoji/u1F389-partypopper.svg
• https://cdn.jsdelivr.net/npm/svg-emojis/openmoji/color/1F389.svg
• https://cdn.jsdelivr.net/npm/svg-emojis/openmoji/black/1F389.svg

Contributions

All contributions are welcome!