Smiley Emoji
If you want any of these emojis displayed in HTML, you can use the decimal (dec) or hexadecimal (hex) reference found in the table below.
Example
Will display as:
| Char | Dec | Hex | Entity | Name |
|---|---|---|---|---|
| 😀 | 128512 | 1F600 | GRINNING FACE | |
| 😁 | 128513 | 1F601 | GRINNING FACE WITH SMILING EYES | |
| 😂 | 128514 | 1F602 | FACE WITH TEARS OF JOY | |
| 😃 | 128515 | 1F603 | SMILING FACE WITH OPEN MOUTH | |
| 😄 | 128516 | 1F604 | SMILING FACE WITH OPEN MOUTH AND SMILING EYES | |
| 😅 | 128517 | 1F605 | SMILING FACE WITH OPEN MOUTH AND COLD SWEAT | |
| 😆 | 128518 | 1F606 | SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES | |
| 😇 | 128519 | 1F607 | SMILING FACE WITH HALO | |
| 😈 | 128520 | 1F608 | SMILING FACE WITH HORNS | |
| 😉 | 128521 | 1F609 | WINKING FACE | |
| 😊 | 128522 | 1F60A | SMILING FACE WITH SMILING EYES | |
| 😋 | 128523 | 1F60B | FACE SAVOURING DELICIOUS FOOD | |
| 😌 | 128524 | 1F60C | RELIEVED FACE | |
| 😍 | 128525 | 1F60D | SMILING FACE WITH HEART-SHAPED EYES | |
| 😎 | 128526 | 1F60E | SMILING FACE WITH SUNGLASSES | |
| 😏 | 128527 | 1F60F | SMIRKING FACE | |
| 😐 | 128528 | 1F610 | NEUTRAL FACE | |
| 😑 | 128529 | 1F611 | EXPRESSIONLESS FACE | |
| 😒 | 128530 | 1F612 | UNAMUSED FACE | |
| 😓 | 128531 | 1F613 | FACE WITH COLD SWEAT | |
| 😔 | 128532 | 1F614 | PENSIVE FACE | |
| 😕 | 128533 | 1F615 | CONFUSED FACE | |
| 😖 | 128534 | 1F616 | CONFOUNDED FACE | |
| 😗 | 128535 | 1F617 | KISSING FACE | |
| 😘 | 128536 | 1F618 | FACE THROWING A KISS | |
| 😙 | 128537 | 1F619 | KISSING FACE WITH SMILING EYES | |
| 😚 | 128538 | 1F61A | KISSING FACE WITH CLOSED EYES | |
| 😛 | 128539 | 1F61B | FACE WITH STUCK-OUT TONGUE | |
| 😜 | 128540 | 1F61C | FACE WITH STUCK-OUT TONGUE AND WINKING EYE | |
| 😝 | 128541 | 1F61D | FACE WITH STUCK-OUT TONGUE AND TIGHTLY-CLOSED EYES | |
| 😞 | 128542 | 1F61E | DISAPPOINTED FACE | |
| 😟 | 128543 | 1F61F | WORRIED FACE | |
| 😠 | 128544 | 1F620 | ANGRY FACE | |
| 😡 | 128545 | 1F621 | POUTING FACE | |
| 😢 | 128546 | 1F622 | CRYING FACE | |
| 😣 | 128547 | 1F623 | PERSEVERING FACE | |
| 😤 | 128548 | 1F624 | FACE WITH LOOK OF TRIUMPH | |
| 😥 | 128549 | 1F625 | DISAPPOINTED BUT RELIEVED FACE | |
| 😦 | 128550 | 1F626 | FROWNING FACE WITH OPEN MOUTH | |
| 😧 | 128551 | 1F627 | ANGUISHED FACE | |
| 😨 | 128552 | 1F628 | FEARFUL FACE | |
| 😩 | 128553 | 1F629 | WEARY FACE | |
| 😪 | 128554 | 1F62A | SLEEPY FACE | |
| 😫 | 128555 | 1F62B | TIRED FACE | |
| 😬 | 128556 | 1F62C | GRIMACING FACE | |
| 😭 | 128557 | 1F62D | LOUDLY CRYING FACE | |
| 😮 | 128558 | 1F62E | FACE WITH OPEN MOUTH | |
| 😯 | 128559 | 1F62F | HUSHED FACE | |
| 😰 | 128560 | 1F630 | FACE WITH OPEN MOUTH AND COLD SWEAT | |
| 😱 | 128561 | 1F631 | FACE SCREAMING IN FEAR | |
| 😲 | 128562 | 1F632 | ASTONISHED FACE | |
| 😳 | 128563 | 1F633 | FLUSHED FACE | |
| 😴 | 128564 | 1F634 | SLEEPING FACE | |
| 😵 | 128565 | 1F635 | DIZZY FACE | |
| 😶 | 128566 | 1F636 | FACE WITHOUT MOUTH | |
| 😷 | 128567 | 1F637 | FACE WITH MEDICAL MASK | |
| 🙁 | 128577 | 1F641 | ||
| 🙂 | 128578 | 1F642 | ||
| 🙃 | 128579 | 1F643 | ||
| 🙄 | 128580 | 1F644 | ||
| 🤐 | 129296 | 1F910 | ||
| 🤑 | 129297 | 1F911 | ||
| 🤒 | 129298 | 1F912 | ||
| 🤓 | 129299 | 1F913 | ||
| 🤔 | 129300 | 1F914 | ||
| 🤕 | 129301 | 1F915 | ||
| 🤠 | 129312 | 1F920 | ||
| 🤡 | 129313 | 1F921 | ||
| 🤢 | 129314 | 1F922 | ||
| 🤣 | 129315 | 1F923 | ||
| 🤤 | 129316 | 1F924 | ||
| 🤥 | 129317 | 1F925 | ||
| 🤧 | 129319 | 1F927 | ||
| 🤨 | 129320 | 1F928 | ||
| 🤩 | 129321 | 1F929 | ||
| 🤪 | 129322 | 1F92A | ||
| 🤫 | 129323 | 1F92B | ||
| 🤬 | 129324 | 1F92C | ||
| 🤭 | 129325 | 1F92D | ||
| 🤮 | 129326 | 1F92E | ||
| 🤯 | 129327 | 1F92F | ||
| 🧐 | 129488 | 1F9D0 |
How to make emojis with CSS
The emoji should be used to check the feedback of a user for the website. These emojis represent the emotions of a user for your website.
Example
Hover over the image to see the animation effect.
.smiling-face
Define a class .smiling-face for the face.
Example
position:relative; is necessary to position the descendent elements relative to this element.
Tip: Remember that the percentage values of length of the child elements are calculated with respect to the parent element.
.left-eye
Now define a class .left-eye for the left-eye. It is a child of the .face class element.
Example
- position:absolute; property defines position of the left-eye (using left and top properties).
- The width should be greater than height.
- 23% of width and 20% of height are the percentage values with respect to the parent element (.face).
- 45% value converts the rectangular shape into a elliptical shape
.right-eye
The dimesions of the left-eye should be the same as right-eye. Define .right-eye class for the right-eye. It is also a child of the .smiling-face class element.
Example
The properties of the right-eye are the same as left-eye. But there is only one difference. The left property should be replaced by the right property.
left-pupil
.left-pupil class name is specified for the left-pupil. Now, it is a child of the left-eye.
Example
- 55% value represents the distance between the top side of the left-pupil and and top side of the left-eye.
- 26% value represents the distance between the left side of the left-pupil and and left side of the left-eye.
- width is greater than height to make it elliptical.
right-pupil
.right-pupil class name is specified for the right-pupil. It has the same properties as the .left-pupil class has. But it is a child of the .right-eye element.
lip
.lip class element represents lip of the emoji. It is a child of the .smiling-face class element.
Example
position:absolute; property must be present to align it at the center.
When a user hovers the mouse over the emoji, the emoji should present a smiling view. The following properties should be changed.
Example
When a user hovers the mouse over the .smiling-face class element, the .lip class element changes its properties.
Similarly, the properties of .left-pupil and .right-pupil are changed.
Example
Same is the case with the .right-pupil element.