As a React application developer, I recently built an app that needed to use TikTok Emojis, and I encountered a frustrating issue: TikTok Emojis are not regular emojis that can be expressed using Unicode.

At first, I tried using online image resources, but this introduced another troubling problem - image resources led to additional network requests, which wasn't what I wanted.

I was looking for an icon library similar to lucide-react to solve my problem. I searched extensively online and even posted on StackOverflow for help (though my question was closed because it was considered seeking recommendations for software libraries, tutorials, tools, books, or other external resources).

However, fortunately, shortly after my question was closed, I found a UI library for TikTok Emojis on GitHub called @tiktok-emojis/react, and they even provide a Vue version implementation @tiktok-emojis/vue! They also have an Interactive Demo: The ultimate tool for TikTok emoji codes, meanings, and copy-paste functionality.

1. For Regular Emojis vs Special Emojis

In my opinion, for displaying regular emojis in React applications, using Unicode is the simplest approach. However, for those special Emojis (like TikTok's secret emojis), I would prefer to encapsulate them as individual components - similar to lucide-react with type-hinted React components.

2. The TikTok Emoji Solution

The @tiktok-emojis/react library offers exactly what I was looking for:

• Complete Collection: All 46 TikTok hidden emojis ([smile], [happy],[angry], etc.).
• TypeScript Support: Full type safety with comprehensive type definitions.
• Tree-Shakable: Import only the components you need for optimal bundle sizes.
• Zero Dependencies: Lightweight SVG components with no external dependencies.
• Easy Integration: Works just like lucide-react with simple imports.

2.1 Basic Usage Example:

import React from "react";
import { Angel, Happy, Cry, Laugh } from "@tiktok-emojis/react";

export default function App() {
  return (
    <div>
      <Angel size={32} />
      <Happy size={48} />
      <Cry width={24} height={24} />
      <Laugh size="6rem" />
    </div>
  );
}

3. Why This Approach Works Better

Unlike regular Unicode emojis, TikTok's secret emojis use special codes like [smile], [happy], [angry], etc. These only work within the TikTok app itself and aren't standard Unicode characters.

By using a component-based approach like @tiktok-emojis/react, you get:

• Type Safety: Similar to lucide-react, you get full TypeScript support.
• Consistent Styling: All emojis maintain the same visual style across platforms.
• Performance: Tree-shakable imports mean you only bundle what you use.
• Developer Experience: Easy imports with autocomplete, just like any other React component library.

4. Recommendation

For React applications:

• Regular emojis: Use Unicode characters with String.fromCodePoint() as mentioned in the original answers.
• Special emojis (like TikTok emojis): Use dedicated component libraries like @tiktok-emojis/react.

This approach gives you the best of both worlds - simplicity for standard emojis and robust component architecture for specialized emoji sets, similar to how lucide-react handles icons.

5. References

• 📦️ TikTok Emojis SDK GitHub Repository: https://github.com/boqingren/tiktok-emojis.
• 📦️ @tiktok-emojis/react: https://www.npmjs.com/package/@tiktok-emojis/react.
• 📦️ @tiktok-emojis/vue: https://www.npmjs.com/package/@tiktok-emojis/vue.
• 🎮 TikTok Emojis SDK Interactive Demo: https://tiktokemojis.click.
• 📚 TikTok Emojis SDK Documentation Overview: https://tiktokemojis.click/docs.
• 📖 TikTok Emojis SDK React Documentation: https://tiktokemojis.click/docs/react.
• 📖 TikTok Emojis SDK Vue Documentation: https://tiktokemojis.click/docs/vue.