react font awesome renders big icon until scales down

Turn off autoAddCss:

import { library, config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

Load in CSS directly in SCSS file:

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

This is an issue with the CSS loading after the page renders initially, as you have guessed. The solution that I have found is to either make sure the CSS on the server renders on the same page as the icon (depending on what frameworks you are using to manage stylesheets), or to make sure that whatever .css file you are using for this gets loaded before the html renders. This can be done by making sure the link tag for the stylesheet appears near the top of your page.

Please, see this article:

https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

In react you need to this in your layout or global config:

import { library, config, dom } from '@fortawesome/fontawesome-svg-core' 
config.autoAddCss = false
...

And in your style put this:

<style jsx global>{`
  ...

  @import url('https://fonts.googleapis.com/css?family=Didact+Gothic');

  ${dom.css()}

  ...
`}</style>