I’m using PhosphorIcon in a react project, is there a way to set the bg color on hover instead of using two different instances and toggle(show/hide) via CSS?

  <a href='#' className='addTableButton'>
    <PlusSquare className='normal' size={32}  />
    <PlusSquare className='hover' size={32} color="#9f6786" weight="fill" />
  </a>

CSS

a.addTableButton {
  ...
  .hover {
    display: none;
  } 
}
a.addTableButton:hover {
  .hover {
    display: block;
  }
  .normal {
    display: none;
  }
}