Search code examples
reactjsreact-icons

React-Icons: Icon not aligning with Text

I am using react-icons in one of my projects and I am not able to align the icons (vertically) with the text. Following is what I am getting currently.

enter image description here

As you can see -- The icons are a little higher than the text.

Following is my HTML code:

<div className="route-info-container">
                    <div>
                        <p>Difficulty (1-10)</p>
                        <h2><AiFillFire />{route.difficulty}</h2>
                    </div>
                    <div>
                        <p>Length</p>
                        <h2><GiTrail />{route.length}</h2>
                    </div>
                    <div>
                        <p>Est Driving Time</p>
                        <h2><RiTimerFlashFill />{route.estimatedDrivingTime}</h2>
                    </div>
                    <div>
                        <p>Permits</p>
                        <h2><IoNewspaperSharp />{route.permits? 'Required': 'Not Required'}</h2>
                    </div>
</div>

Following is my css:

.route-info-container {
      display: grid;
      grid-template-columns: auto auto;
  }
  
  .route-info-container h2 {
    font-size: 25px;
    margin-top: 10px;
  }
Solution

  • It' s because the svg' s alignment. You can't do too much things to svg but try to do this to h2:

    h2 {
   display: flex;
   align-items: center;
}