React icons display

Question

My imported React icons on my personal website are not displaying at all. I tried reinstalling React Icons with and without --save. I checked node_modules and package.json. Everything seems to be in order, but it still doesn't work.

Here is my code from HeaderSocials.jsx:

import React from 'react'
import { BsLinkedin } from 'react-icons/bs'
import { BsGithub } from 'react-icons/bs'

const HeaderSocials = () => {
  return (
    <div className='header__socials'>
        <a href="https://linkedin.com" target="_blank" rel="noreferrer"> <BsLinkedin/> </a>
        <a href="https://github.com" target="_blank" rel="noreferrer"> <BsGithub/> </a>
        <a href="https://dribbble.com" target="_blank" rel="noreferrer">aa</a>
    </div>
  )
}

export default HeaderSocials

And Header.jsx:

import React from 'react'
import './header.css'
import CTA from './CTA'
import SKANDER from '../../assets/SKANDER.jpg'
import HeaderSocials from './HeaderSocials'

const Header = () => {
  return (
    <div>
      <header>
        <div className="container header__container">
          <h5>Hello I'm</h5>
          <h1>Skander JEDDA</h1>
          <h5 className="text-light">Fullstack JS Developer</h5>
          <CTA />
          <HeaderSocials />

          <div className="me">
            <img src={SKANDER} alt="me" />
          </div>

          <a href="#contact" className='scroll__down'>Scroll Down</a>
        </div>
      </header>
    </div>
  )
}

export default Header

I tried reinstalling the library and checking Stack Overflow, and I even asked ChatGPT, but still to no avail.

Answer 1

Try removing the className 'header__socials' and then if you want to style your icons here is an example link