Is it a sub-sub-heading? then use an h3. If you feel the need to add an element that isn’t allowed in an h3 then it probably isn’t part of the heading (so either you don’t have a heading, or the additional element should appear after it).

(You can’t play everything inside a span either).

Don’t forget the warning from the CSS specification:

Note. CSS gives so much power to the “class” attribute, that authors could conceivably design their own “document language” based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the “class” attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

If it’s a heading (or actually a lower-level heading – third level) and if (like in your example) it only contains inline elements that are part of the heading, the way it’s used in your first example is correct.

Screen readers, assistive technology and search engines will know that way that it’s a third-level heading, which they wouldn’t know when you use a styled span

So imagine i have the following scenario:

<h3 className="service-card__body__title">
    <Icon name={service.icon} size="xl" />
    <span>{service.title}</span>
</h3>

Shouldn’t this be better?

<span className="service-card__body__title">
  <Icon name={service.icon} size="lg" />
  <span>{service.title}</span>
</span>

or

<div className="service-card__body__title">
      <Icon name={service.icon} size="lg" />
      <span>{service.title}</span>
</div>

So the h tag is a sensitive tag. Right now the design may no be affected, but if we add other elements to the design it could be affected, since you can not place everything inside of a h tag.

https://dotnetdaily.net/web-development/tutorials/html-tags-place-a-h1-tag