openmoji
Version:
Open source emojis for designers, developers and everyone else!
1,092 lines (1,091 loc) • 2.78 MB
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title>OpenMoji Catalog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital@0;1&display=swap" rel="stylesheet">
<style>
body[color-scheme='dark'] {
--background-color-body: #17181c;
--background-hover: #333;
}
body[color-scheme='light'] {
--background-color-body: white;
--background-hover: url("guidelines/openmoji-template.svg") #fff;
}
body {
margin: 0;
padding: 0;
background-color: var(--background-color-body);
transition: background-color 0.5s ease;
line-height: 0;
font-family: "Source Sans Pro", sans-serif;
}
header {
border-bottom: rgba(129, 128, 128, 0.5) 1px solid;
background-color: #FFF;
box-sizing: border-box;
padding: 0 50px;
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
max-width: 100vw;
position: sticky;
top: 0;
}
header nav {
display: flex;
align-items: center;
}
header nav ul {
display: flex;
padding: 0;
margin: 0;
}
header nav ul li {
box-sizing: border-box;
height: 30px;
margin-right: 30px;
cursor: default;
list-style: none;
}
header nav ul li a {
vertical-align: middle;
display: inline-block;
line-height: 1.55rem;
font-size: 17px;
}
a {
text-decoration: none;
color: #525252;
transition: all 0.2s;
}
a:hover {
color: #101010;
}
#emojis {
max-width: 864px;
margin: 0 auto;
}
img, button {
width: 72px;
height: 72px;
}
button {
display: inline-block;
border: none;
padding: 0;
margin: 0;
text-decoration: none;
background: transparent;
border-radius: 5px;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
button:hover, button:focus {
background: var(--background-hover);
transform: scale(1.5);
}
button:focus {
outline: 1px solid var(--background-color-toggle);
outline-offset: -4px;
}
button:active {
transform: scale(1.4);
}
button p {
line-height: 72px;
font-size: 44px;
margin: 0;
}
li img {
width: 30px;
height: 30px;
margin-top: -5px;
}
li p {
margin-top: 10px;
}
li button {
color: inherit;
height: auto;
width: auto;
font-family: inherit;
background: none;
padding: 0 5px;
margin: 0 5px;
font-size: 17px;
}
li button:hover {
background: none;
transform: none;
color: #555;
}
li button:active {
background: none;
}
li button:focus {
outline: 1px solid #0003;
outline-offset: -2px;
background: none;
transform: none;
}
li.selected {
border-bottom: 4px solid #3D98BB;
}
#pngsvgToggle {
bottom: 100px;
left: 10px;
}
#openmojisystemToggle {
bottom: 55px;
left: 10px;
}
#colorblackToggle {
bottom: 10px;
left: 10px;
}
#backgroundToggle {
position: fixed;
bottom: 10px;
right: 10px;
}
.omBlack p {
font-family: OpenMojiBlack;
}
.omColor p {
font-family: OpenMojiColor;
}
@media only screen and (max-width:576px) {
button, img {
height: 14vw;
width: 14vw;
}
.toggle {
width: calc(calc(100% - 50px) / 3);
height: auto;
line-height: normal;
position: static;
margin: 2.5px;
}
#toggles {
display: flex;
flex-direction: row;
width: 100%;
}
#backgroundToggle {
position: static;
}
#color, #black, #system {
margin: 0 1vw;
}
}
@font-face {
font-family: 'OpenMojiBlack';
src: url('font/glyf/OpenMoji-Black.ttf') format('truetype');
}
@font-face {
font-family: 'OpenMojiColor';
src: url('font/glyf_colr_0/OpenMoji-Color.ttf') format('truetype');
}
</style>
</head>
<body color-scheme='light'>
<header class="page-header">
<nav>
<ul>
<li><p>OpenMoji</p></li>
<li class="selected" id='pngT'><button>PNG</button></li>
<li id='svgT'><button>SVG</button></li>
<li id='openmojiT'><button>Font</button></li>
<li id='systemT'><button>System</button></li>
</ul>
</nav>
<nav>
<ul>
<li class='selected' id='colorT'><button>Color</button></li>
<li id='blackT'><button>Black</button></li>
<li id='backgroundT'>
<button>
<img alt="crescent moon" title="crescent moon - 1F319" src="color/svg/1F319.svg">
</button>
</li>
</ul>
</nav>
</header>
<p style='text-align: center; padding: 15px; font-style: italic; color: #999;'> click to copy codepoint </p>
<div id='emojis'>
<div id='pngColor'>
<button onclick="copyToClipboard('1F600')">
<img alt="grinning face"
title="grinning face - 1F600"
src="color/72x72/1F600.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F603')">
<img alt="grinning face with big eyes"
title="grinning face with big eyes - 1F603"
src="color/72x72/1F603.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F604')">
<img alt="grinning face with smiling eyes"
title="grinning face with smiling eyes - 1F604"
src="color/72x72/1F604.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F601')">
<img alt="beaming face with smiling eyes"
title="beaming face with smiling eyes - 1F601"
src="color/72x72/1F601.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F606')">
<img alt="grinning squinting face"
title="grinning squinting face - 1F606"
src="color/72x72/1F606.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F605')">
<img alt="grinning face with sweat"
title="grinning face with sweat - 1F605"
src="color/72x72/1F605.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F923')">
<img alt="rolling on the floor laughing"
title="rolling on the floor laughing - 1F923"
src="color/72x72/1F923.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F602')">
<img alt="face with tears of joy"
title="face with tears of joy - 1F602"
src="color/72x72/1F602.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F642')">
<img alt="slightly smiling face"
title="slightly smiling face - 1F642"
src="color/72x72/1F642.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F643')">
<img alt="upside-down face"
title="upside-down face - 1F643"
src="color/72x72/1F643.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE0')">
<img alt="melting face"
title="melting face - 1FAE0"
src="color/72x72/1FAE0.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F609')">
<img alt="winking face"
title="winking face - 1F609"
src="color/72x72/1F609.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60A')">
<img alt="smiling face with smiling eyes"
title="smiling face with smiling eyes - 1F60A"
src="color/72x72/1F60A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F607')">
<img alt="smiling face with halo"
title="smiling face with halo - 1F607"
src="color/72x72/1F607.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F970')">
<img alt="smiling face with hearts"
title="smiling face with hearts - 1F970"
src="color/72x72/1F970.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60D')">
<img alt="smiling face with heart-eyes"
title="smiling face with heart-eyes - 1F60D"
src="color/72x72/1F60D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F929')">
<img alt="star-struck"
title="star-struck - 1F929"
src="color/72x72/1F929.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F618')">
<img alt="face blowing a kiss"
title="face blowing a kiss - 1F618"
src="color/72x72/1F618.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F617')">
<img alt="kissing face"
title="kissing face - 1F617"
src="color/72x72/1F617.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('263A')">
<img alt="smiling face"
title="smiling face - 263A"
src="color/72x72/263A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61A')">
<img alt="kissing face with closed eyes"
title="kissing face with closed eyes - 1F61A"
src="color/72x72/1F61A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F619')">
<img alt="kissing face with smiling eyes"
title="kissing face with smiling eyes - 1F619"
src="color/72x72/1F619.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F972')">
<img alt="smiling face with tear"
title="smiling face with tear - 1F972"
src="color/72x72/1F972.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60B')">
<img alt="face savoring food"
title="face savoring food - 1F60B"
src="color/72x72/1F60B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61B')">
<img alt="face with tongue"
title="face with tongue - 1F61B"
src="color/72x72/1F61B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61C')">
<img alt="winking face with tongue"
title="winking face with tongue - 1F61C"
src="color/72x72/1F61C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92A')">
<img alt="zany face"
title="zany face - 1F92A"
src="color/72x72/1F92A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61D')">
<img alt="squinting face with tongue"
title="squinting face with tongue - 1F61D"
src="color/72x72/1F61D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F911')">
<img alt="money-mouth face"
title="money-mouth face - 1F911"
src="color/72x72/1F911.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F917')">
<img alt="smiling face with open hands"
title="smiling face with open hands - 1F917"
src="color/72x72/1F917.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92D')">
<img alt="face with hand over mouth"
title="face with hand over mouth - 1F92D"
src="color/72x72/1F92D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE2')">
<img alt="face with open eyes and hand over mouth"
title="face with open eyes and hand over mouth - 1FAE2"
src="color/72x72/1FAE2.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE3')">
<img alt="face with peeking eye"
title="face with peeking eye - 1FAE3"
src="color/72x72/1FAE3.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92B')">
<img alt="shushing face"
title="shushing face - 1F92B"
src="color/72x72/1F92B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F914')">
<img alt="thinking face"
title="thinking face - 1F914"
src="color/72x72/1F914.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE1')">
<img alt="saluting face"
title="saluting face - 1FAE1"
src="color/72x72/1FAE1.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F910')">
<img alt="zipper-mouth face"
title="zipper-mouth face - 1F910"
src="color/72x72/1F910.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F928')">
<img alt="face with raised eyebrow"
title="face with raised eyebrow - 1F928"
src="color/72x72/1F928.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F610')">
<img alt="neutral face"
title="neutral face - 1F610"
src="color/72x72/1F610.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F611')">
<img alt="expressionless face"
title="expressionless face - 1F611"
src="color/72x72/1F611.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F636')">
<img alt="face without mouth"
title="face without mouth - 1F636"
src="color/72x72/1F636.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE5')">
<img alt="dotted line face"
title="dotted line face - 1FAE5"
src="color/72x72/1FAE5.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F636-200D-1F32B-FE0F')">
<img alt="face in clouds"
title="face in clouds - 1F636-200D-1F32B-FE0F"
src="color/72x72/1F636-200D-1F32B-FE0F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60F')">
<img alt="smirking face"
title="smirking face - 1F60F"
src="color/72x72/1F60F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F612')">
<img alt="unamused face"
title="unamused face - 1F612"
src="color/72x72/1F612.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F644')">
<img alt="face with rolling eyes"
title="face with rolling eyes - 1F644"
src="color/72x72/1F644.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62C')">
<img alt="grimacing face"
title="grimacing face - 1F62C"
src="color/72x72/1F62C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62E-200D-1F4A8')">
<img alt="face exhaling"
title="face exhaling - 1F62E-200D-1F4A8"
src="color/72x72/1F62E-200D-1F4A8.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F925')">
<img alt="lying face"
title="lying face - 1F925"
src="color/72x72/1F925.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE8')">
<img alt="shaking face"
title="shaking face - 1FAE8"
src="color/72x72/1FAE8.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F642-200D-2194-FE0F')">
<img alt="head shaking horizontally"
title="head shaking horizontally - 1F642-200D-2194-FE0F"
src="color/72x72/1F642-200D-2194-FE0F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F642-200D-2195-FE0F')">
<img alt="head shaking vertically"
title="head shaking vertically - 1F642-200D-2195-FE0F"
src="color/72x72/1F642-200D-2195-FE0F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60C')">
<img alt="relieved face"
title="relieved face - 1F60C"
src="color/72x72/1F60C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F614')">
<img alt="pensive face"
title="pensive face - 1F614"
src="color/72x72/1F614.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62A')">
<img alt="sleepy face"
title="sleepy face - 1F62A"
src="color/72x72/1F62A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F924')">
<img alt="drooling face"
title="drooling face - 1F924"
src="color/72x72/1F924.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F634')">
<img alt="sleeping face"
title="sleeping face - 1F634"
src="color/72x72/1F634.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F637')">
<img alt="face with medical mask"
title="face with medical mask - 1F637"
src="color/72x72/1F637.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F912')">
<img alt="face with thermometer"
title="face with thermometer - 1F912"
src="color/72x72/1F912.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F915')">
<img alt="face with head-bandage"
title="face with head-bandage - 1F915"
src="color/72x72/1F915.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F922')">
<img alt="nauseated face"
title="nauseated face - 1F922"
src="color/72x72/1F922.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92E')">
<img alt="face vomiting"
title="face vomiting - 1F92E"
src="color/72x72/1F92E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F927')">
<img alt="sneezing face"
title="sneezing face - 1F927"
src="color/72x72/1F927.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F975')">
<img alt="hot face"
title="hot face - 1F975"
src="color/72x72/1F975.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F976')">
<img alt="cold face"
title="cold face - 1F976"
src="color/72x72/1F976.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F974')">
<img alt="woozy face"
title="woozy face - 1F974"
src="color/72x72/1F974.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F635')">
<img alt="face with crossed-out eyes"
title="face with crossed-out eyes - 1F635"
src="color/72x72/1F635.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F635-200D-1F4AB')">
<img alt="face with spiral eyes"
title="face with spiral eyes - 1F635-200D-1F4AB"
src="color/72x72/1F635-200D-1F4AB.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92F')">
<img alt="exploding head"
title="exploding head - 1F92F"
src="color/72x72/1F92F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F920')">
<img alt="cowboy hat face"
title="cowboy hat face - 1F920"
src="color/72x72/1F920.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F973')">
<img alt="partying face"
title="partying face - 1F973"
src="color/72x72/1F973.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F978')">
<img alt="disguised face"
title="disguised face - 1F978"
src="color/72x72/1F978.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F60E')">
<img alt="smiling face with sunglasses"
title="smiling face with sunglasses - 1F60E"
src="color/72x72/1F60E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F913')">
<img alt="nerd face"
title="nerd face - 1F913"
src="color/72x72/1F913.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F9D0')">
<img alt="face with monocle"
title="face with monocle - 1F9D0"
src="color/72x72/1F9D0.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F615')">
<img alt="confused face"
title="confused face - 1F615"
src="color/72x72/1F615.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FAE4')">
<img alt="face with diagonal mouth"
title="face with diagonal mouth - 1FAE4"
src="color/72x72/1FAE4.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61F')">
<img alt="worried face"
title="worried face - 1F61F"
src="color/72x72/1F61F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F641')">
<img alt="slightly frowning face"
title="slightly frowning face - 1F641"
src="color/72x72/1F641.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2639')">
<img alt="frowning face"
title="frowning face - 2639"
src="color/72x72/2639.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62E')">
<img alt="face with open mouth"
title="face with open mouth - 1F62E"
src="color/72x72/1F62E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62F')">
<img alt="hushed face"
title="hushed face - 1F62F"
src="color/72x72/1F62F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F632')">
<img alt="astonished face"
title="astonished face - 1F632"
src="color/72x72/1F632.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F633')">
<img alt="flushed face"
title="flushed face - 1F633"
src="color/72x72/1F633.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F97A')">
<img alt="pleading face"
title="pleading face - 1F97A"
src="color/72x72/1F97A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F979')">
<img alt="face holding back tears"
title="face holding back tears - 1F979"
src="color/72x72/1F979.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F626')">
<img alt="frowning face with open mouth"
title="frowning face with open mouth - 1F626"
src="color/72x72/1F626.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F627')">
<img alt="anguished face"
title="anguished face - 1F627"
src="color/72x72/1F627.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F628')">
<img alt="fearful face"
title="fearful face - 1F628"
src="color/72x72/1F628.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F630')">
<img alt="anxious face with sweat"
title="anxious face with sweat - 1F630"
src="color/72x72/1F630.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F625')">
<img alt="sad but relieved face"
title="sad but relieved face - 1F625"
src="color/72x72/1F625.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F622')">
<img alt="crying face"
title="crying face - 1F622"
src="color/72x72/1F622.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62D')">
<img alt="loudly crying face"
title="loudly crying face - 1F62D"
src="color/72x72/1F62D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F631')">
<img alt="face screaming in fear"
title="face screaming in fear - 1F631"
src="color/72x72/1F631.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F616')">
<img alt="confounded face"
title="confounded face - 1F616"
src="color/72x72/1F616.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F623')">
<img alt="persevering face"
title="persevering face - 1F623"
src="color/72x72/1F623.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F61E')">
<img alt="disappointed face"
title="disappointed face - 1F61E"
src="color/72x72/1F61E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F613')">
<img alt="downcast face with sweat"
title="downcast face with sweat - 1F613"
src="color/72x72/1F613.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F629')">
<img alt="weary face"
title="weary face - 1F629"
src="color/72x72/1F629.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F62B')">
<img alt="tired face"
title="tired face - 1F62B"
src="color/72x72/1F62B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F971')">
<img alt="yawning face"
title="yawning face - 1F971"
src="color/72x72/1F971.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F624')">
<img alt="face with steam from nose"
title="face with steam from nose - 1F624"
src="color/72x72/1F624.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F621')">
<img alt="enraged face"
title="enraged face - 1F621"
src="color/72x72/1F621.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F620')">
<img alt="angry face"
title="angry face - 1F620"
src="color/72x72/1F620.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F92C')">
<img alt="face with symbols on mouth"
title="face with symbols on mouth - 1F92C"
src="color/72x72/1F92C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F608')">
<img alt="smiling face with horns"
title="smiling face with horns - 1F608"
src="color/72x72/1F608.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F47F')">
<img alt="angry face with horns"
title="angry face with horns - 1F47F"
src="color/72x72/1F47F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F480')">
<img alt="skull"
title="skull - 1F480"
src="color/72x72/1F480.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2620')">
<img alt="skull and crossbones"
title="skull and crossbones - 2620"
src="color/72x72/2620.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A9')">
<img alt="pile of poo"
title="pile of poo - 1F4A9"
src="color/72x72/1F4A9.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F921')">
<img alt="clown face"
title="clown face - 1F921"
src="color/72x72/1F921.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F479')">
<img alt="ogre"
title="ogre - 1F479"
src="color/72x72/1F479.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F47A')">
<img alt="goblin"
title="goblin - 1F47A"
src="color/72x72/1F47A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F47B')">
<img alt="ghost"
title="ghost - 1F47B"
src="color/72x72/1F47B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F47D')">
<img alt="alien"
title="alien - 1F47D"
src="color/72x72/1F47D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F47E')">
<img alt="alien monster"
title="alien monster - 1F47E"
src="color/72x72/1F47E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F916')">
<img alt="robot"
title="robot - 1F916"
src="color/72x72/1F916.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63A')">
<img alt="grinning cat"
title="grinning cat - 1F63A"
src="color/72x72/1F63A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F638')">
<img alt="grinning cat with smiling eyes"
title="grinning cat with smiling eyes - 1F638"
src="color/72x72/1F638.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F639')">
<img alt="cat with tears of joy"
title="cat with tears of joy - 1F639"
src="color/72x72/1F639.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63B')">
<img alt="smiling cat with heart-eyes"
title="smiling cat with heart-eyes - 1F63B"
src="color/72x72/1F63B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63C')">
<img alt="cat with wry smile"
title="cat with wry smile - 1F63C"
src="color/72x72/1F63C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63D')">
<img alt="kissing cat"
title="kissing cat - 1F63D"
src="color/72x72/1F63D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F640')">
<img alt="weary cat"
title="weary cat - 1F640"
src="color/72x72/1F640.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63F')">
<img alt="crying cat"
title="crying cat - 1F63F"
src="color/72x72/1F63F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F63E')">
<img alt="pouting cat"
title="pouting cat - 1F63E"
src="color/72x72/1F63E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F648')">
<img alt="see-no-evil monkey"
title="see-no-evil monkey - 1F648"
src="color/72x72/1F648.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F649')">
<img alt="hear-no-evil monkey"
title="hear-no-evil monkey - 1F649"
src="color/72x72/1F649.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F64A')">
<img alt="speak-no-evil monkey"
title="speak-no-evil monkey - 1F64A"
src="color/72x72/1F64A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F48C')">
<img alt="love letter"
title="love letter - 1F48C"
src="color/72x72/1F48C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F498')">
<img alt="heart with arrow"
title="heart with arrow - 1F498"
src="color/72x72/1F498.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49D')">
<img alt="heart with ribbon"
title="heart with ribbon - 1F49D"
src="color/72x72/1F49D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F496')">
<img alt="sparkling heart"
title="sparkling heart - 1F496"
src="color/72x72/1F496.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F497')">
<img alt="growing heart"
title="growing heart - 1F497"
src="color/72x72/1F497.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F493')">
<img alt="beating heart"
title="beating heart - 1F493"
src="color/72x72/1F493.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49E')">
<img alt="revolving hearts"
title="revolving hearts - 1F49E"
src="color/72x72/1F49E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F495')">
<img alt="two hearts"
title="two hearts - 1F495"
src="color/72x72/1F495.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49F')">
<img alt="heart decoration"
title="heart decoration - 1F49F"
src="color/72x72/1F49F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2763')">
<img alt="heart exclamation"
title="heart exclamation - 2763"
src="color/72x72/2763.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F494')">
<img alt="broken heart"
title="broken heart - 1F494"
src="color/72x72/1F494.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2764-FE0F-200D-1F525')">
<img alt="heart on fire"
title="heart on fire - 2764-FE0F-200D-1F525"
src="color/72x72/2764-FE0F-200D-1F525.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2764-FE0F-200D-1FA79')">
<img alt="mending heart"
title="mending heart - 2764-FE0F-200D-1FA79"
src="color/72x72/2764-FE0F-200D-1FA79.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('2764')">
<img alt="red heart"
title="red heart - 2764"
src="color/72x72/2764.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FA77')">
<img alt="pink heart"
title="pink heart - 1FA77"
src="color/72x72/1FA77.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F9E1')">
<img alt="orange heart"
title="orange heart - 1F9E1"
src="color/72x72/1F9E1.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49B')">
<img alt="yellow heart"
title="yellow heart - 1F49B"
src="color/72x72/1F49B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49A')">
<img alt="green heart"
title="green heart - 1F49A"
src="color/72x72/1F49A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F499')">
<img alt="blue heart"
title="blue heart - 1F499"
src="color/72x72/1F499.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FA75')">
<img alt="light blue heart"
title="light blue heart - 1FA75"
src="color/72x72/1FA75.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F49C')">
<img alt="purple heart"
title="purple heart - 1F49C"
src="color/72x72/1F49C.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F90E')">
<img alt="brown heart"
title="brown heart - 1F90E"
src="color/72x72/1F90E.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F5A4')">
<img alt="black heart"
title="black heart - 1F5A4"
src="color/72x72/1F5A4.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1FA76')">
<img alt="grey heart"
title="grey heart - 1FA76"
src="color/72x72/1FA76.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F90D')">
<img alt="white heart"
title="white heart - 1F90D"
src="color/72x72/1F90D.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F48B')">
<img alt="kiss mark"
title="kiss mark - 1F48B"
src="color/72x72/1F48B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4AF')">
<img alt="hundred points"
title="hundred points - 1F4AF"
src="color/72x72/1F4AF.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A2')">
<img alt="anger symbol"
title="anger symbol - 1F4A2"
src="color/72x72/1F4A2.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A5')">
<img alt="collision"
title="collision - 1F4A5"
src="color/72x72/1F4A5.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4AB')">
<img alt="dizzy"
title="dizzy - 1F4AB"
src="color/72x72/1F4AB.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A6')">
<img alt="sweat droplets"
title="sweat droplets - 1F4A6"
src="color/72x72/1F4A6.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A8')">
<img alt="dashing away"
title="dashing away - 1F4A8"
src="color/72x72/1F4A8.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F573')">
<img alt="hole"
title="hole - 1F573"
src="color/72x72/1F573.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4AC')">
<img alt="speech balloon"
title="speech balloon - 1F4AC"
src="color/72x72/1F4AC.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F441-FE0F-200D-1F5E8-FE0F')">
<img alt="eye in speech bubble"
title="eye in speech bubble - 1F441-FE0F-200D-1F5E8-FE0F"
src="color/72x72/1F441-FE0F-200D-1F5E8-FE0F.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F5E8')">
<img alt="left speech bubble"
title="left speech bubble - 1F5E8"
src="color/72x72/1F5E8.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F5EF')">
<img alt="right anger bubble"
title="right anger bubble - 1F5EF"
src="color/72x72/1F5EF.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4AD')">
<img alt="thought balloon"
title="thought balloon - 1F4AD"
src="color/72x72/1F4AD.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F4A4')">
<img alt="ZZZ"
title="ZZZ - 1F4A4"
src="color/72x72/1F4A4.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F44B')">
<img alt="waving hand"
title="waving hand - 1F44B"
src="color/72x72/1F44B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F91A')">
<img alt="raised back of hand"
title="raised back of hand - 1F91A"
src="color/72x72/1F91A.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F590')">
<img alt="hand with fingers splayed"
title="hand with fingers splayed - 1F590"
src="color/72x72/1F590.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('270B')">
<img alt="raised hand"
title="raised hand - 270B"
src="color/72x72/270B.png" height="72" width="72">
</button>
<button onclick="copyToClipboard('1F596')">
<img alt="vulcan salute"
title="vulcan salute - 1F596"
src="color/72x72/1F596.png" height="72" width="72">
</button>