<h1>Emojicons</h1>
<div class="icon">âĪïļ</div>
<div class="icon">⭐</div>
<div class="icon">ðŸ‘ðŸ―</div>
<div class="icon">☁ïļ</div>
<div class="icon">🔰</div>
<div class="icon">🏠</div>
<div class="icon">✔ïļ</div>
<div class="icon">✖ïļ</div>
<div class="icon">ðŸŽĩ</div>
<div class="icon">💎</div>
<div class="icon">✏ïļ</div>
<div class="icon">⏰</div>
<div class="icon">⚙ïļ</div>
<div class="icon">ðŸ—Ģ</div>
<div class="icon">🙍</div>
<div class="icon">🙍ðŸŧ‍♂ïļ</div>
<div class="icon">ðŸ’Ą</div>
<div class="icon">🗑ïļ</div>
<div class="icon">💭</div>
<div class="icon">🔧</div>
<div class="icon">📞</div>
<div class="icon">ðŸ–Ĩ</div>
<div class="icon">ðŸ–Ļ</div>
<div class="icon">⌛ïļ</div>
<div class="icon">💎</div>
<div class="icon">🛎</div>
<div class="icon">🔑</div>
<div class="icon">🗝</div>
<div class="icon">🛒</div>
<div class="icon">📄</div>
<div class="icon">🗒</div>
<div class="icon">📁</div>
<div class="icon">📖</div>
<div class="icon">🔗</div>
<div class="icon">📎</div>
<div class="icon">📌</div>
<div class="icon">📍</div>
<div class="icon">✂ïļ</div>
<div class="icon">🖋</div>
<div class="icon">🖌</div>
<div class="icon">🔍</div>
<div class="icon">🔒</div>
<div class="icon">ðŸšŦ</div>
<div class="icon">❗ïļ</div>
<div class="icon">❓</div>
<div class="icon">☀ïļ</div>
<div class="icon">🌙</div>
<div class="icon">🔔</div>
<div class="icon">🏷</div>
<div class="icon">ðŸ›Ą</div>
<div class="icon">🚀</div>
<div class="icon">🚗</div>
<div class="icon">🏆</div>
<div class="icon">ðŸ§Đ</div>
<div class="icon">ðŸ”Ĩ</div>
<div class="icon">ðŸĶķ</div>
<div class="icon">👋</div>
<div class="icon">👈</div>
<div class="icon">👉</div>
<div class="icon">👆</div>
<div class="icon">👇</div>
<div class="icon">👊</div>
<div class="icon">👑</div>
<div class="icon">ðŸĒ</div>
<div class="icon">🐇</div>
<div class="icon">🐞</div>
<div class="icon">☠ïļ</div>
<div class="icon">ðŸĶī</div>
<div class="icon">ðŸ•ķ</div>
<div class="icon">ðŸŽĐ</div>
<div class="icon">☂ïļ</div>
<div class="icon">ðŸ’Đ</div>

* { 
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  flex-wrap: wrap;
  display: grid;
  align-items: center;
  padding: 5vw;
  grid-gap: 2.5vw;
  grid-template-columns: repeat(8, 1fr);
  font-family: 'Poppins', sans-serif;
}

.icon {
  text-align: center;
  font-size: 5vw;
  padding: 1vw;
  background: #6045f2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

h1 {
  grid-column: 1 / 9;
  margin: 0;
  font-size: 5vw;
}


// const config = ['black heart', 'star', 'cloud']

// const run = async () => {
//   const response = await fetch('https://assets.codepen.io/18515/emoji.json');
//   const json = await response.json();
//   const emojis = json.filter(item => config.includes(item.name))
//   .map(item => `<div>${item.char}</div>`)
//   .join('');
//   console.log(emojis);
//   const el = document.getElementById('emojis');
//   el.innerHTML = emojis;
// }

// run();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/noahblon/pen/QYvmQe/caa6efe92005db0a8b9206328253c5cc.js