Looking at it zoomed in like this, it also seems there's inconsistency in the vertical spacing within it. I can see this with just text on the others too.

I'm not sure what you mean with vertical inconsistency. There's equal padding top and bottom. Anything else is subject to browser font rendering.

I'm away from the computer so I'll point this out in more detail later, but this can happen with vertically aligning an icon and text when the icon is the anchor point for alignment. I've had to work around this elsewhere.

OK, yes, that needs some adjustment. I'm not sure what you're talking about with "just text on the others" though.

In the screenshots, the text is all heavily weighted toward the bottom of each badge (with or without icons). 9-10px above the highest point, 6-7px below the lowest, depending on the badge. It looks pretty noticeable, and I was trying to account for why it'd be so shifted.
I tried locally and I can't reproduce this issue, so I don't know what's going on in the screenshots. The rendering in yours and in mine (regardless of browser) is quite different. But it seems fine. So it must come down to font differences, but I wanted to be sure.
Here's how that looks (your Success on the left, mine on the right).

I'll track that for later.

Apparently the standard storybook config for eslint explicitly turns off the sort-keys rule:

  const storybookConfig = config.defineConfig([{
    rules: {
      // Don't warn about sorting keys in objects.
      // There's a reasonable Story-specific flow to Story configurations,
      // and sorting by key isn't necessarily it. Allow Stories to define
      // the flows they want.
      'sort-keys': 'off'
    }
  }]);


I'll fix up things where they make sense.