Как центрировать элемент по центру круга?
Кругу display: flex; align-items: center; justify-content: center;
Если центрировать иконку при помощи position, top, left, transform, то часто будет получаться мыло. Поэтому лучше использовать что-то другое. Можно на флексах как в примере ниже, если размер неизвестен, можно только position, top: 50%, left: 50%, margin: -[пол высоты иконки] 0 0 -[пол ширины иконки], если размер иконки известен..circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: red;
}

.circle .icon {
  line-height: 100%;
}