TwemojIcons

Twemojis like Font Icons

A simple way to implement emojis and icons on your website.

Built like FontAwesome for Twemojis



Download Documentation
All TwemojIcons | Github Project

Twemoj-What?


TwemojIcons is a CSS Framework to implement Twemojis on your website with minimal code like FontAwesome.

Thanks to Twemoji's CDN, TwemojIcons are fast, easy and reliable.

And the best part... They offer 2000+ Icons/Emojis unlike other font icons.

If you are looking for more info, just read about the awesomeness of FontAwesome and Twemojis and combine the two.

The Code


Include in the <head>

<link rel="stylesheet" href="path/to/twimojicons.min.css />

And use 

<i class="ti grinning-face" ></i>

Or you can use the alternative names for many of the twemojis

<i class="ti happy" ></i>

And the emoji will be created.

How to Use


  1. Just include twiojicons.min.css among your webpage resources.
  2. Use the <span></span> or <i></i> where you want the icon displayed.
  3. Declare the <span></span> or <i></i> tag with ti class along with the size (optional) and icon name (eg.: rofl) and skin-tone (wherever applicable and required) as classes.
  4. No repeating the codefix again and again. Just type ti once and then simply add the emoji names, sizes and animations without the codefix.
  5. Save your work!

Sizes, Spins and Rotates


Additional classes can be added to these emojis. Again.. Without the prefix.

x2, x3, x4, x5 to increase size. default: x1

The above twemojis are in 5 sizes respectively

spinfor spins,

Add ccw also for CCW rotation

rotate-* to rotate,

* can be 90, 180, 270

And flip-* to flip.

* can be h , v.



Apart from these conventional, you can also reduce the size and add skin tones


Here are a few more added classes.


x1-2, x1-3, x1-4 to reduce size.

Above twemojis are in 1, 2/3, 1/2, 1-3 & 1/4 sizes inside a <h1> respectively

Add *-light|medium-light|medium|medium-dark|dark-st to add 5 skin tones to human twemojicons.

: <i class="ti man-student"></i> - No Skin tone specified.
: <i class="ti man-student light-st"></i> - Medium Skin Tone.
: <i class="ti man-student medium-light-st"></i> - Medium Light Skin Tone.
: <i class="ti man-student medium-st"></i> - Medium Skin Tone.
: <i class="ti man-student medium-dark-st"></i> - Medium Dark Skin Tone.
: <i class="ti man-student dark-st"></i> - Dark Skin Tone.


The SVGs are powered by Twemoji's CDN at MaxCDN and no graphics has been changed or modified.