Reactjs SVG icons are different sizes despite the same css

Question

This is my first time using reactjs to build a website. I've been using ReactJS icons from the React Icon Library. When these icons are repeated in the same part of the website, their sizes will vary. Photos are attached for your reference'. I checked using check. show For the smaller icon it's path is 9.97x9.97 but for the normal display it's path is 14x14. Not sure what the path means and I'm not sure why the icons are different sizes

JSX code is (example)

import React from 'react'
import './exp.css'
import { AiOutlineCheckCircle } from 'react-icons/ai'

const Exp = () => {
  return (
    <section id='exp'>
      <h5>Skills & Qualifications</h5>
      <h2>My Experience</h2>
      <div className="container exp__container">
        <div className="exp_english">
          <h3>English Literature</h3>
          <div className="exp__content">
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
                <h4>Shakespearian Literature</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>American Literature</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Oxford Grammer</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
             <div>
             <h4>Poetry Writing</h4>
              <small className='text-light'>Mastered</small>
             </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Critical Analysis</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
          </div>
        </div>
        

{/* END OF ENGLISH LITERATURE */} 
        <div className="exp_pyschology">
        <h3>Pyschology</h3>
          <div className="exp__content">
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Counselling</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Coaching</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Research</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Advisory</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>
              <div>
              <h4>Teaching</h4>
              <small className='text-light'>Mastered</small>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section >
  )
}

export default Exp

.exp__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
}

.exp__container > div {
    background-color: var(--color-blueish-pink);
    padding: 2.4rem 4rem;
    border-radius: 2rem;
    border: 1px solid transparent;
    transition: var(--transition);

}

.exp__container > div:hover {
    background-color: var(--color-bluegreen-transparent);
}

.exp__container > div h3 {
    text-align: center;
    margin-bottom: 2rem;
}

.exp__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
}

.exp__details {
    display: flex;
    gap: 1rem;
}

.exp__details-icons {
    margin: 0.8rem;
    color: var(--color-gray);
    font-size: 1rem;

    

}

/* ================ MEDIA QUERIES (MEDIUM DEVICES) ============================== */
@media screen and (max-width:1024px) {
    .exp__container {
        grid-template-columns: 1fr;
    }

    .exp__container > div {
        width: 80%;
        padding:2rem;
        margin:0 auto;
    }

    .exp__content {
        padding:1rem;
    }
}

/* ================ MEDIA QUERIES (SMALL DEVICES) ============================== */
@media screen and (max-width:600px) {
    .exp__container {
        gap: 1rem;
    }

    .exp__container > div {
        width: 100%;
        padding: 2rem 1rem;
        margin:1rem;
    }
}

Check the first icon in the image, it looks completely out of sync

Answer 1

This is caused by Flex. Wrap the icon with a div or add flex-shrink: 0 to the .exp__details-icons class.

    

        
    
    

        
Shakespearian Literature
        Mastered