Random Quote Machine CSS Help

Hi campers! I hope all of you are doing well. I need help regarding my Random Quote Machine Project.
How do I centre these icons between the circle?
2022-04-16 03_11_31-A Pen by Eman Zulfiqar

.css{
margin: 0 0.313rem;
  height: 2.938rem;
  width: 2.938rem;
  display: flex;
  cursor: pointer;
  color: var(--color-body);
  list-style: none;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-body);
  transition: all 0.3s ease;
}

Please post a Codepen with an example.

What are the icons? Are they images, SVG, or what?

Did you inspect the element to see what is happing?


This is centered as expected and is pretty much using the same CSS as you.

<div class="icon">
  <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
  </svg>
</div>
.icon {
  height: 2.938rem;
  width: 2.938rem;
  border: 2px solid black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@lasjorg Thank you for your help .I have figured it out.