How can i add a circular backgrounds around a react icon?

Question

How can I add circular backgrounds around icons? I currently have an icon from react-icons and would like to add a circle around it. But so far some of my methods have not worked. Any input is valued.

below is the approach and thank you.

import { RiRocketLine } from 'react-icons/ri'
....
<div id='icons' className='icon'>
   <RiRocketLine style={{ color: 'red' }} size="30px" />
</div>

score 3 · Answer 1 · answered Oct 10 '22 at 20:12

3

You have to use border-radius and border

I used plain html, but the answer will not differ for react

.icon {
  border-radius: 50%;
  border: 2px solid red;
  padding: 5px;
  font-size: 30px;
}

<span class="icon"></span>

answered Oct 10 '22 at 20:12

Konrad

21,590
4
28
64

so instead of a div use a span? – ThatGuyNick Oct 10 '22 at 20:14
The tag doesn't matter – Konrad Oct 10 '22 at 20:15

score 0 · Answer 2 · answered Oct 10 '22 at 20:28

Suggestion: You can change the div border-radius by 50% and adjust the position of your icon, I hope it will work for you.

#icons{
    background: transparent;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

import { RiRocketLine } from 'react-icons/ri'
....
<div id='icons' className='icon'>
   <RiRocketLine style={{ color: 'red' }} size="30px" />
</div>

you can check this StackOverflow link

How can i add a circular backgrounds around a react icon?

2 Answers2