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>

CodePudding user response：

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 >