emoji-animation Animated Emoji React Components 🎉

emoji-animation is a React component library that lets you easily use animated emojis in your React projects. Each emoji has its unique animation based on its emotion.

Features

Animated emojis using Framer Motion

Easy to use syntax

Unique animations for different emojis

Lightweight and ready for React projects

Works with React 16.8+

Installation

You can install the package using either npm or yarn:

Using npm

npm install emoji-animation

Using yarn

yarn add emoji-animation

Usage

Here’s a simple example of how to use emoji-animation in your React project:

import React from "react";
import { Smile, Crying, Heart } from "emoji-animation";

function App() {
  return (
    <div style={{ display: "flex", gap: "20px", fontSize: "3rem" }}>
      <Smile />
      <Crying />
      <Heart />
    </div>
  );
}

export default App;

Available Emojis

The library includes over 200++ animated emojis. Each is available as a React component (e.g., <Smile />) and features custom Framer Motion animations.

Categories

The library includes over 200 animated emojis. Each is available as a React component (e.g., ) and features custom Framer Motion animations. Below is a complete list grouped by category for easier reference.

Face Emojis
Smile: 😄 (scales and rotates)
Laughing: 😂 (scales and rotates)
Crying: 😢 (bounces and fades)
Wink: 😉 (rotates)
Eyes: 👀 (bounces)
Thinking: 🤔 (rotates)
Shocked: 😲 (scales)
Blush: 😊 (bounces and scales)
Sleepy: 😴 (bounces and fades)
Angry: 😠 (scales and rotates)
Disgusted: 🤢 (bounces)
Vomiting: 🤮 (bounces)
Confused: 😕 (rotates)
Love Eyes: 😍 (scales)
Kissing: 😘 (scales and rotates)
Relieved: 😌 (bounces)
Sweat Smile: 😅 (scales and rotates)
Tongue: 😛 (scales)
Zipper Mouth: 🤐 (bounces)
Neutral: 😐 (rotates)
Expressionless: 😑 (bounces)
Smirk: 😏 (rotates)
Unamused: 😒 (bounces)
Sweat: 😓 (bounces)
Pensive: 😔 (bounces)
Confused Face: 😖 (scales)
Hugging: 🤗 (scales)
Nerd: 🤓 (rotates)
Cowboy: 🤠 (scales)
Clown: 🤡 (scales and rotates)
Party Face: 🥳 (rotates fully)
Sick: 🤒 (bounces)
Mask: 😷 (bounces)
Thermometer: 🤕 (bounces)
Money Mouth: 🤑 (scales)
Cowboy Hat Face: 🤠 (scales)
Zipper Mouth Face: 🤐 (bounces)
Grinning: 😀 (scales and rotates)
Yum: 😋 (scales and bounces)
Sunglasses: 😎 (rotates)
Hugging Face: 🤗 (scales)
Star Struck: 🤩 (scales and rotates fully)
Squinting: 😆 (scales and rotates)
Upside Down: 🙃 (rotates 180 degrees)

Hand Emojis
Waving Hand: 👋 (rotates)
Raised Back of Hand: 🤚 (scales)
Hand with Fingers Splayed: 🖐️ (bounces)
Raised Hand: ✋ (scales)
Vulcan Salute: 🖖 (rotates)
Thumbs Down: 👎 (scales and rotates)
Raised Fist: ✊ (bounces)
Oncoming Fist: 👊 (moves horizontally)
Victory Hand: ✌️ (rotates)
Crossed Fingers: 🤞 (scales)
Pinching Hand: 🤏 (scales down and up)
Love You Gesture: 🤟 (rotates)
Sign of the Horns: 🤘 (bounces)
Call Me Hand: 🤙 (rotates)
Backhand Index Pointing Left: 👈 (moves left)
Backhand Index Pointing Right: 👉 (moves right)
Backhand Index Pointing Up: 👆 (bounces up)
Middle Finger: 🖕 (scales)
Backhand Index Pointing Down: 👇 (bounces down)
Index Pointing Up: ☝️ (bounces up)
Folded Hands: 🙏 (scales)
Writing Hand: ✍️ (moves horizontally)
Open Hands: 👐 (scales)
Palms Up Together: 🤲 (bounces)
Handshake: 🤝 (rotates)
Nail Polish: 💅 (scales)
Hand with Index Finger and Thumb Crossed: 🫰 (rotates)
Heart Hands: 🫶 (scales)
Thumbs Up: 👍 (scales and rotates)
Clap: 👏 (scales)
Ok Hand: 👌 (scales)

Flag Emojis
Chequered Flag: 🏁 (scales)
Triangular Flag: 🚩 (rotates)
Crossed Flags: 🎌 (bounces)
Black Flag: 🏴 (fades)
White Flag: 🏳️ (scales)
Rainbow Flag: 🏳️‍🌈 (rotates fully)
Pirate Flag: 🏴‍☠️ (scales)
Flag US: 🇺🇸 (bounces)
Flag GB: 🇬🇧 (rotates)
Flag FR: 🇫🇷 (scales)
Flag DE: 🇩🇪 (bounces)
Flag IT: 🇮🇹 (rotates)
Flag ES: 🇪🇸 (scales)
Flag CN: 🇨🇳 (bounces)
Flag JP: 🇯🇵 (rotates fully)
Flag KR: 🇰🇷 (scales)
Flag RU: 🇷🇺 (bounces)
Flag IN: 🇮🇳 (rotates)
Flag BR: 🇧🇷 (scales)
Flag CA: 🇨🇦 (bounces)
Flag AU: 🇦🇺 (rotates)
Flag MX: 🇲🇽 (scales)

Emotion and Symbol Emojis
Heart: ❤️ (scales and rotates)
Party: 🎉 (rotates fully)
Fire: 🔥 (scales)
Star: ⭐ (rotates fully)
Money: 💰 (scales)
Warning: ⚠️ (scales)
Check: ✅ (scales)
Cross: ❌ (rotates)
Question: ❓ (bounces and rotates)
Exclamation: ❗ (scales)
Recycle: ♻️ (rotates fully)
Peace: ☮️ (scales)
Yin Yang: ☯️ (rotates 180 degrees)
Infinity: ♾️ (scales and rotates fully)
Sparkling Heart: 💖 (scales)
Revolving Hearts: 💞 (rotates fully)
Light Bulb Icon: 💡 (fades)
Warning Sign: ⚠️ (scales)
Check Mark: ✅ (scales)
No Entry: ⛔ (rotates)
Recycle Symbol: ♻️ (rotates fully)
Information: ℹ️ (scales)
Copyright: ©️ (bounces)
Registered: ®️ (scales)
Trademark: ™️ (rotates)
Key Icon: 🔑 (bounces)
Lock Icon: 🔒 (scales)
Unlocked: 🔓 (rotates)
Bell Icon: 🔔 (rotates)
No Bell: 🔕 (fades)
Bookmark: 🔖 (bounces)
Link: 🔗 (scales)
Radio Button: 🔘 (scales)
Back Arrow: 🔙 (moves left)
End Arrow: 🔚 (moves right)
On Arrow: 🔛 (rotates 180 degrees)
Soon Arrow: 🔜 (bounces)
Top Arrow: 🔝 (bounces down)

Object and Nature Emojis
Rocket: 🚀 (launches upward)
Sun: ☀️ (rotates fully)
Cloud: ☁️ (bounces and fades)
Umbrella: ☂️ (scales)
Snowflake: ❄️ (rotates fully and descends)
Pizza: 🍕 (scales)
Hamburger: 🍔 (scales)
Apple: 🍎 (rotates)
Banana: 🍌 (scales)
Dog: 🐶 (bounces and rotates)
Cat: 🐱 (scales)
Lion: 🦁 (rotates)
Elephant: 🐘 (bounces)
Car: 🚗 (moves horizontally)
Airplane: ✈️ (tilts)
Bicycle: 🚲 (moves horizontally)
Book: 📖 (scales)
Laptop: 💻 (bounces)
Phone: 📱 (scales)
Camera: 📷 (rotates)
Globe: 🌍 (rotates fully)
House: 🏠 (scales)
Tree: 🌳 (bounces slightly)
Flower: 🌸 (scales and rotates fully)
Rainbow: 🌈 (fades)
Lightning: ⚡ (scales)
Bomb: 💣 (scales and rotates fully)
Gift: 🎁 (scales)
Balloon: 🎈 (ascends)
Trophy: 🏆 (scales)
Soccer: ⚽ (rotates fully)
Basketball: 🏀 (bounces high)
Guitar: 🎸 (rotates)
Microphone: 🎤 (scales)
Headphones: 🎧 (bounces)
Artist: 🎨 (rotates fully)
Light Bulb: 💡 (fades and scales)
Key: 🔑 (rotates)
Lock: 🔒 (scales)
Envelope: ✉️ (bounces)
Calendar: 📅 (scales)
Clock: 🕒 (rotates fully)
Bell: 🔔 (rings)
Crown: 👑 (bounces)
Ring: 💍 (rotates fully)
Gem: 💎 (scales)
Robot: 🤖 (moves)
Alien: 👽 (scales and rotates fully)
Ghost: 👻 (fades and ascends)
Skull: 💀 (rotates)
Poop: 💩 (scales and descends)
Jack O Lantern: 🎃 (scales)
Christmas Tree: 🎄 (bounces and rotates)
Santa: 🎅 (scales)
Fireworks: 🎆 (scales)
Sparkles: ✨ (fades and scales)
Globe with Meridians: 🌐 (rotates fully)
World Map: 🗺️ (scales)
Microscope: 🔬 (bounces)
Telescope: 🔭 (scales)
Satellite: 🛰️ (rotates fully)
Couch: 🛋️ (bounces)
Bed: 🛏️ (scales)
Door: 🚪 (moves horizontally)
Chair: 🪑 (bounces)
Window: 🪟 (fades)
Stairs: 🪜 (scales)
Elevator: 🛗 (ascends)
Mirror: 🪞 (rotates 180 degrees)
Plunger: 🪠 (bounces)
Bucket: 🪣 (scales)
Mouse Trap: 🪤 (moves horizontally)
Toothbrush: 🪥 (rotates)
Rock: 🪨 (descends)
Wood: 🪵 (scales)
Hut: 🛖 (bounces)
Pickup Truck: 🛻 (moves horizontally)
Roller Skate: 🛼 (rotates fully)
Piñata: 🪅 (scales)
Nesting Dolls: 🪆 (bounces)
Sewing Needle: 🪡 (rotates)
Knot: 🪢 (scales)
Thong Sandal: 🩴 (bounces)
Military Helmet: 🪖 (scales)
Accordion: 🪗 (expands horizontally)
Long Drum: 🪘 (rotates)
Coin: 🪙 (rotates fully)
Boomerang: 🪃 (rotates 180 degrees)
Carpentry Saw: 🪚 (moves horizontally)
Screwdriver: 🪛 (rotates fully)
Ladder: 🪜 (ascends)
Hook: 🪝 (scales)
Abacus: 🧮 (bounces)
Fire Extinguisher: 🧯 (scales)
Toolbox: 🧰 (bounces)
Magnet: 🧲 (moves horizontally)
Test Tube: 🧪 (rotates)
Petri Dish: 🧫 (scales)
DNA: 🧬 (rotates fully)
Drop of Blood: 🩸 (descends)
Adhesive Bandage: 🩹 (scales)
Stethoscope: 🩺 (bounces)
Syringe: 💉 (moves horizontally)
Pill: 💊 (rotates fully)
Brain: 🧠 (scales)
Lungs: 🫁 (breathes)
Tooth: 🦷 (scales)
Bone: 🦴 (rotates)
Eyes Icon: 👀 (bounces)
Eye: 👁️ (fades)
Ear: 👂 (scales)
Nose: 👃 (bounces slightly)
Mouth: 👄 (scales)
Tongue Icon: 👅 (wiggles)

You can expand the library by following these steps:

1. Create a new component in src/components.
2. Define the emoji character and its animation properties (scale, rotate, bounce, fade, etc.) using Framer Motion.
3. Export your new component in src/index.js.
4. Import and use it in your project just like the built-in emojis. You can expand the library by creating a new component in src/components and exporting it in src/index.js. Define the emoji character and its animation properties, such as scale, rotate, or y-position changes using Framer Motion.