JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a class="icon" data-char="¶"></a>
  <a class="icon" data-char="X"></a>
  <a class="icon" data-char="?"></a>
  <a class="icon icon-big" data-char="$"></a>
  <a class="icon icon-small" data-char="#"></a>
</div>

CSS

div {
  display: flex;
  background: #000;
  width: 600px;
  height: 600px;
  justify-content: center;
  align-items: center;
}

.icon {
  color: #fff;
  background: #0f0;
  padding: 0.2em;
  border-radius: 100%;
  font-size: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
}
.icon::before {
  content: attr(data-char);
  font-size: 1em;
}

.icon-big   { font-size: 100px; }
.icon-small { font-size: 20px; }