Crop icon image so background is equal to the perimeter of icon

How can I crop this image so the background only extends to the edge of the icon? I would like to color each icon like the image I provided, but I need to remove the square background and have only the space inside the icon change color, can someone help me with this?

Here is the jsx for the icon component

import React from 'react';
import fireIconImage from '../images/fireIcon.png';

export default function FireIcon(props) {
    return (
        <img
            onClick={props.onClick}
            onMouseLeave={props.onMouseLeave}
            onMouseOver={props.onMouseOver}
            className={props.className}
            src={fireIconImage}
            alt="fire icon"
            id={props.id}
        ></img>
    )
}

Here is the jsx for the parent component that holds the icons

import React from 'react'
import fireIconImage from '../images/fireIcon.png'
import FireIcon from './FireIcon'

export default function BlogPostForm () {
    const [formState, setFormState] = React.useState({ flaire: '', title: '', text: ''});
    const [isHovered, setIsHovered] = React.useState();
    const [isLit, setIsLit] = React.useState();

    function changeFlaire(event) {
        const selectedFlaire = event.target.value;
        setFormState( {...formState, flaire: selectedFlaire });
    }

    function changeTitle(event) {
        const title = event.target.value;
        setFormState( {...formState, title: title });
    }

    function changeText(event) {
        const text = event.target.value;
        setFormState( {...formState, text: text });
    }

    function handleMouseOver(e) {
        setIsHovered(e.target.id);
    }

    function handleMouseLeave(e) {
        setIsHovered();
    }

    function handleFireIconClick(e) {
        setIsLit(e.target.id);
    }

    function handleFireIconClass(fireLevel) {
        const classNames = ['fireIcon']
            classNames.push(`fireIcon${fireLevel}`)
            if (isHovered >= fireLevel) {
                classNames.push('isHeld')
            }
            if (isLit >= fireLevel) {
                classNames.push('isLit')
            }
            console.log(classNames)
        return classNames.join(' ');
        
    }


    const fireIconsArray = [];

    for (let i = 0; i < 5; i++) {
        fireIconsArray.push(
            <FireIcon 
                onClick={handleFireIconClick}
                onMouseLeave={handleMouseLeave}
                onMouseOver={handleMouseOver}
                className={handleFireIconClass(i+1)}
                src={fireIconImage}
                alt="fire icon"
                id={i+1}
            />
        )
    }

    console.log(fireIconsArray);
    
    return (
        <form className="postForm">
            <h1 className="postFormHeader">Create a blog post!</h1>        
                <select
                    required
                    className="flaireSelect" 
                    value={formState.flaire}
                    onChange={changeFlaire}>
                        <option disabled={true} value="">Choose a flaire</option>
                        <option value="JavaScript">JavaScript</option>
                        <option value="CSS">CSS</option>
                        <option value="HTML">HTML</option>
                        <option value="REACT">REACT</option>
                        <option value="BACKEND">BACKEND</option>
                </select>
                <input
                    value={formState.title}
                    onChange={changeTitle}
                    className="titleBox"
                    placeholder="title"
                    type="text"
                    id="title"
                    name="title"
                />
                <textarea
                    value={formState.text}
                    onChange={changeText}
                    className="textBox"
                    placeholder="text"
                    type="text"
                    id="blogPost"
                    name="blogPost"
                />
                <div className="fireIconContainer">
                    {fireIconsArray}
                </div>  
                <div className="blogPostFormButtonContainer">
                    <button className="blogPostSubmit" type="submit">SUBMIT</button>
                    <button className="blogPostCancel" type="submit">CANCEL</button>
                </div>
        </form>
    )
}

Here is the css

/*blogPostForm */
.postForm {
  font-family: "Montserrat", sans-serif;
  color: white;
  background-color: var(--color2);
  border-radius: 10px;
  margin-top: 10px;
  width: 80%;
  max-width: 750px;

  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "flaire"
    "title"
    "post"
    "buttons";
  grid-gap: 5px;
}

.postFormHeader {
  justify-self: center;
}

.flaireSelect {
  font-family: "Montserrat", sans-serif;
  justify-self: center;
  width: 150px;
  height: 35px;
  text-align: center;
}

select:invalid {
  color: grey;
}

.titleBox {
  font-family: "Montserrat", sans-serif;
  height: 40px;
  margin: 10px;
}

.textBox {
  font-family: "Montserrat", sans-serif;
  height: 100px;
  margin: 10px;
  resize: vertical;
}

.fireIconContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fireIcon {
  color: white;
  width: 40px;
  height: 40px;
  transition: all 0.2s ease-in-out;
}

.fireIcon1.isLit {
  background-color: #ffd000;
}

.fireIcon2.isLit {
  background-color: rgb(255, 136, 0);
}

.fireIcon3.isLit {
  background-color: hsl(22, 100%, 50%);
}

.fireIcon4.isLit {
  background-color: rgb(255, 51, 0);
}

.fireIcon5.isLit {
  background-color: rgb(187, 26, 4);
}

.isHeld {
  transform: scale(1.1);
}

.blogPostFormButtonContainer {
  font-family: "Montserrat", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 10px;
}

.blogPostSubmit {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}

.blogPostCancel {
  font-family: "Montserrat", sans-serif;
  width: 35%;
  margin: 5px;
  height: 35px;
}